带你读《现代Javascript高级教程》三、函数上下文和this关键字（2）

带你读《现代Javascript高级教程》三、函数上下文和this关键字（1）https://developer.aliyun.com/article/1349696?groupCode=tech_library

5. 函数调用时使用 call 或 apply

考虑以下脚本：

function greet() {
  return `Hello, ${this.name}!`;}
const person = {
  name: 'Alice'};
console.log(greet.call(person));  // 使用call
console.log(greet.apply(person)); // 使用apply

输出结果：

• 使用 call：Hello, Alice!
  
• 使用 apply：Hello, Alice!
  

解析： 通过使用函数的 call 或 apply 方法，可以显式地指定函数执行时的上下文，即 this 的值。在上述代码中，greet.call(person) 和 greet.apply(person) 中的 this 都被绑定到了 person 对象，所以打印出的结果都是 Hello, Alice!。

6. 箭头函数的上下文

箭头函数的 this 绑定与常规函数不同，箭头函数没有自己的 this 值，而是捕获了封闭上下文的 this 值。考虑以下脚本：

const obj = {
  name: 'Bob',
  greet: function() {
    const arrowFunc = () => {
      return `Hello, ${this.name}!`;
    };
    return arrowFunc();
  }};
console.log(obj.greet());

输出结果：Hello, Bob!

解析： 在这段代码中，箭头函数 arrowFunc 没有自己的 this 值，而是捕获了封闭上下文 greet 函数中的 this 值，即 obj 对象。所以 this.name 实际上指向 obj.name，打印出 Hello, Bob!。

这就是 JavaScript 函数上下文和 this 关键字的一些重要概念和用法。