【前端工程师手册】JavaScript之this的笔记


今天总结一下this。

误解

熟悉Java或者其他语言的同学看到this会想当然的认为this指向函数本身,然而在JavaScript中并不是这样子。

function func(){
    console.log(this.index)
}
func.index  = 123
func() // undefined

结果很显然,this并不是指向函数自身。

this到底是什么

那么this到底是什么呢?
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包 含函数在哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this 就是记录的 其中一个属性,会在函数执行的过程中用到。
长话短说:this就是函数执行上下文的一个属性
this 实际上是在函数被调用时发生的绑定,它指向什么完全取决于函数在哪里被调用。

this的绑定规则

  • 默认绑定
    举个栗子:

       function foo() {
           console.log( this.a );
       }
       var a = 2; 
       foo(); // 2

    当调用 foo() 时,this.a 被解析成了全局变量 a。为什么?因为在本例中,函数调用时应用了 this 的默认绑定,因此 this 指向全局对象。
    那么我们怎么知道这里应用了默认绑定呢?可以通过分析调用位置来看看 foo() 是如何调 用的。在代码中,foo() 是直接使用不带任何修饰的函数引用进行调用的,因此只能使用 默认绑定,无法应用其他规则。
    但是此时如果使用了严格模式(strict mode),那么全局对象将无法使用默认绑定,因此 this 会绑定 到 undefined:

       function foo() { 
           "use strict";
            console.log( this.a );
        }
    
       var a = 2;
       foo(); // TypeError: this is undefined
    
  • 隐式绑定

       function foo() { 
           console.log( this.a );
       }
       var obj = { 
           a: 2,
           foo: foo 
       };
       obj.foo(); // 2

    调用位置会使用 obj 上下文来引用函数,因此你可以说函数被调用时 obj 对象“拥 有”或者“包含”它。
    当 foo() 被调用时,它的落脚点确实指向 obj 对象。当函数引 用有上下文对象时,隐式绑定规则会把函数调用中的 this 绑定到这个上下文对象。因为调 用 foo() 时 this 被绑定到 obj,因此 this.a 和 obj.a 是一样的。
    这种绑定方式的反面即是this的隐形丢失

       function foo() { 
           console.log( this.a );
       }
       var obj = { 
           a: 2,
           foo: foo 
       };
       var bar = obj.foo; // 函数别名!
       var a = "oops, global"; // a 是全局对象的属性
       bar(); // "oops, global"
    
  • 显式绑定
    一个小栗子:
    call和apply

       function foo() { 
           console.log( this.a );
       }
       var obj = { 
           a:2
       };
       foo.call( obj ); // 2

    第一个参数是一个对象,它们会把这个对象绑定到 this,接着在调用函数时指定这个 this。因为你可以直接指定 this 的绑定对象,因此我 们称之为显式绑定。
    bind

       function foo(something) { 
           console.log( this.a, something ); 
           return this.a + something;
       }
       function bind(fn, obj) {
           return function() {
               return fn.apply( obj, arguments );
           };
       }
       var obj = { 
           a:2
       };
       var bar = bind( foo, obj );
       var b = bar( 3 ); // 2 3
       console.log( b ); // 5

    由于硬绑定是一种非常常用的模式,所以在 ES5 中提供了内置的方法 Function.prototype.bind
    bind(..) 会返回一个硬编码的新函数,它会把参数设置为 this 的上下文并调用原始函数

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

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

        function foo(a) { 
            this.a = a;
        }
        var bar = new foo(2); 
        console.log( bar.a ); // 2
      

四种绑定规则的优先级

首先,默认绑定的优先级是四条规则中最低的

function foo() { 
    console.log( this.a );
}
var obj1 = { 
    a: 2,
    foo: foo 
};
var obj2 = { 
    a: 3,
    foo: foo 
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2

结论:显式绑定 > 隐式绑定

function foo(something) { 
    this.a = something;
}
var obj1 = { 
    foo: foo
};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); // 2
obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3

var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2 
console.log( bar.a ); // 4

结论:new 绑定 > 隐式绑定优先级

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

结论:new绑定 > es原生bind绑定
总结判断this的方法:

  1. 函数是否在new中调用(new绑定)?如果是的话this绑定的是新创建的对象。var bar = new foo()
  2. 函数是否通过call、apply(显式绑定)或者硬绑定调用?如果是的话,this绑定的是 指定的对象。var bar = foo.call(obj2)
  3. 函数是否在某个上下文对象中调用(隐式绑定)?如果是的话,this 绑定的是那个上 下文对象。var bar = obj1.foo()
  4. 如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到undefined,否则绑定到 全局对象。var bar = foo()

参考资料:
你不知道的JavaScript-上卷


发表评论

电子邮件地址不会被公开。 必填项已用*标注

您可以使用这些HTML标签和属性: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>