ES5 及之前时代的 JavaScript 中 this
的绑定机制是让很多开发者头疼不已的事情。this
的绑定变化多端,让笔者也吃了不少亏。本文根据《你不知道的 JavaScript》上卷中的内容总结了 this
的四条绑定规则,在此记录,以防遗忘。
独立函数调用时,this
指向全局对象,如果使用严格模式,那么全局对象无法使用默认绑定, this
绑定至 undefined
。
function foo() {
console.log(this.a);
}
var a = 2;
foo(); // 2
严格模式时:
function foo() {
"use strict";
console,log(this.a);
}
var a = 2;
foo(); // TypeError: this is undefined
当函数引用有上下文对象时(即函数作为引用属性被添加到对象中),隐式绑定规则会把函数调用中的 this
绑定到这个上下文对象。
function foo() {
console.log( this.a);
}
var obj = {
a: 2,
foo: foo
};
obj.foo(); // 2
对象属性引用链中只有最顶层或者说最后一层会影响调用位置:
obj1.obj2.foo(); // foo 中的 this 与 obj2 绑定
隐式丢失指的是函数中的 this
丢失绑定对象,即它会应用第 1 条的默认绑定规则,从而将 this
绑定到全局对象或者 undefined
上,取决于是否在严格模式下运行。以下情况会发生隐式丢失:
function foo() {
console.log( this.a);
}
var obj = {
a: 2,
foo: foo
};
var bar = obj.foo; //函数别名
var a = "这是全局变量喔";
bar(); // "这是全局变量喔"
function foo() {
console.log( this.a);
}
function doFoo(fn) {
fn(); // <-- 调用位置
}
var obj = {
a: 2,
foo: foo
};
var a = "这是全局变量喔";
doFoo( obj.foo ); // "这是全局变量喔"
其实这就是第一种情况的变种,实际上参数传递就是一种隐式赋值。除了开发人员自定义的函数,在将函数传入语言内置的函数比如 setTimeout
时,同样会发生隐式丢失的情况。
显式绑定的核心是 JavaScript 内置的 call(..)
和 apply(..)
方法,这两个方法在 JavaScript 提供的绝大多数函数以及开发者自己创建的所有函数上都可以使用。
call(..)
和 apply(..)
的第一个参数是一个对象(二者区别在后面传入的参数形式,这里不是重点,不讨论),他们会将 this
绑定到这个对象上。因为你可以直接指定 this
绑定的对象,所以这条规则被称为显式绑定。
function foo() {
console.log( this.a);
}
var obj = {
a: 2
};
foo.call(obj); // 2
如果 call
或者 apply
传入的第一个参数是原始值(字符串类型、布尔类型或者数字类型),那么该原始值会被转换成它的对象形式(new String()、new Boolean() 或 new Number()),俗称“装箱”。
显式绑定仍然无法解决丢失绑定问题。
作为显式绑定的一个变种,硬绑定可以解决丢失绑定问题。
function foo() {
console.log( this.a);
}
var obj = {
a: 2
};
var bar = function() {
foo.call(obj);
};
bar(); // 2
setTimeout(bar, 100); // 2
bar.call(window); //无效,硬绑定的 bar 不会再修改它的 this
在一个新的函数内部强制绑定 this 到某个对象上,无论之后如何调用这个新的函数,其 this
都不会丢失。
典型应用场景为创建一个包裹函数,传入所有的参数并返回接收到的所有值:
function foo(something) {
console.log(this.a, something);
return this.a + something;
}
var obj = {
a:2
};
var bar = function() {
return foo.call(obj, arguments);
};
var b = bar(3); // 2 3
console.log(b); // 5
或者将绑定的对象改为可配置,这样就成了一个辅助绑定函数:
...
function bind(fn, obj){
return function(){
return fn.apply(obj, arguments);
};
}
...
由于硬绑定实在太过常见,所以 ES5 提供了内置的 Function.prototype.bind,其用法如下:
function foo(something) {
console.log(this.a, something);
return this.a + something;
}
var obj = {
a: 2
};
var bar = foo.bind(obj);
var b = bar(3); // 2 3
console.log(b); // 5
JavaScript 自身以及许多第三方库的函数都提供了一个可选的参数,通常被称为“上下文”,其作用和 bind(..)
一样,确保回调函数使用指定的 this
。
function foo(el) {
console.log( el, this.id);
}
var obj = {
id: "awsome"
};
//调用 foo(..) 时把 this 绑定到 obj
[1,2,3].forEach(foo, obj);
// 1 awsome 2 awsome 3 awsome
实际上这些函数背后还是调用了 call()
或者 apply()
,只不过这样开发者需要写的代码就少了一些。
使用 new
来调用函数时,会自动执行下面的操作:
this
new
表达式中的函数调用会自动返回这个新对象举例如下:
function foo() {
this.a = a;
}
var bar = new foo(2);
console.log(bar.a); // 2
使用 new
来调用 foo(..)
时,会构造一个新对象并把它绑定到 foo(..)
调用中的 this
上。
具体推断细节不再表述,有兴趣的同学可以自行查看《你不知道的 JavaScript》上卷第 2 章。以上四种绑定规则的使用先后推断如下:
new
中调用(new
绑定)?如果是的话 this
绑定的是新创建的对象。
var bar = new foo();
call
、apply
(显示绑定)或者硬绑定?如果是的话,this
绑定的是指定的对象。
var bar = foo.call(obj2);
this
绑定的是那个上下文对象。
var bar = obj1.foo();
undefined
,否则绑定到全局对象。
var bar = foo();
null
或者 undefined
作为 this
的绑定对象传入 call
、apply
或者 bind
,那么这些值在调用时会被忽略,实际应用的是默认绑定规则。(书中推荐使用一个空对象来绑定 this
)。
p.foo()
实际上引用了 foo()
,如此,会应用默认绑定。
ES6 对改变 this
的混乱绑定作了相应的努力,诞生了箭头函数,其根据当前词法作用域来决定 this
而非上面的四条规则,具体来说,箭头函数会继承外层函数调用的 this
绑定(这其实和 ES6 之前代码中的 self = this
是一个道理)。