JavaScript中的 this
是一个非常重要的概念,它指向当前执行上下文的对象。由于JavaScript是一门动态语言,this
的指向在运行时才能确定,可能会因为调用方式和执行环境的不同而有所变化。
this
的指向可以通过四种调用方式来决定:
- 作为函数调用时,
this
指向全局对象(浏览器中为window
对象,Node.js
中为global
对象)。 - 作为方法调用时,
this
指向调用该方法的对象。 - 使用
call()
或apply()
方法调用时,this
指向第一个参数传入的对象。 - 使用
new
关键字调用构造函数时,this
指向新创建的对象。
除了上述四种方式,还有一些特殊情况需要注意,例如箭头函数中的 this
指向是定义函数时的上下文,不会随着调用环境的改变而改变。
总之,JavaScript中的this
是一个非常灵活和有用的概念,可以根据不同的调用方式来决定其指向,需要开发者在实际开发中灵活应用。
举一个具体的例子,假设有一个对象 person
,它有两个方法 sayHello
和 introduce
:
const person = {
name: "Quintion",
age: 32,
sayHello() {
console.log(`Hello, my name is ${this.name}`);
},
introduce() {
console.log(`I'm ${this.age} years old.`);
},
};
如果以方法调用的方式调用 sayHello()
和introduce()
:
person.sayHello(); // Hello, my name is Quintion
person.introduce(); // I'm 32 years old.
此时 this
分别指向 person
对象,因为这两个方法是在 person
对象中定义的。
如果以函数调用的方式调用 sayHello()
和introduce()
:
const sayHello = person.sayHello;
const introduce = person.introduce;
sayHello(); // Hello, my name is undefined
introduce(); // I'm undefined years old.
此时 this
指向全局对象,因为函数调用是在全局上下文中执行的。由于全局对象并没有 name
和 age
属性,所以输出结果为 undefined
。
如果将上面的函数使用 call()
方法来调用,如下:
const sayHello = person.sayHello;
const introduce = person.introduce;
sayHello.call(person); // Hello, my name is Quintion
introduce.call(person); // I'm 32 years old.
此时 this
指向 person
对象,因为在 call()
方法的第一个参数中传入了 person
对象。
需要注意的是,如果在严格模式下使用函数调用方式,
this
指向的是undefined
,而非全局对象。