JS中this的4种绑定规则

原创 年树先生 随笔 前端面试 7244阅读 2018-10-16 18:38:34 举报

原文出自:https://segmentfault.com/a/1190000016678888

this

ES6中的箭头函数采用的是词法作用域。
为什么要使用this:使API设计得更简洁且易于复用。
this即不指向自身,也不指向函数的词法作用域。
this的指向只取决于函数的调用方式
image.png
this绑定规则

new > 显示绑定 > 隐式绑定 > 默认绑定
默认绑定

当独立函数调用时,不管是否在调用栈中,this都指向全局对象(浏览器中为window)
严格模式下,不能将全局对象用于默认绑定。

隐式绑定

当函数引用有上下文对象时,隐式绑定规则会把函数调用中的this绑定到这个上下文对象。
对象属性引用链中只有最后一层在调用位置中起作用。
要求:对象内部必须包含一个指向函数的属性,该对象可通过这个属性间接引用函数。

隐式丢失

和回调函数的情况下(参数传递时的隐式赋值)

显式绑定

采用call()和apply(),通过传入一个对象(若为基本类型,会被封装函数转为对象—装箱),将this绑定到该对象。
硬绑定

硬绑定的典型应用是如下的包裹函数:

即将内部函数用apply硬绑定到某个对象,无论怎么调用这个包裹函数,都不会影响内部函数的this。

bind辅助函数如下:

总结:上述包裹函数,想要包裹其他函数,只能一个一个重复写,硬编码的方式导致不能被重用,当某种功能需要多次重复使用时,将其抽象出来,成为函数。

new绑定

任何函数都可能被用作构造函数,当函数被new操作符“构造调用”时,会执行下面操作:

  1. 创建一个新对象(若该函数不是JS内置的,则创建一个新的Object对象);
  2. 将this绑定到这个对象;
  3. 执行构造函数中的代码(为这个新对象添加属性);
  4. 若函数没有返回其他对象,则自动返回这个新对象;若函数有return返回的是非对象,则还是自动返回这个新对象,即覆盖那个非对象。

补充说明

间接引用

箭头函数:不使用这四个this规则,根据词法作用域来决定this。

如下为和箭头函数一样的模式:

评论 ( 0 )
最新评论
暂无评论

赶紧努力消灭 0 回复