"this" 是一个关键字,用于表示当前正在执行代码的对象,通常是指调用当前方法或函数的对象。在 JavaScript 中,this 的值在运行时动态确定,取决于函数的调用方式和上下文,因此它可以指向不同的对象。
this 的行为取决于它所在的上下文。在全局作用域中使用 this 时,它会指向全局对象(在浏览器中是 window 对象,在 Node.js 中是 global 对象)。在函数内部使用 this 时,它的值取决于函数的调用方式。如果函数是作为对象的方法调用的,则 this 指向该对象。如果函数作为普通函数调用,则 this 指向全局对象。如果函数使用了 "strict" 模式,则在函数内部默认不会将 this 绑定到全局对象。
除了函数的上下文之外,this 的值还可以通过 JavaScript 的显示绑定方法(call、apply 和 bind)进行更改。这些方法可以显式地指定函数内的 this 值,而不依赖于函数的调用方式和上下文。
this的各种情况
在 JavaScript 中,this 可以指向不同的对象,根据使用场景不同,可以分为以下几种类型:
- 全局对象:当 this 用在全局作用域中时,它将指向全局对象(在浏览器中是 window,Node.js 中是 global)。
- 函数上下文对象:当函数被作为对象的方法调用时,this 将指向该对象。例如:
const obj = {
name: "John",
sayName() {
console.log(this.name);
}
};
obj.sayName(); // 输出 "John"
- 构造函数上下文对象:当函数被用作构造函数时,this 将指向新创建的对象。
function Person(name) {
this.name = name;
}
const person = new Person("John");
console.log(person.name); // 输出 "John"
- 显示绑定对象:通过 call、apply 或 bind 方法,可以显式地指定函数内部的 this 指向特定的对象。
function sayName() {
console.log(this.name);
}
const obj1 = { name: "John" };
const obj2 = { name: "Mary" };
sayName.call(obj1); // 输出 "John"
sayName.apply(obj2); // 输出 "Mary"
const sayNameForObj1 = sayName.bind(obj1);
sayNameForObj1(); // 输出 "John"
- 箭头函数上下文对象:箭头函数没有自己的 this 值,它会从定义它时所处的作用域中继承 this 值。
const obj = {
name: "John",
sayName: () => {
console.log(this.name);
}
};
obj.sayName(); // 输出 undefined
ChatGpt 写了这么多,感觉要是死记硬背的话挺难的,除开箭头函数外,其实改变 this 指向就2种方法,一种是new,一种是使用 call、apply 或 bind 方法改变。那么我们研究一下他们的实现,是不是就能找出this指向的原理呢
function myNew(constructor, ...args) {
const obj = Object.create(constructor.prototype);
const result = constructor.apply(obj, args);
return (typeof result === 'object' && result !== null) ? result : obj;
}
这是 new 的简易实现,可以看出其实就是使用 apply 改变了 this 指向,那 apply 是怎么改变 this 指向的呢
Function.prototype.myApply = function(context, args) {
context = context || window;
context.fn = this;
const result = context.fn(...args);
delete context.fn;
return result;
};
这是 apply 的简易实现,其实改变 this 指向就是在 const result = context.fn(...args)
这一行起了作用,思考一下我们是为了实现将 this 改为 context,
context.fn = this
其实就是把函数挂到 context 上,然后调用函数 context.fn(...args)
这样函数的this就指向了 context。所以就是一句话,谁调用函数,this指向谁。换句话说谁在 .
前,谁是 this 。
练习题
const person1 = {
name: 'Alice',
greet: function() {
const myMethod = function() {
console.log('Hello, ' + this.name);
};
return myMethod;
}
};
person1.greet()(); // 输出什么?如何更改以输出 'Hello, Alice'?
function getName(){
console.log(this.name)
}
getName.bind({name:'a'}).bind({name:'b'})() // 输出什么?为什么?
function Person(name) {
this.name = name;
this.regularFunc = function () {
return this.name;
};
this.arrowFn = () => {
return this.name;
};
this.arrowFn2 = // ?
}
function getNames() {
const names = ["Alice", "Bob", "Charlie"];
const randomName = names[Math.floor(Math.random() * names.length)];
return randomName;
}
const person1 = new Person(getNames());
const person2 = new Person("John");
// 补充 arrowFn2 实现以下效果
console.log(person1.arrowFn() === person1.arrowFn2()); // true
console.log(person1.arrowFn.call(person2) === person1.arrowFn2.call(person2)); // true