Ioodu Land

  • 揭秘JavaScript中“神秘”的this关键字

揭秘JavaScript中“神秘”的this关键字

当我开始学习JavaScript时，花了一些时间来理解JavaScript中的this关键字并且能够快速识别this关键字所指向的对象。我发现理解this关键字最困难的事情是，您通常会忘记在您已阅读或观看过一些JavaScript课程或资源中解释的不同案例情况。在ES6中引入箭头函数后，事情变得更加混乱，因为箭头函数this以不同的方式处理关键字。我想写这篇文章来陈述我学到的东西，并尝试以一种可以帮助任何正在学习JavaScript并且难以理解this关键字的人的方式来解释它。

您可能知道，执行任何JavaScript行的环境（或scope）称为“执行上下文”。Javascript运行时维护这些执行上下文的堆栈，并且当前正在执行存在于该堆栈顶部的执行上下文。this变量引用的对象每次更改执行上下文时都会更改。

默认情况下，执行上下文是全局的，这意味着如果代码作为简单函数调用的一部分执行，则该this变量将引用全局对象。在浏览器的情况下，全局对象是window对象。例如，在Node.js环境中，this值是一个特殊对象global。

例如，尝试以下简单的函数调用：

function foo () {
  console.log("Simple function call");
  console.log(this === window);
}
foo();

调用foo()，得到输出：

“Simple function call”
true

证明这里的this指向全局对象，此例中为window。

注意，如果实在严格模式下，this的值将是undefined，因为在严格模式下全局对象指向undefined而不是window。

试一下如下示例：

function foo () {
  'use strict';
  console.log("Simple function call");
  console.log(this === window);
}
foo();

输出：

“Simple function call”
false

我们再来试下有构造函数的：

function Person(first_name, last_name) {
    this.first_name = first_name;
    this.last_name = last_name;
  
    this.displayName = function() {
        console.log(`Name: ${this.first_name} ${this.last_name}`);
    };
}

创建Person实例：

let john = new Person('John', 'Reid');
john.displayName();

得到结果：

"Name: John Reid"

这里发生了什么？当我们调用 new Person，JavaScript会在Person函数内创建一个新对象并把它保存为this。接着，first_name, last_name 和 displayName 属性会被添加到新创建的this对象上。如下：

你会注意到在Person的执行上下文中创建了this对象，这个对象有first_name, last_name 和 displayName 属性。希望您能根据上图理解this对象是如何创建并添加属性的。

我们已经探讨了两种相关this绑定的普通案例我不得不提出下面这个更加困惑的例子，如下函数：

function simpleFunction () {
    console.log("Simple function call")
    console.log(this === window); 
}

我们已经知道如果像下面这样作为简单函数调用，this关键字将指向全局对象，此例中为window对象。

simpleFunction()

因此，得到输出：

“Simple function call”
true

创建一个简单的user对象：

let user = {
    count: 10,
    simpleFunction: simpleFunction,
    anotherFunction: function() {
        console.log(this === window);
    }
}

现在，我们有一个simpleFunction属性指向simpleFunction函数，同样添加另一个属性调用anotherFunction函数方法。

如果调用user.simpleFunction()，得到输出：

“Simple function call”
false

为什么会这样呢？因为simpleFunction()现在是user对象的一个属性，所以this指向这个user对象而不是全局对象。

当我们调用user.anotherFunction，也是一样的结果。this关键字指向user对象。所以，console.log(this === window);应该返回false:

false

再来，以下操作会返回什么呢？

let myFunction = user.anotherFunction;
myFunction();

现在，得到结果：

true

所以这又发生了什么？在这个例子中，我们发起普通函数调用。正如之前所知，如果一个方法以普通函数方式执行，那么this关键字将指向全局对象（在这个例子中是window对象）。所以console.log(this === window);输出true。

再看一个例子：

var john = {
    name: 'john',
    yearOfBirth: 1990,
    calculateAge: function() {
        console.log(this);
        console.log(2016 - this.yearOfBirth);
        function innerFunction() {
            console.log(this);
        }
        innerFunction();
    }
}

调用john.calculateAge()会发生什么呢？

{name: "john", yearOfBirth: 1990, calculateAge: ƒ}
26
Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}

calculateAge函数内部， this 指向 john对象，但是，在innerFunction函数内部，this指向全局对象（本例中为window），有些人认为这是JS的bug，但是规则告诉我们无论何时一个普通函数被调用时，那么this将指向全局对象。

...

我所学的JavaScript函数也是一种特殊的对象，每个函数都有call, apply, bind方法。这些方法被用来设置函数的执行上下文的this值。

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.displayName = function() {
        console.log(`Name: ${this.firstName} ${this.lastName}`);
    }
}

创建两个实例：

let person = new Person("John", "Reed");
let person2 = new Person("Paul", "Adams");

调用：

person.displayName();
person2.displayName();

结果：

Name: John Reed
Name: Paul Adams

call：

person.displayName.call(person2);

上面所做的事情就是设置this的值为person2对象。因此，

Name: Paul Adams

apply：

person.displayName.apply([person2]);

得到：

Name: Paul Adams

call，apply唯一的区别就是参数的传递形式，apply应该传递一个数组，call则应该单独传递参数。

我们用bind来做同样的事情，bind返回一个新的方法，这个方法中的this指向传递的第一个参数。

let person2Display = person.displayName.bind(person2);

调用person2Display，得到Name: Paul Adams结果。

...

箭头函数

ES6中，有一个新方法定义函数。如下：

let displayName = (firstName, lastName) => {
    console.log(Name: ${firstName} ${lastName});
};

不像通常的函数，箭头函数没有他们自身的this关键字。他们只是简单的使用写在函数里的this关键字。他们有一个this词法变量。

ES5：

var box = {
    color: 'green', // 1
    position: 1, // 2
    clickMe: function() { // 3
        document.querySelector('body').addEventListener('click', function() {
            var str = 'This is box number ' + this.position + ' and it is ' + this.color; // 4
            alert(str);
        });
    }
}

如果调用：

box.clickMe()

弹出框内容将是This is box number undefined and it is undefined'.

我们一步一步来分析是怎么回事。在//1和//2行，this关键字能访问到color和position属性因为它指向box对象。在clickMe方法内部，this关键字能访问到color和position属性因为它也指向box对象。但是，clickMe方法为querySelector方法定义了一个回调函数，然后这个回调函数以普通函数的形式调用，所以this指向全局对象而非box对象。当然，全局对象没有定义color和position属性，所以这就是为什么我们得到了undefined值。

我们可以用ES5的方法来修复这个问题：

var box = {
    color: 'green',
    position: 1,
    clickMe: function() {
        var self = this;
        document.querySelector('body').addEventListener('click', function() {
            var str = 'This is box number ' + self.position + ' and it is ' + self.color;
            alert(str);
        });
    }
}

添加 var self = this，创建了一个可以使用指向box对象的this关键字的闭包函数的工作区。我们仅仅只需要在回调函数内使用self变量。

调用：

box.clickMe();

弹出框内容This is box number 1 and it is green。

怎么使用箭头函数能够达到上述效果呢？我们将用箭头函数替换点击函数的回调函数。

var box = {
    color: 'green',
    position: 1,
    clickMe: function() {
        document.querySelector('body').addEventListener('click', () => {
            var str = 'This is box number ' + this.position + ' and it is ' + this.color;
            alert(str);
        });
    }
}

箭头函数的神奇之处就是共享包裹它的this词法关键字。所以，本例中外层函数的this共享给箭头函数，这个外层函数的this关键字指向box对象，因此，color和position属性将是有正确的green和1值。

再来一个：

var box = {
    color: 'green',
    position: 1,
    clickMe: () => {
        document.querySelector('body').addEventListener('click', () => {
            var str = 'This is box number ' + this.position + ' and it is ' + this.color;
            alert(str);
        });
    }
}

oh！现在又弹出了‘This is box number undefined and it is undefined’.。为什么？

click事件监听函数闭包的this关键字共享了包裹它的this关键字。在本例中它被包裹的箭头函数clickMe，clickMe箭头函数的this关键字指向全局对象，本例中是window对象。所以this.color和this.position将会是undefined因为window对象没有position和color属性。

我想再给你看个在很多情况下都会有帮助的map函数，我们定义一个Person构造函数方法如下：

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;
    this.displayName = function() {
        console.log(`Name: ${this.firstName} ${this.lastName}`);
    }
}

Person的原型上添加myFriends方法：

Person.prototype.myFriends = function(friends) {
    var arr = friends.map(function(friend) {
        return this.firstName + ' is friends with ' + friend;
    });
    console.log(arr);
}

创建一个实例：

let john = new Person("John", "Watson");

调用john.myFriends(["Emma", "Tom"])，结果：

["undefined is friends with Emma", "undefined is friends with Tom"]

本例与之前的例子非常相似。myFriends函数体内有this关键字指向回调对象。但是，map闭包函数内是一个普通函数调用。所以map闭包函数内this指向全局对象，本例中为window对象，因此this.firstNameundefined。现在，我们试着修复这个情况。

  1. 在myFriends函数体内指定this为其它变量如self，以便map函数内闭包使用它。
Person.prototype.myFriends = function(friends) {
    // 'this' keyword maps to the calling object
    var self = this;
    var arr = friends.map(function(friend) {
        // 'this' keyword maps to the global object
        // here, 'this.firstName' is undefined.
        return self.firstName + ' is friends with ' + friend;
    });
    console.log(arr);
}
  1. map闭包函数使用bind。
Person.prototype.myFriends = function(friends) {
    // 'this' keyword maps to the calling object
    var arr = friends.map(function(friend) {
        // 'this' keyword maps to the global object
        // here, 'this.firstName' is undefined.
        return this.firstName + ' is friends with ' + friend;
    }.bind(this));
    console.log(arr);
}

调用bind会返回一个map回调函数的副本，this关键字映射到外层的this关键字，也就是是调用myFriends方法，this指向这个对象。

  1. 创建map回调函数为箭头函数。
Person.prototype.myFriends = function(friends) {
    var arr = friends.map(friend => `${this.firstName} is friends with ${friend}`);
    console.log(arr);
}

现在，箭头函数内的this关键字将共享未曾包裹它的词法作用域，也就是说实例myFriends。

所有以上解决方案都将输出结果：

["John is friends with Emma", "John is friends with Tom"]

...

在这一点上，我希望我已经设法使this关键字概念对您来说有点平易近人。在本文中，我分享了我遇到的一些常见情况以及如何处理它们，但当然，在构建更多项目时，您将面临更多情况。我希望我的解释可以帮助您在接近this关键字绑定主题时保持坚实的基础。如果您有任何问题，建议或改进，我总是乐于学习更多知识并与所有知名开发人员交流知识。请随时写评论，或给我留言！

帮助改善页面！
Last Updated: 3/14/2019, 5:46:53 PM