👨 作者简介：大家好，我是Taro，前端领域创作者
?? 个人主页：唐璜Taro
🚀 支持我：点赞👍+📝 评论 + ??收藏
前言
在常见的面向对象的编程语言中，比如Java、C++中，this通常只会出现在类的方法中。
在类中的方法中，this代表了当前的调用对象，但是 Javascript 中的 this 要比其他语言更加的灵活
一、this 解决了什么问题？
我们通过下面的代码，看一下 this 的出现究竟解决了什么问题
二、this的出现
代码如下（示例）：
var obj = {
name:'猪八戒',
age:18,
eat:function(){
console.log('我叫'+ obj.name + '我喜欢吃')
}
}
- 如果我们想在
eat方法中，想要获取到 name 名称，就必须通过obj.name来获取。 - 但是这样做有一个很大的弊端：如果把
obj的名称换成info，那么所有的方法中的obj都需要换成info，如果只有一个方法，可能感觉还可以接受。那如果100呢，也是一个个进行替换吗？
此时，为了解决这种 痛点，this 就出现了。正如上面讲到那样，用 this代表当前的调用对象
var obj = {
name:'猪八戒',
age:18,
eat:function(){
console.log('我叫'+ this.name + '我喜欢吃')
}
}
此时，无论你的 obj 再怎么变化，也无需关注方法内部的变量引用了。这也只是应用this的一个场景而已，大概介绍了 this 出现的背景。
1. this的指向
我们先说一个最简单的，this在全局作用域下的指向
在浏览器中的 最大的对象就是：window，所以毫无疑问，在全局作用域下，我们可以认为 this 就是指向的 window
不过在日常的开发中，this通常都在函数中使用
- 一个函数在不同的调用方式下，它会产生不同的指向结果
// 定义一个函数
function foo() {
console.log(this);
}
// 1.调用方式一: 直接调用
foo(); // window
// 2.调用方式二: 将foo放到一个对象中,再调用
var obj = {
name: "猪八戒",
foo: foo
}
obj.foo() // obj对象
// 3.调用方式三: 通过call/apply调用
foo.call("abc"); // String {"abc"}对象
可以得到：
- this是在运行时被绑定的
- this的绑定和调用方式以及调用的位置有关系
2. ES6中的this的指向
箭头函数中不绑定this，是根据外层作用域来决定this的指向
- 使用setTimeout来模拟网络请求，看如何将请求到数据存放到data中
setTimeout 使用箭头函数：
var obj = {
data: [],
getData: function() {
setTimeout(() => {
// 模拟获取到的数据
console.log(this)
}, 1000);
}
}
obj.getData();
打印结果：指向obj
setTimeout 使用箭头函数：
var obj = {
data: [],
getData: function() {
setTimeout(() => {
// 模拟获取到的数据
var res = ["abc", "cba", "nba"];
this.data.push(...res);
}, 1000);
}
}
obj.getData();
getData 为箭头函数，setTimeout 为箭头函数：
var obj = {
data: [],
getData:()=>{
setTimeout(() => {
// 模拟获取到的数据
console.log(this)
}, 1000);
}
}
obj.getData();
此时的 this指向 window，因为 箭头函数中不绑定this
不断的从上层作用域找，那么找到了全局作用域；
总结
以上就是今天要讲的内容，本文仅仅简单介绍了this的指向，this可以让我们更加便捷的方式来引用对象，在进行一些API设计时，代码更加的简洁和易于复用。