关于this

Jan 20 2016

this应该是Javascript里永恒的面试题。这次只说说硬绑定里的陷阱题。

硬绑定

求下面这个题目的输出：

function foo(cb) {
    cb();
}
var a = {
    a: "a in a",
    getA:function(){
    	console.log(this.a);
}
};
var b = {
	a: "a in b"
};
var getA = a.getA;
var getA2 = getA.bind(a);
a.getA();//"a in a"
getA();//a
foo(a.getA);//a
getA2.call(b);//"a in a"

第一个很好理解吧，不用多说。
第二个getA只是a.getA的一个引用，指向的是函数本身，此时的getA其实是一个不带任何修饰的函数调用，所以会采用默认绑定（绑定到全局对象或undefined上）。
第三个其实和第二个是一个原理。
第四个就是个障眼法，getA2已经将getA方法硬绑定到全局a变量了，可以理解为bind返回了一个硬编码的新函数，之后你无论怎么调用getA2，这个新函数的this永远指向a。

比硬绑定还强的指定

我们还可以看看什么可以改变硬绑定的指向：

function foo(something) {
    this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar( 3 );
console.log( obj1.a ); // 2
console.log( baz.a ); // 3

有趣了吧，真是一山更比一山高。如果要追踪其原理，推荐一本书You Don’t Know JS。

Javascript

this