精解 ES6 this指向

原创已于 2024-05-29 15:11:08 修改 · 472 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#es6 #javascript #前端

于 2023-12-25 10:42:26 首次发布

ES6中的this指向：在ES6中，函数的this指向是动态的，取决于函数的调用方式。例如：

class Person {
  constructor(name) {
    this.name = name;
  }
  
  sayHello() {
    console.log(`Hello, my name is ${this.name}`);
  }
}

const person = new Person('Alice');
person.sayHello(); // 输出：Hello, my name is Alice

const sayHello = person.sayHello;
sayHello(); // 输出：Hello, my name is undefined

在上面的例子中，当我们调用person.sayHello()时，sayHello方法中的this指向的是person对象，因此可以正确输出name属性的值。然而，当我们将sayHello方法赋值给一个变量并调用时，this指向就变成了全局对象（在浏览器中为window对象），因此输出了undefined。

全局作用域中的this指向：在全局作用域中，this指向全局对象（在浏览器中为window对象）。例如：

console.log(this === window); // 输出：true

function sayHello() {
  console.log(`Hello, my name is ${this.name}`);
}

sayHello(); // 输出：Hello, my name is undefined

在上面的例子中，this === window的值为true，说明this指向了全局对象。当我们在全局作用域中调用sayHello函数时，this指向的是全局对象，因此输出了undefined。

一般函数（非箭头函数）中的this指向：一般函数中的this指向在函数被调用时确定，取决于函数的调用方式。例如：

function sayHello() {
  console.log(`Hello, my name is ${this.name}`);
}

const person = {
  name: 'Bob',
  sayHello: sayHello
};

const anotherPerson = {
  name: 'Charlie'
};

person.sayHello(); // 输出：Hello, my name is Bob
sayHello.call(anotherPerson); // 输出：Hello, my name is Charlie

在上面的例子中，当我们使用对象的方法调用sayHello函数时，this指向的是调用该方法的对象（即person对象）。当我们使用call方法将this绑定到anotherPerson对象时，this指向的是anotherPerson对象。

箭头函数中this指向：箭头函数中的this指向在函数定义时就确定了，使用的是函数所在上下文中的this。例如：

const sayHello = () => {
  console.log(`Hello, my name is ${this.name}`);
};

const person = {
  name: 'Alice',
  sayHello: sayHello
};

person.sayHello(); // 输出：Hello, my name is undefined

在上面的例子中，箭头函数sayHello中的this指向的是函数定义时所在的上下文，即全局作用域。因此，输出了undefined。

🐱 个人主页：TechCodeAI启航，公众号：SHOW科技

🙋‍♂️ 作者简介：2020参加工作，专注于前端各领域技术，共同学习共同进步，一起加油呀！

💫 优质专栏：前端主流技术分享

📢 资料领取：前端进阶资料可以找我免费领取

🔥 摸鱼学习交流：我们的宗旨是在「工作中摸鱼，摸鱼中进步」，期待大佬一起来摸鱼！