前端面试必问之彻底搞懂this指向

this是JavaScript中的一个关键字,但它的使用相比较其他的关键字更复杂。
this会在执行上下文中绑定一个对象,在不同的执行条件下会绑定不同的对象。
接下来,我们一起来彻底搞定this到底是如何绑定的吧!

一、理解this

1.1 为什么使用this

使用this有什么意义呢?下面的代码中,我们通过对象字面量创建出来一个对象,在对象的几个方法中都使用到了对象中定义的name属性,
不使用this,那么我们的代码会是下面的写法:

let obj = {
   cat: "Tom",
   mouse: 'Jerry',
   hobby: function() {
      alert(`${obj.cat}喜欢追逐${obj.mouse}`);
   },
   eating: function() {
      alert(`${obj.cat}吃${obj.mouse}`);
   }
}

在方法中,使用catmouse的地方都需要通过obj的引用(变量名称)来获取。
但是这样做存在一个很大的弊端:如果我将obj的名称换成了story,那么所有方法中使用obj的地方都换成story.
事实上,在实际开发中,我们都会使用this来进行优化:

let obj = {
   cat: "Tom",
   mouse: 'Jerry',
   hobby: function() {
      alert(`${this.cat}喜欢追逐${this.mouse}`);
   },
   eating: function() {
      alert(`${this.cat}吃${this.mouse}`);
   }
}

通过对比就会发现,this可以让我们更方便的引用对象,易于复用。

1.2 this指向

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容