前端挑战！修改this指向的编程谜题之七

2023-09-13 10:36:17

前端入门之旅，从编程挑战开始！在本文中，我们共同面对前端学习中的第七道难题——修改this指向。准备好迎接挑战了吗？让我们携手探索JavaScript的奇妙世界，一步步攻克难关！

挑战内容

修改this指向，使函数内部的this指向调用函数的对象。

解决方案

箭头函数：
- 箭头函数内部的this永远指向定义时所在的作用域。
- 以下代码为例：

const person = {
  name: "John Doe",
  greet: () => {
    console.log(`Hello, my name is ${this.name}`);
  },
};

person.greet(); // TypeError: Cannot read property 'name' of undefined

由于箭头函数内部的this指向定义时所在的作用域，即window对象，因此this.name无法访问到person对象的name属性，从而导致错误。

绑定：
- bind()方法可以将函数绑定到指定的对象，使函数内部的this指向该对象。
- 以下代码为例：

const person = {
  name: "John Doe",
  greet: function () {
    console.log(`Hello, my name is ${this.name}`);
  },
};

const boundGreet = person.greet.bind(person);

boundGreet(); // "Hello, my name is John Doe"

使用bind()方法将greet函数绑定到person对象，使内部的this指向person对象，从而成功访问到name属性并输出结果。

作用域：
- 函数内部的this指向取决于函数的调用方式。
- 以下代码为例：

const person = {
  name: "John Doe",
  greet() {
    console.log(`Hello, my name is ${this.name}`);
  },
};

function outer() {
  person.greet();
}

outer(); // "Hello, my name is John Doe"