有人的地方就有江湖,有函数的地方就有
this
。而this在不同的环境下,又表现为不同的形式,难免让人有种此this非彼this的疑惑
在java等面向对象的语言中,this指的就是当前对象,而在javascript中这就不灵了,javascript中this是在编译期动态绑定的,这就形成了一把双刃剑:足够灵活却又容易让人迷惑。在javascript中this可以是全局对象、当前对象甚至任意对象(obj.call(this)
)。
我们通过函数的几种不同调用方式来看一下各自this的意义:
作为对象方法调用
在javascript中函数也是个对象,因此,函数可以作为一个对象的属性出现:
var object = {
name:"jeffie",
sayWhat:function(){
console.log(this.name + ":hello"); //jeffie:hello
}
}
object.sayWhat();
此处的this指向object对象,也就是函数所在的对象。
作为函数调用
当函数直接被调用时,此时函数中的this指向全局变量,也就是window对象:
function obj(){
console.log(this);
}
obj();//Window
构造函数中的this
在作为构造函数调用时,this指向的是新生成的实例对象:
function Plugin(name,type){
this.name = name;
this.type = type;
}
var plugin = new Plugin("core",1);
console.log(plugin.name);//core
使用apply或者call调用
javascript中每个函数都包含两个方法:apply()和call(),这两个方法非常强大,它们可以切换函数的上下文执行环境,也就是说可以修改this绑定的对象。简单来说,这两个方法可以用来设置函数的this,两个方法都接收两个参数,第一个参数是运行函数的作用域,第二个参数是参数对象,唯一的区别是apply第二个参数为参数数组(Array或者arguments):
function Plugin(name,type){
this.name = name;
this.type = type;
this.debugs = function(name,type){
console.log(this); //Object {name: "base", type: 3}
}
}
var plugin1 = new Plugin("core",1);
var plugin2 = {name:"base",type:3};
console.log(plugin1.debugs.call(plugin2));
通过上面的示例可以看出this值不再指向Plugin对象了,而是指向了plugin2的对象。
闭包中使用this
通常我们理解this对象是运行时基于函数绑定的,全局函数中this对象就是window对象,而当函数作为对象中的一个方法调用时,this等于这个对象。由于匿名函数的作用域是全局性的,因此闭包的this通常指向全局对象window:
var scope = "global";
var object = {
scope:"local",
getScope:function(){
return function(){
return this.scope;
}
}
}
调用object.getScope()()返回值为global而不是我们预期的local,在闭包中函数作为某个对象的方法调用时,要特别注意,该方法内部匿名函数的this指向的是全局变量。参考上一篇闭包
这属于 JavaScript 的设计缺陷,正确的设计方式是内部函数的 this 应该绑定到其外层函数对应的对象上,为了规避这一设计缺陷,聪明的 JavaScript 程序员想出了变量替代的方法,只需要把外部函数作用域的this存放到一个闭包能访问的变量里面即可,约定俗成,该变量一般被命名为 that:
var scope = "global";
var object = {
scope:"local",
getScope:function(){
var that = this;
return function(){
return that.scope;
}
}
}
object.getScope()()返回值为local。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。