脚本宝典收集整理的这篇文章主要介绍了JavaScript 的This绑定方式导图,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
本文是对《加深对 JavaScript This 的理解》一文的导图版翻译
JS中的this是一个捉摸不透的东西,它很喜欢变化,很诡异。拥抱变化,接收诡异,看清this的真面目,这篇来源于《加深对 JavaScript This 的理解》的导图也许有些帮助
首先上张滑稽的图
理解This的绑定方式,可能要先理解下上下文对象、作用域类型
作用域类型
上下文对象
上下文对象也叫运行时环境,是一个在代码运行时的概念,推荐下面这篇文章
参见此链接
关于This的绑定4种规则
1. 默认绑定
2. 隐式绑定
3. 显式绑定
4. new绑定
此外,在ES6中引入的箭头函数,需要注意:
VAR a = 'scoPE';
function ClassA(){
this.a = 'ClassA';
this.do = function(){
setTimeout(function(){
console.LOG(this.a); // 期待的是输出 'ClassA'
});
}
}
var ins = new ClassA();
ins.do(); // 然而却是 : 'scope'
上述代码的运行结果原因在于,setTimeout
里面的回调函数执行时,属于默认绑定规则,因此在非严格模式下,this
指向window
,this.a
也即window.a
,window.a
就是全局变量var a = 'scope'
箭头函数的出现,打破了这种规则:
var a = 'scope';
function ClassA(){
this.a = 'ClassA';
this.do = function(){
setTimeout(() => {
console.log(this.a); // 期待的是输出 'ClassA'
});
}
}
var ins = new ClassA();
ins.do(); // 输出确实是 : 'ClassA'
用function
生成的函数会定义一个自己的this
,而箭头函数没有自己的this
,而是会和上一层的作用域共享this
。箭头函数让this
重新回到静态作用域规则的怀抱。
写在后面 last but not least!!!
this
的几种绑定规则,归根结底,的套路就是:
关于几种模式的等价变换形式,知乎上面有大神解答,猛戳这
最后是全图
附上思维导图的下载链接
以上是脚本宝典为你收集整理的JavaScript 的This绑定方式导图全部内容,希望文章能够帮你解决JavaScript 的This绑定方式导图所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。