JS中的this指针：深入剖析指向的奥秘

2023-11-05 06:44:07

this 指针的指向规则

在 JavaScript 中，this 指针的指向规则主要有以下几点：

在普通函数中，this 指向全局对象（window）。
在构造函数中，this 指向新创建的对象。
在对象的方法中，this 指向该对象本身。
在箭头函数中，this 指向定义箭头函数时所在的作用域的 this 值。
通过 bind、call 和 apply 方法显式绑定 this 指向。

箭头函数中的 this 指针

箭头函数是 JavaScript ES6 中引入的一种新的函数语法，箭头函数没有自己的 this 指针，它继承了定义箭头函数时所在的作用域的 this 值。

以下代码演示了箭头函数中的 this 指针的指向：

const user = {
  name: 'John Doe',
  getName: () => this.name
};

console.log(user.getName()); // undefined

在这个例子中，箭头函数 getName 内部的 this 指向 undefined，因为箭头函数内的 this 指向定义这个箭头函数时作用域内的 this，也就是 User 中的 this，而 User 函数通过 new 绑定，所以 this 实际指向 user 对象。但是，箭头函数没有自己的 this 指针，它继承了定义箭头函数时所在的作用域的 this 值，因此 this 指向 undefined。

通过 bind、call 和 apply 显式绑定 this 指向

在 JavaScript 中，可以使用 bind、call 和 apply 方法显式绑定 this 指向。

bind 方法返回一个新的函数，该函数的 this 值被显式绑定到指定的值。
call 方法立即执行一个函数，并将 this 值显式绑定到指定的值。
apply 方法与 call 方法类似，但它接受一个数组作为第二个参数，该数组包含要作为函数参数传递的值。

以下代码演示了如何使用 bind、call 和 apply 方法显式绑定 this 指向：

const user = {
  name: 'John Doe',
  getName: function() {
    return this.name;
  }
};

const getName = user.getName.bind({ name: 'Jane Doe' });
console.log(getName()); // Jane Doe

user.getName.call({ name: 'Jane Doe' });
console.log(getName()); // Jane Doe

user.getName.apply({ name: 'Jane Doe' });
console.log(getName()); // Jane Doe