博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
《译》 JS里的this
阅读量:6872 次
发布时间:2019-06-26

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

hot3.png

#The this keyword

this 这个关键字在js世界里至关重要,但是如果你不真正了解它的机制是很难正确的使用的

下面我们来看一个例子:

function doSomething() {	this.style.color = '#cc0000';}doSomething();

我们接下来的所有篇幅围绕讨论这么一个问题:这里的this到底指代的是什么?

在JS的世界里,this 总是指的是该函数执行的时候,所拥有这个函数的"所有者", 或者是一个对象(这个函数是这个对象里的一个方法)。

当我们在一个脚本里定义了这个函数 doSomething() 的时候,它的“所有者”就是当前的整个脚本。也就是整个页面,或者说是 window全局对象,如上面,即使它是在哪个a标签里。

好了,现在我们来执行这个doSomething(), 没有任何特别处理, 那么 this 就指的是window对象并且这个函数就试图改变window对象的style.color。由于window对象里没有style.color对象,所以很不幸的它报错了。。。

如果我们想要this指对人,我们就得把它放到正确的“所有者”下面。换句话说,我们就得把这个函数“copy”到onclick的旗下----用事件绑定

element.onclick = doSomething;

这么一来,doSomething 函数就完全被copy到onclick下面了,成为了其一个方法。所以当这个事件触发,this 就指向自己所在对象了,也就是该element,并且颜色就变化了。

我们可以把这个函数绑定到任意多个元素上。this则会指向自己所在的那个元素。

然而,如果你用我们最开始那个例子,行内绑定的话。那么就糟糕了,因为这样做,你并没有copy函数。onclick旗下并不包含实际的函数,只不过是一个函数调用而已:

doSomething();

这个就相当于说“喂,找到doSomething()并执行下它”。 当我们到了doSomething()里this 的时候,又一次的指向了全局window对象,然后接着就报错了。

当事件触发后,如果你想用this 来访问的是html element,那么你得确保 this 是实实在在的写入onclick成员。只有在这种情况下this才指的是html element事件所注册的。

所以,当你这样做:

element.onclick = doSomething;alert(element.onclick)

你会得到:

function doSomething(){	this.style.color = '#cc0000';}

如你所见,this 已经在onclick方法里了。因此 它指向的是HTML element。

但是如果你这样做:

alert(element.onclick)

你这次会得到:

function onclick(){	doSomething()}

这仅仅是函数doSomething()的一个引用,onclick方法里不存在 this,所以 this 并不指的是html 元素

下面的这些都是写进onclick方法的例子:

element.onclick = doSomethingelement.addEventListener('click',doSomething,false)element.onclick = function () {this.style.color = '#cc0000';}

而下面的这些都是this 指的是window对象:

element.onclick = function () {doSomething()}element.attachEvent('onclick',doSomething)

当使用行内事件绑定的时候i,你也可以把this传进函数里,所以你可以这样做:

function doSomething(obj) { // this is present in the event handler and is sent to the function // obj now refers to the HTML element, so we can do obj.style.color = '#cc0000';}

自己看还行,第一次翻译写出来,总觉得很蹩脚。不足之处大家多指点

转载于:https://my.oschina.net/guanyue/blog/341385

你可能感兴趣的文章
Javascript创建对象的7种模式
查看>>
linux 系统端口转发
查看>>
网页实战:关于web导航栏使用分析
查看>>
初识HDFS(10分钟了解HDFS、NameNode和DataNode)
查看>>
windows系统下Python环境的搭建
查看>>
oracle11g下创建只读用户
查看>>
恶意软件如何通过网站感染用户
查看>>
Hadoop实现数据库表关联
查看>>
重温C++的哪些事
查看>>
Windows上的svn仓库迁移(visualSVN)
查看>>
BaseActivity继承FragmentActivity的一个问题
查看>>
CoordinatorLayout + AppBarLayout + ToolBar
查看>>
该死的IE6浏览器兼容问题及部分解决方案(网上整理)
查看>>
使用阿里云人脸检测定位API
查看>>
SVN服务器配置说明
查看>>
艺术感和工程师
查看>>
MySQL 5.6 for Windows 解压缩版配置安装
查看>>
Spring Boot 使用Druid
查看>>
彻底搞懂 PHP 变量结构体,多数文章观点不准确
查看>>
用YIIFramework的库开发
查看>>