美文网首页
Day34 this 绑定

Day34 this 绑定

作者: JSleefat | 来源:发表于2019-05-07 13:42 被阅读0次

    默认绑定

    • 在无法应用其他规则时的默认规则,默认为全局对象window
    function foo() {
      console.log( this.a );
    }
    var a = 2;
    foo(); // 2
    

    隐式绑定

    • 取决于调用位置的上下文对象
    function foo() {
      console.log( this.a );
    }
    var obj = {
      a: 2,
      foo: foo
    };
    obj.foo(); // 2
    
    • 对象属性引用链中只有最顶层或者说最后一层会影响调用位置
    function foo() {
      console.log( this.a );
    }
    var obj2 = {
      a: 42,
      foo: foo
    };
    var obj1 = {
      a: 2,
      obj2: obj2
    };
    obj1.obj2.foo(); // 42
    
    • 参数传递也是一种隐式赋值
    function foo() {
      console.log( this.a );
    }
    function doFoo(fn) {
      // fn 其实引用的是 foo
      fn(); // <-- 调用位置!
    }
    var obj = {
      a: 2,
      foo: foo
    };
    var a = "oops, global"; // a 是全局对象的属性
    doFoo( obj.foo ); // "oops, global"
    

    显式绑定

    • call(..) 和 apply(..) 方法
    function foo() {
      console.log( this.a );
    }
    var obj = {
      a:2
    };
    foo.call( obj ); // 2
    
    • 硬绑定
    function foo() {
      console.log( this.a );
    }
    var obj = {
      a:2
    };
    var bar = function() {
      foo.call( obj );
    };
    bar(); // 2
    setTimeout( bar, 100 ); // 2
    // 硬绑定的 bar 不可能再修改它的 this
    bar.call( window ); // 2
    

    new绑定

    使用 new 来调用函数,或者说发生构造函数调用时,会自动执行下面的操作。

    1. 创建(或者说构造)一个全新的对象。
    2. 这个新对象会被执行 [[ 原型 ]] 连接。
    3. 这个新对象会绑定到函数调用的 this。
    4. 如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象
    function foo(a) {
      this.a = a;
    }
    var bar = new foo(2);
    console.log( bar.a ); // 2
    

    优先级

    显式>new>隐式>默认

    Tips

    • DMZ 对象(demilitarized zone,非军事区)
      Object.create(null)比{}更空

    相关文章

      网友评论

          本文标题:Day34 this 绑定

          本文链接:https://www.haomeiwen.com/subject/aqehoqtx.html