博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
理解JavaScript中的this
阅读量:6715 次
发布时间:2019-06-25

本文共 2013 字,大约阅读时间需要 6 分钟。

一、结论在前

javascript中的this是一个老生常谈的话题,但不知道是之前那些作者没讲清楚还是我太笨没能理解,始终没能真正理解它,随着自己在项目过程中的大量实践,终于对this比较理解,这里作个总结,也与大家分享一下。

别的文章一来就举例子,我这里首先告诉大家一个结论:

this指向的是调用函数的那个对象。

要是觉得理解了就可以不用看后面的文章了:)

二、经典栗子

var name = "The Window";var object = {    name: "My Object",    getName: function() {        return this.name    }};alert(object.getName());

这是一个所有讲this都会使用的简单而又经典的例子,我们根据一开始的结论----this指向的是调用函数的那个对象,很容易就知道输出结果是My Object,接下来我们将这个经典例子升级。

var name = "The Window";var object = {    name: "My Object",    getName: function() {        return function () {            return this.name        }    }};alert(object.getName()());

请告诉我输出结果是什么。

许多人会说还是My Object,那么你就进入陷阱了。其实这也是JS新手常有的误区,他们总简单地以为this指向this所在的对象,这是错误的!一定要牢记结论this指向的是调用函数的那个对象,这个重要的结论我终于说满三遍。那么我们再来分析上面的代码:

首先我们创建了一个全局变量name,为它赋值"The Window";接下来我们创建了对象object,它有个属性name,属性值"My Object",这个对象还包含一个方法getName(),而这个方法会返回一个匿名函数,而匿名函数又返回this.name

逻辑理清后,我来告诉大家陷阱在哪:

匿名函数执行具有全局性,其this对象通常会指向window

说"通常"就是说有例外,在通过call()apply()改变函数执行环境的情况下,this就会指向其他对象了,这些函数我之后会讲到,这里不做展开。

ok,我们知道了这个陷阱,但这也只是个没用的知识点,有用的是怎么解决这种尴尬的情况。虽然我之前说很多新手会犯总简单地以为this指向this所在的对象这样的错误,但是我们在实际开发中就是想让this有这样的效果,那么我们该怎么做呢?

三、this的绑定

1.var _this=this

这是最基础的绑定this的方式,将this赋值给一个变量,这个变量可以取任何名字,我喜欢取名_this,有些人喜欢取名that,我们再回顾之前升级的例子:

var name = "The Window";var object = {    name: "My Object",    getName: function() {        var _this=this        return function () {            return _this.name        }    }};alert(object.getName()());

2.bind()

稍微高级点的方法是使用bind()函数,这是一个ECMAScript 5.1出来的扩展方法,与call()apply()是"同期生",他们的关系和差别之后我会专门谈。这里依然是之前的例子:

var name = "The Window";var object = {    name: "My Object",    getName: function() {        return function () {            return this.name        }.bind(this)    }};alert(object.getName()());

3.ES6中的()=>

()=>俗称箭头函数,使用它来定义匿名函数,同样可以解决this的绑定问题

var name = "The Window";var object = {    name: "My Object",    getName: function() {        return ()=> {            return this.name        }    }};alert(object.getName()());

这是由于()=>函数体内的this就是定义时所在的对象,而不是执行时所在的对象。

以上,想到再补充吧...

转载地址:http://hqelo.baihongyu.com/

你可能感兴趣的文章
SDNU 1450.报时助手
查看>>
BZOJ 4144 Dijkstra+Kruskal+倍增LCA
查看>>
阻塞与非阻塞,同步与异步
查看>>
HTML段落自动换行的样式设置
查看>>
Android实现左右滑动指引效果
查看>>
html里frame导航框架实现方法
查看>>
shell编程系列5--数学运算
查看>>
在 UWP 应用中创建、使用、调试 App Service (应用服务)
查看>>
Active MQ C#实现
查看>>
C#实现秒表程序
查看>>
P4377 [USACO18OPEN]Talent Show
查看>>
多线程 售票 (同步)
查看>>
cJSON 使用笔记
查看>>
CF1163E Magical Permutation
查看>>
指针与数组区别
查看>>
showModalDialog关闭子窗口,并刷新父窗口
查看>>
我的Java开发学习之旅------>解惑Java进行三目运算时的自动类型转换
查看>>
【我的Android进阶之旅】解决strings.xml格式化占位符错误: Multiple substitutions specified in non-positional format...
查看>>
测试工程师常用的工具
查看>>
【已解决】如图,说我磁盘不够,看到var目录下有的个隐藏文件夹占了46G,不知道怎么删除...
查看>>