注意: 本文属于基础篇,请大神绕路。如果你不够了解,或者了解的还不完整,那么可以通过本文来复习一下。 this 指向的类型
刚开始学习 JavaScript 的时候,this 总是最能让人迷惑,下面我们一起看一下在 JavaScript 中应该如何确定 this 的指向。
this 是在函数被调用时确定的,它的指向完全取决于函数调用的地方,而不是它被声明的地方(除箭头函数外)。当一个函数被调用时,会创建一个执行上下文,它包含函数在哪里被调用(调用栈)、函数的调用方式、传入的参数等信息,this 就是这个记录的一个属性,它会在函数执行的过程中被用到。
this 在函数的指向有以下几种场景:
作为构造函数被 new 调用作为对象的方法使用作为函数直接调用被 call、apply、bind 调用箭头函数中的 this
下面我们分别来讨论一下这些场景中 this 的指向。 1.new 绑定
函数如果作为构造函数使用 new 调用时, this 绑定的是新创建的构造函数的实例。
function Foo() { console.log(this)}var bar = new Foo() // 输出: Foo 实例,this 就是 bar
复制代码
实际上使用 new 调用构造函数时,会依次执行下面的操作:
创建一个新对象构造函数的 prototype 被赋值给这个新对象的 __proto__将新对象赋给当前的 this执行构造函数如果函数没有返回其他对象,那么 new 表达式中的函数调用会自动返回这个新对象,如果返回的不是对象将被忽略
var a = 'hello'function foo() { console.log(this.a)}foo.call(null) // 浏览器中输出: "hello"
复制代码
3.隐式绑定
函数是否在某个上下文对象中调用,如果是的话 this 绑定的是那个上下文对象。
var a = 'hello'var obj = { a: 'world', foo: function () { console.log(this.a) },}obj.foo() // 浏览器中输出: "world"
复制代码
上面代码中,foo 方法是作为对象的属性调用的,那么此时 foo 方法执行时,this 指向 obj 对象。也就是说,此时 this 指向调用这个方法的对象,如果嵌套了多个对象,那么指向最后一个调用这个方法的对象:
var a = 'hello'var obj = { a: 'world', b: { a: 'China', foo: function () { console.log(this.a) }, },}obj.b.foo() // 浏览器中输出: "China"
复制代码
最后一个对象是 obj 上的 b,那么此时 foo 方法执行时,其中的 this 指向的就是 b 对象。 4.默认绑定
函数独立调用,直接使用不带任何修饰的函数引用进行调用,也是上面几种绑定途径之外的方式。非严格模式下 this 绑定到全局对象(浏览器下是 winodw,node 环境是 global),严格模式下 this 绑定到 undefined (因为严格模式不允许 this 指向全局对象)。
var a = 'hello'function foo() { var a = 'world' console.log(this.a) console.log(this)}foo() // 相当于执行 window.foo()// 浏览器中输出: "hello"// 浏览器中输出: Window 对象
复制代码
上面代码中,变量 a 被声明在全局作用域,成为全局对象 window 的一个同名属性。函数 foo 被执行时,this 此时指向的是全局对象,因此打印出来的 a 是全局对象的属性。
注意有一种情况:
var a = 'hello'var obj = { a: 'world', foo: function () { console.log(this.a) },}var bar = obj.foobar() // 浏览器中输出: "hello"
复制代码
此时 bar 函数,也就是 obj 上的 foo 方法为什么又指向了全局对象呢,是因为 bar 方法此时是作为函数独立调用的,所以此时的场景属于默认绑定,而不是隐式绑定。这种情况和把方法作为回调函数的场景类似:
var a = 'hello'var obj = { a: 'world', foo: function () { console.log(this.a) },}function func(fn) { fn()}func(obj.foo) // 浏览器中输出: "hello"
复制代码
参数传递实际上也是一种隐式的赋值,只不过这里 obj.foo 方法是被隐式赋值给了函数 func 的形参 fn,而之前的情景是自己赋值,两种情景实际上类似。这种场景我们遇到的比较多的是 setTimeout 和 setInterval,如果回调函数不是箭头函数,那么其中的 this 指向的就是全局对象.
其实我们可以把默认绑定当作是隐式绑定的特殊情况,比如上面的 bar(),我们可以当作是使用 window.bar() 的方式调用的,此时 bar 中的 this 根据隐式绑定的情景指向的就是 window。 this 绑定的优先级
this 存在多个使用场景,那么多个场景同时出现的时候,this 到底应该如何指向呢。这里存在一个优先级的概念,this 根据优先级来确定指向。优先级:new 绑定 > 显示绑定 > 隐式绑定 > 默认绑定
所以 this 的判断顺序:
new 绑定: 函数是否在 new 中调用?如果是的话 this 绑定的是新创建的对象;显式绑定: 函数是否是通过 bind、call、apply 调用?如果是的话,this 绑定的是指定的对象;隐式绑定: 函数是否在某个上下文对象中调用?如果是的话,this 绑定的是那个上下文对象;如果都不是的话,使用默认绑定。如果在严格模式下,就绑定到 undefined,否则绑定到全局对象。
箭头函数中的 this
箭头函数 是根据其声明的地方来决定 this 的,它是 ES6 的知识点。
箭头函数的 this 绑定是无法通过 call、apply、bind 被修改的,且因为箭头函数没有构造函数 constructor,所以也不可以使用 new 调用,即不能作为构造函数,否则会报错。
var a = 'hello'var obj = { a: 'world', foo: () => { console.log(this.a) },}obj.foo() // 浏览器中输出: "hello"
复制代码
我们可以看看 ECMAScript 标准中对箭头函数的描述。
原文:
An Arrow Function does not define local bindings for arguments, super, this, or new.target. Any reference to arguments, super, this, or new.target within an ArrowFunction must resolve to a binding in a lexically enclosing environment. Typically this will be the Function Environment of an immediately enclosing function.