Javascript 中的this指向

👨 作者简介：大家好，我是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设计时，代码更加的简洁和易于复用。