未加星标

JavaScript This 的六道坎

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2017 | 作者 红领巾 ] 0人收藏点击收藏

鉴于 this 风骚的运作方式,对 this 的理解是永不过时的话题,本文试图通过将其大卸六块来钉住这个磨人的妖精。

首先

this is all about context.

this 说白了就是找大佬,找拥有当前上下文(context)的对象(context object)。

大佬可以分为六层,层数越高权力越大, this 只会认最大的。

第一层:世界尽头

权力最小的大佬是作为备胎的存在,在普通情况下就是全局,浏览器里就是 window ;在 use strict 的情况下就是 undefined 。

function showThis () { console.log(this) } function showStrictThis () { 'use strict' console.log(this) } showThis() // window showStrictThis() // undefined 第二层:点石成金

第二层大佬说白了就是找这个函数前面的点 . 。

如果用到 this 的那个函数是属于某个 context object 的,那么这个 context object 绑定到 this 。

比如下面的例子, boss 是 returnThis 的 context object ,或者说 returnThis 属于 boss 。

var boss = { name: 'boss', returnThis () { return this } } boss.returnThis() === boss // true

下面这个例子就要小心点咯,能想出答案么?

var boss1 = { name: 'boss1', returnThis () { return this } } var boss2 = { name: 'boss2', returnThis () { return boss1.returnThis() } } var boss3 = { name: 'boss3', returnThis () { var returnThis = boss1.returnThis return returnThis() } } boss1.returnThis() // boss1 boss2.returnThis() // ? boss3.returnThis() // ?

答案是 boss1 和 window 哦,猜对了吗。

只要看使用 this 的那个函数。

在 boss2.returnThis 里,使用 this 的函数是 boss1.returnThis ,所以 this 绑定到 boss1 ;

在 boss3.returnThis 里,使用 this 的函数是 returnThis ,所以 this 绑定到备胎。

要想把 this 绑定到 boss2 怎么做呢?

var boss1 = { name: 'boss1', returnThis () { return this } } var boss2 = { name: 'boss2', returnThis: boss1.returnThis } boss2.returnThis() //boss2

没错,只要让使用 this 的函数是属于 boss2 就行。

第三层:指腹为婚

第三层大佬是 Object.prototype.call 和 Object.prototype.apply ,它们可以通过参数指定 this 。(注意 this 是不可以直接赋值的哦, this = 2 会报 ReferenceError 。)

function returnThis () { return this } var boss1 = { name: 'boss1' } returnThis() // window returnThis.call(boss1) // boss1 returnThis.apply(boss1) // boss1 第四层:海誓山盟

第四层大佬是 Object.prototype.bind ,他不但通过一个新函数来提供永久的绑定,还会覆盖第三层大佬的命令。

function returnThis () { return this } var boss1 = { name: 'boss1'} var boss1returnThis = returnThis.bind(boss1) boss1returnThis() // boss1 var boss2 = { name: 'boss2' } boss1returnThis.call(boss2) // still boss1 第五层:内有乾坤

一个比较容易忽略的会绑定 this 的地方就是 new 。当我们 new 一个函数时,就会自动把 this 绑定在新对象上,然后再调用这个函数。它会覆盖 bind 的绑定。

function showThis () { console.log(this) } showThis() // window new showThis() // showThis var boss1 = { name: 'boss1' } showThis.call(boss1) // boss1 new showThis.call(boss1) // TypeError var boss1showThis = showThis.bind(boss1) boss1showThis() // boss1 new boss1showThis() // showThis 第六层:军令如山

最后一个法力无边的大佬就是 ES2015 的箭头函数。箭头函数里的 this 不再妖艳,被永远封印到当前词法作用域之中,称作 Lexical this ,在代码运行前就可以确定。没有其他大佬可以覆盖。

这样的好处就是方便让回调函数的 this 使用当前的作用域,不怕引起混淆。

所以对于箭头函数,只要看它在哪里创建的就行。

如果对 V8 实现的词法作用域感兴趣可以看看 这里 。

function callback (cb) { cb() } callback(() => { console.log(this) }) // window var boss1 = { name: 'boss1', callback: callback, callback2 () { callback(() => { console.log(this) }) } } boss1.callback(() => { console.log(this) }) // still window boss1.callback2(() => { console.log(this) }) // boss1

下面这种奇葩的使用方式就需要注意:

var returnThis = () => this returnThis() // window new returnThis() // TypeError var boss1 = { name: 'boss1', returnThis () { var func = () => this return func() } } returnThis.call(boss1) // still window var boss1returnThis = returnThis.bind(boss1) boss1returnThis() // still window boss1.returnThis() // boss1 var boss2 = { name: 'boss2', returnThis: boss1.returnThis } boss2.returnThis() // boss2

如果你不知道最后为什么会是 boss2,继续理解“对于箭头函数,只要看它在哪里创建”这句话。

参考 Mozilla Developer Network Kyle Simpson, this & object prototypes Axel Rauschmayer, Speaking javascript

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: JavaScriptJava浏览器
分页:12
转载请注明
本文标题:JavaScript This 的六道坎
本站链接:http://www.codesec.net/view/531824.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(44)