(JS设计模式与开发实践笔记)第二章

第二章：this、call和apply

this
JS的this总是指向一个对象，而具体指向哪个对象是在运行时基于函数的执行环境动态绑定的，而非函数被声明时的环境。
this指向的四种情况

作为对象的方法调用

var obj={a:1,getA:function(){alert(this===obj); //truealert(this.a)      //1}
};obj.getA();

作为普通函数调用

// 1.
window.name='globalName';var getName=function(){return this.name;
}console.log(getName());   //globalName// 2.
window.name='globalName';var myObject={name:'sven',getName:funtion(){return this.name;}
};var getName=myObject.getName;
console.log(getName());    //globalName// 3.
<html><body><div id="div1">我是一个div</div></body><script>window.id='window';document.getElementById('div1').onclick=function(){alert(this.id);var callback=function(){alert(this.id);     //window  }callback();};</script>
</html>// 3的解决方案
document.getElementById('div1').onclick=function(){var that=this;  //保存div的引用var callback=function(){alert(that.id);    //div1}callback();
};

构造器调用

var MyClass=function(){this.name='sven';
};var obj=new MyClass();
alert(obj.name);     //sven// 显式返回object类型的对象
var MyClass=function(){this.name='sven';return {   //显式地返回一个对象name:'anne';};var obj=new MyClass();alert(obj.name);    //anne
}

Function.prototype.call或Function.prototype.apply调用

var obj1={name:'sven',getName:function(){return this.name;};
};var obj2={name:'anne'
};console.log(obj1.getName());   //sven
console.log(obj1.getName.call(obj2));    //anne

call和apply

当使用call或apply的时候，如果我们传入的第一个参数为null，函数体内的this会指向默认的宿主对向，在浏览器中则是window

// Function.prototype.call
var func=function(a,b,c){alert([a,b,c]);     //[1,2,3]
};func.apply(null,[1,2,3]);//Function.prototype.apply
var func=function(a,b,c){alert([a,b,c]);     //[1,2,3]
};func.call(null,1,2,3)

有时候我们使用call或apply的目的不在于指定this指向，而是另有用途，比如借用其他对象的方法

call和apply的用途

改变this指向

var obj1={name:'sven'
};var obj2={name:'anne'
};window.name='window';var getName=function(){alert(this.name);
};getName();
getName.call(obj1);
getName.call(obj2);

借用其他对象的方法

// 第一种
var A=function(name){this.name=name;
};var B=function(){A.apply(this,arguments);
};B.prototype.getName=function(){return this.name;
};var b=new B('sven');
console.log(b.getName());//第二种
(function(){Array.prototype.push.call(arguments,3);console.log(arguments);
})(1,2);//ArrayPush这个对象至少要满足
//①对象本身要可以存取属性
//②对象的length属性可读写

Function.prototype.bind

Function.prototype.bind=function(context){var self=this;return function(){return self.apply(context,arguments);}
};var obj={name:'sven'
};var func=function(){alert(this.name);    //sven
}.bind(obj);func();

(JS设计模式与开发实践笔记)第二章相关推荐

js设计模式与开发实践(读书笔记)
1 面向对象的js 1.1 动态类型语言和鸭子类型编程语言按数据类型可分成静态类型和动态类型语言,其中js属于动态类型语言,对一个变量赋值时,不需要考虑其类型. 鸭子类型: 通俗理解,只要走起路来像 ...
JavaScript设计模式与开发实践 | 02 - this、call和apply
this JavaScript的this总是指向一个对象,至于指向哪个对象,是在运行时基于函数的执行环境的动态绑定的,而非函数被声明时的环境. this的指向 this的指向大致可以分为以下4类: 作 ...
JavaScript设计模式与开发实践(网课学习)
Js设计模式与开发实践面向对象 5大设计原则 23种设计模式(实际只有21种) 设计模式主要分为下面三大类创建型模式,共五种:工厂方法模式.抽象工厂模式.单例模式.建造者模式.原型模式. 结构型模 ...
JS代理模式《JavaScript设计模式与开发实践》阅读笔记
代理模式代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问. 保护代理和虚拟代理保护代理:当有许多需求要向某对象发出一些请求时,可以设置保护代理,通过一些条件判断对请求进行过滤. 虚拟 ...
javascript设计模式(javascript设计模式与开发实践读书笔记)
javascript设计模式(javascript设计模式与开发实践读书笔记) 单例模式策略模式代理模式迭代器模式发布-订阅模式命令模式组合模式模板方法模式享元模式职责链模式中介者 ...
读书笔记——《Python编程从入门到实践》第二章
读书笔记--<Python编程从入门到实践>第二章读书笔记--<Python编程从入门到实践>第二章变量如何使用变量如何规范变量命名字符串字符串是什么如何修改字符 ...
Web前端开发笔记——第二章 HTML语言第四节超链接标签
目录前言一.超链接标签 (一)链接其它子网页 (二)链接其它站点 (三)虚拟超链接二.从当前页面链接到指定位置三.链接的访问情况四.在新窗口中打开链接例题结语前言本节介绍超链接标签即 ...
[go学习笔记.第二章] 2.go语言的开发工具以及安装和配置SDK
一.工具介绍: 1.Visual Studio Code 一个运行于Mac,Windows,和linux上的,默认提供Go语言的语法高亮的IED,可以安装Go语言插件,还可以支持智能提示,编译运行等功 ...
Android群英传笔记——第二章：Android开发工具新接触
Android群英传笔记--第二章:Android开发工具新接触其实这一章并没什么可讲的,前面的安装Android studio的我们可以直接跳过,如果有兴趣的,可以去看看Google主推-Andr ...

(JS设计模式与开发实践笔记)第二章

第二章：this、call和apply

(JS设计模式与开发实践笔记)第二章相关推荐

最新文章

热门文章