绑定例子
被忽略的this
- •
如果你把 null 或者 undefined 作为 this 的绑定对象传入 call、apply 或者 bind，这些值在调用时会被忽略，实际应用的是默认绑定规则：
function foo() { console.log( this.a ); } var a = 2; foo.call( null ); // 2
- • 那在什么情况下会传入 null 呢？
- •
一种非常常见的做法是使用 apply(..) 来“展开”一个数组，并当作参数传入一个函数。
function foo(a,b) { console.log( "a:" + a + ", b:" + b ); } // 把数组“展开”成参数 foo.apply( null, [2, 3] ); // a:2, b:3 // 使用 bind(..) 进行柯里化 var bar = foo.bind( null, 2 ); bar( 3 ); // a:2, b:3
- • 但总是用 null 来忽略 this 绑定可能会产生一些副作用。
- • 更安全的this
- • DMZ(demilitarized zone)空委托对象
- •
在 JavaScript 中创建一个空对象最简单的方法都是 Object.create(null)。Object.create(null) 和 {} 很 像， 但 是 并 不 会 创 建 Object.prototype 这个委托，所以它比 {}“更空”：
function foo(a,b) { console.log( "a:" + a + ", b:" + b ); } // 我们的 DMZ 空对象 var ø = Object.create( null ); // 把数组展开成参数 foo.apply( ø, [2, 3] ); // a:2, b:3 // 使用 bind(..) 进行柯里化 var bar = foo.bind( ø, 2 ); bar( 3 ); // a:2, b:3
间接引用
function foo() { console.log( this.a ); } var a = 2; var o = { a: 3, foo: foo }; var p = { a: 4 }; o.foo(); // 3 (p.foo = o.foo)(); // 2
- • 赋值表达式 p.foo = o.foo 的返回值是目标函数的引用，因此调用位置是 foo() 而不是 p.foo() 或者 o.foo()。根据我们之前说过的，这里会应用默认绑定。
- •
注意：对于默认绑定来说，决定 this 绑定对象的并不是调用位置是否处于严格模式，而是函数体是否处于严格模式。如果函数体处于严格模式，this 会被绑定到 undefined，否则this 会被绑定到全局对象。
软绑定
- • 硬绑定这种方式可以把 this 强制绑定到指定的对象（除了使用 new 时），防止函数调用应用默认绑定规则。使用硬绑定会大大降低函数的灵活性，使用硬绑定之后就无法使用隐式绑定或显示绑定来修改 this。
- • 可通过一种软绑定的方法来实现：
if (!Function.prototype.softBind) { Function.prototype.softBind = function(obj) { var fn = this; // 捕获所有 curried 参数 var curried = [].slice.call( arguments, 1 ); var bound = function() { return fn.apply( (!this || this === (window || global)) ? obj : this curried.concat.apply( curried, arguments ) ); }; bound.prototype = Object.create( fn.prototype ); return bound; }; }
- • 实现软绑定功能：
function foo() { console.log("name: " + this.name); } var obj = { name: "obj" }, obj2 = { name: "obj2" }, obj3 = { name: "obj3" }; var fooOBJ = foo.softBind( obj ); fooOBJ(); // name: obj obj2.foo = foo.softBind(obj); obj2.foo(); // name: obj2 <---- 看！！！ fooOBJ.call( obj3 ); // name: obj3 <---- 看！ setTimeout( obj2.foo, 10 ); // name: obj <---- 应用了软绑定
- • 可以看到，软绑定的 foo() 可手动将 this 绑定到 obj2 或 obj3 上，但如果应用默认绑定，则会将 this 绑定到 obj。
this 词法
- • 在 ES6 中出现了一种无法使用这些规则的特殊函数类型：
箭头函数 - •
箭头函数不适用 this 的四种标准规则，而是根据外层(函数或全局)的作用域来决定 this
function foo() { // 返回一个箭头函数 return (a) => { //this 继承自 foo() console.log( this.a ); }; } var obj1 = { a:2 }; var obj2 = { a:3 }; var bar = foo.call( obj1 ); bar.call( obj2 ); // 2, 不是 3 ！
- • foo() 内部创建的箭头函数会捕获调用时 foo() 的 this。由于 foo() 的 this 绑定到 obj1， bar（引用箭头函数）的 this 也会绑定到 obj1，箭头函数的绑定无法被修改。（new 也不行！）
- • 在 ES6 之前，我们也有使用和箭头函数一样的模式，如下代码：
function foo() { var self = this; // this 快照 setTimeout( function(){ console.log( self.a ); }, 100 ); } var obj = { a: 2 }; foo.call( obj ); // 2
- • 虽然 self = this 和箭头函数看起来都可以取代 bind(..)，但是从本质上来说，它们想替代的是 this 机制。
小结
- 1. 判断 this 指向
- 1. 是否在 new 中调用(new 绑定), this 指向新创建的对象
- 2. 是否通过 call、apply(显示绑定)，this 指向绑定的对象
- 3. 是否在某个对象中调用(隐式绑定)，this 指向绑定对象的上下文
- 4. 如果都不是，则是默认绑定，在严格模式下，this 指向 undefined, 非严格模式下，this 指向全局对象。
- 2. 箭头函数不会使用上述的四条规则，而是根据当前的词法作用域来决定 this 的。箭头函数会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。与 ES6 之前的 self = this 的机制一样。
- 3. 注意：对于默认绑定来说，决定 this 绑定对象的并不是调用位置是否处于严格模式，而是函数体是否处于严格模式。如果函数体处于严格模式，this 会被绑定到 undefined，否则this 会被绑定到全局对象。
特殊字符描述
•问题标注 Q:(question)•答案标注 R:(result)•注意事项标准：A:(attention matters)•详情描述标注：D:(detail info)•总结标注：S:(summary)•分析标注：Ana:(analysis)•提示标注：T:(tips)
