箭头函数和普通函数的this指向

目录

前言

一、题目1（基础题）

二、‌题目2（箭头函数对比）

三、题目3（setTimeout中的this）

四、题目4（箭头函数修复this）

五、‌题目5（构造函数中的this）

六、题目6（方法赋值后的this）

总结

---

前言

提示：这里可以添加本文要记录的大概内容：

例如：随着人工智能的不断发展，机器学习这门技术也越来越重要，很多人都开启了学习机器学习，本文就介绍了机器学习的基础内容。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、题目1（基础题）

const obj = {name: 'Alice',sayName: function() {console.log(this.name);}
};
obj.sayName(); // 输出什么？为什么？

 答：输出Alice，普通函数的this由调用者决定，obj.sayName()中obj是调用者，因此this指向obj

二、‌题目2（箭头函数对比）

const obj = {name: 'Bob',sayName: () => {console.log(this.name);}
};
obj.sayName(); // 输出什么？为什么？

 答：输出undefined，箭头函数自身没有this，继承自外层作用域（此处是全局作用域），浏览器中全局this指向window，而window.name未定义

三、题目3（setTimeout中的this）

const obj = {name: 'Charlie',sayName: function() {setTimeout(function() {console.log(this.name);}, 100);}
};
obj.sayName(); // 输出什么？为什么？

答：输出window，setTimeout中普通函数指向window，window.name为undefined 

四、题目4（箭头函数修复this）

const obj = {name: 'David',sayName: function() {setTimeout(() => {console.log(this.name);}, 100);}
};
obj.sayName(); // 输出什么？为什么？

答：输出David，setTimeout中为箭头函数，他的this为外层作用域sayName函数的this指向，而obj调用了sayName，所以指向obj，obj.name为David 

五、‌题目5（构造函数中的this）

function Person(name) {this.name = name;this.sayName = () => {console.log(this.name);};
}
const p = new Person('Eve');
p.sayName(); // 输出什么？为什么？

答：输出Eve，箭头函数this为外层作用域的this指向，此时为Person类，而new Person使得构造函数指向new出来的实例对象，所以为Eve

六、题目6（方法赋值后的this）

const obj = {name: 'Frank',sayName: function() {console.log(this.name);}
};
const fn = obj.sayName;
fn(); // 输出什么？为什么？

答：输出undefined，fn在全局作用域下，所以此时调用函数则this指向window，window.name为undefined 

总结

只需要记住：普通函数是谁调用就指向谁，箭头函数没有自身this，他是根据外层作用域定义时的this指向。