JavaScript 中 this 的指向问题

这篇文章中,我们来研究一下this 的指向问题,在 JavaScript 中this 的指向取决于一个方法是如何被调用的,我们可以根据下面几项来判断 this 到底指向什么。

  • 默认情况,this 在 NodeJS 环境里指向 global对象,而在浏览器里,this 指向 window 对象

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

foo();  //prints true on console
console.log(this === window) //Prints true on console.
(function(){
    console.log("Anonymous function invocation");
    console.log(this === window);
})();
// Prints true on console
  • 当一个方法被作为一个对象的一个参数调用时,this 指向此对象
function foo () {
    'use strict';
    console.log("Simple function call")
    console.log(this === window); 
}

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

user.foo()  // Prints false because now “this” refers to user object instead of global object.
let fun1 = user.foo1;
fun1() // Prints true as this method is invoked as a simple function.
  • 当一个方法使用 new 操作符调用,此 this 指向这个新创建的实例

function Person(fn, ln) {
    this.first_name = fn;
    this.last_name = ln;

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

let person = new Person("John", "Reed");
person.displayName();  // Prints Name: John Reed
let person2 = new Person("Paul", "Adams");
person2.displayName();  // Prints Name: Paul Adams
  • 当方法用 call 或者 apply 被调用时,this 指向 call 或 apply 函数的第一个参数
function Person(fn, ln) {
    this.first_name = fn;
    this.last_name = ln;

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

let person = new Person("John", "Reed");
person.displayName(); // Prints Name: John Reed
let person2 = new Person("Paul", "Adams");
person2.displayName(); // Prints Name: Paul Adams

person.displayName.call(person2); // Here we are setting value of this to be person2 object

对学习抱有热情的开发小伙伴欢迎加入 qq群685421881,更欢迎热爱编程的妹子进入,让我们一起学习 并进步吧!

推荐阅读更多精彩内容