this 之谜揭底:从浅入深理解 JavaScript 中的 this 关键字(二)(下)

简介: this 之谜揭底:从浅入深理解 JavaScript 中的 this 关键字(二)(下)
+关注继续查看

绑定例子

被忽略的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. 1. 判断 this 指向
    1. 1. 是否在 new 中调用(new 绑定), this 指向新创建的对象
    2. 2. 是否通过 call、apply(显示绑定),this 指向绑定的对象
    3. 3. 是否在某个对象中调用(隐式绑定),this 指向绑定对象的上下文
    4. 4. 如果都不是,则是默认绑定,在严格模式下,this 指向 undefined, 非严格模式下,this 指向全局对象。
  1. 2. 箭头函数不会使用上述的四条规则,而是根据当前的词法作用域来决定 this 的。箭头函数会继承外层函数调用的 this 绑定(无论 this 绑定到什么)。与 ES6 之前的 self = this 的机制一样。
  2. 3. 注意:对于默认绑定来说,决定 this 绑定对象的并不是调用位置是否处于严格模式,而是函数体是否处于严格模式。如果函数体处于严格模式,this 会被绑定到 undefined,否则this 会被绑定到全局对象。


特殊字符描述


•问题标注 Q:(question)•答案标注 R:(result)•注意事项标准:A:(attention matters)•详情描述标注:D:(detail info)•总结标注:S:(summary)•分析标注:Ana:(analysis)•提示标注:T:(tips)

相关文章
|
8天前
|
JavaScript
js as关键字
js as关键字
8 0
|
1月前
|
JavaScript 前端开发
js中new关键字的作用,new一个对象的过程中发生了什么
js中new关键字的作用,new一个对象的过程中发生了什么
23 0
|
2月前
|
前端开发 JavaScript
前端基础 - JavaScript之this关键字
前端基础 - JavaScript之this关键字
12 0
|
2月前
|
前端开发 JavaScript
带你读《现代Javascript高级教程》三、函数上下文和this关键字(1)
带你读《现代Javascript高级教程》三、函数上下文和this关键字(1)
|
2月前
|
JavaScript 前端开发
带你读《现代Javascript高级教程》三、函数上下文和this关键字(2)
带你读《现代Javascript高级教程》三、函数上下文和this关键字(2)
|
2月前
|
Web App开发 JavaScript 前端开发
Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
Chrome 开发者工具里根据关键字搜索,结果列表里的 JavaScript 文件名后面跟的 ‘eval‘ 是什么含义
32 0
|
3月前
|
JavaScript
js根据输入关键字给字体标红、变红
js根据输入关键字给字体标红、变红
|
4月前
|
JavaScript 前端开发
this 之谜揭底:从浅入深理解 JavaScript 中的 this 关键字(二)(上)
this 之谜揭底:从浅入深理解 JavaScript 中的 this 关键字(二)
|
4月前
|
自然语言处理 JavaScript 前端开发
this 之谜揭底:从浅入深理解 JavaScript 中的 this 关键字(一)
this 之谜揭底:从浅入深理解 JavaScript 中的 this 关键字(一)
|
4月前
|
JavaScript
js new关键字的作用
js new关键字的作用
19 0
相关产品
云迁移中心
推荐文章
更多