前端进阶 -- 一篇文章助你搞定this

程序员Kyrie
110 阅读3分钟

前言

   javaScript中的 this ，因其灵活的指向、复杂的使用场景一直都是面试中的热点。这个概念虽然基础，但是非常重要，也是开发者在进阶的过程中比较头疼的一个知识点。this 指向多变，很多隐藏的 bug 都源于它。同时 this 强大灵活，如果能熟练掌握，会让我们写出的代码有质的飞跃

this 的指向

我们先看看 MDN 对于 this 的介绍：

   与其他语言相比，函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和非严格模式之间也会有一些差别。

   在绝大多数情况下，函数的调用方式决定了 this 的值（运行时绑定）。this 不能在执行期间被赋值，并且在每次函数被调用时 this 的值也可能会不同。ES5 引入了 bind 方法来设置函数的 this 值，而不用考虑函数如何被调用的。ES2015 引入了箭头函数，箭头函数不提供自身的 this 绑定（this 的值将保持为闭合词法上下文的值）。

之前看过一篇文章里面有关于this指向的问题：请用一句话总结 this 的指向，注意只用一句话。
之前有一种广泛流传的说法是：谁调用它，this 就指向谁。

当我看完这篇文章作者对于 this 的总结，让我学习到了关于 this 的一个更好的结论，接下来我分享给大家：

   事实上，调用函数会创建新的属于函数自身的执行上下文，执行上下文的调用创建阶段会决定 this 的指向。
   我们可以得到一个新的结论：
   this 的指向，是在调用函数时根据执行上下文所动态确定的。
   具体环节和规则，可以先“死记硬背”以下几条规律，后面再慢慢一一分析：
     1.在函数体内。简单调用该函数时（非显示/隐式绑定下），严格模式下 this 绑定到undefined，否则绑定到全局对象 window/global；
     2.一般构造函数 new 调用，绑定到新创建的对象上；
     3.一般有 call/apply/bind 方法显式调用，绑定到指定参数的对象上；
     4.一般有上下文调用，绑定在该对象上；
     5.箭头函数，根据外层上下文绑定的this决定this的指向

实战例题分析

例题1：全局环境下的 this

函数在浏览器全局环境中被简单调用，非严格模式下 this 指向 window；在 use strict 指明严格模式的 情况下就是 undefined

 function f1 () {
   console.log(this)
}
function f2 () {
   'use strict'
   console.log(this)
}
f1() // window
f2() // undefined

例题2：上下文对象调用中的 this

this 指向最后调用它的对象

const student = {
    name: 'Lucas',
    fn: function() {
        return this
    }
}
console.log(student.fn() === student)  // true

例题3：bind/call/apply 改变 this 指向

bind/call/apply 都是用来改变相关函数 this 指向的，但是 call/apply 是直接进行相关函数调用；bind 不会执行相关函数，而是返回一个新的函数，这个新的函数已经自动绑定了新的 this 指向，开发者需要手动调用即可。

const target = {}
fn.call(target, 'arg1', 'arg2')

相当于

const target = {}
fn.apply(target, ['arg1', 'arg2'])

相当于

const target = {}
fn.bind(target, 'arg1', 'arg2')()

例题4：构造函数和 this

一般构造函数 new 调用，绑定到新创建的对象上

function Foo() {
    this.bar = "Lucas"
}
const instance = new Foo()
console.log(instance.bar)  // Lucas

例题5：箭头函数中的this指向

箭头函数的 this，根据外层(函数或者全局)上下文绑定的this决定this的指向

var globalObject = this;
var foo = () => this;
console.log(foo() === globalObject); //true

总结

javaScript 中的 this 纷繁多象，不容易彻底掌握。只有“记死”，才能“活用”。阅读本文，如有解释不当之处，请大家给予纠正。让我们一起进步。

avatar
文章
阅读
粉丝