JavaScript this解析

125 阅读2分钟

this解析

this对象指的是函数所在调用位置绑定的对象

绑定this对象有四种方式:

  • 默认绑定,即直接使用函数,非严格模式,会绑定全局对象,否则严格模式会绑定undefined,在回调函数或者内置函数中直接使用,也是如此。

image.png

  • 隐式绑定,即一个对象中包含的一个属性指向函数,在调用的时候通过对象.属性名来调用,那么当前函数的this指向该对象。

image.png

无论包装了多层对象,函数的this总是指向函数上一层或者最后一层对象。

但是隐式绑定,会有绑定this丢失问题,也就是隐式丢失。例如

image.png

在赋值过程中,foo的调用使用了默认绑定规则,因此,非严格模式下,this指向全局对象,否则执行undefined

  • 显示绑定。即使用apply()或者call()方法将this显示的指定。但是并不会解决绑定this丢失问题。解决该问题使用的是显式绑定中的硬绑定。

硬绑定原理是将this的绑定包装到一个函数中,每次调用这个函数,都会显示绑定this,从而达到只要调用this就会绑定。js内置了bind()方法,供硬绑定使用

  • new 绑定

在其他函数中,new 只能用于构造函数前,但是js的构造函数,也可以说是一个普通函数。

new执行的原理:

创建一个对象,

将对象链接对应的prototype

将这个对象绑定到当前函数的this对象上

如果这个函数未返回任何对象,就将当前创建的这个对象返回去。

所以通过new创建的对象,在执行函数时候,对应this对象为当前实例。

绑定优先级

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

凡是都有例外,如果绑定都不在这4中绑定规则,使用默认绑定,例如,

image.png

这种绑定会导致一些潜在的问题,比如修改全局对象,可以创建一个一个null对象,将其绑定到空对象上,那么以后的this使用都会绑定到空对象中,就不会其他影响了。Object.creat(null)

this在剪头函数的应用

剪头函数的this对象依赖于他所在的词法作用域。

剪头函数继承他所在函数的this绑定。

剪头函数本身的this不能修改,但是可以通过修改他外层函数对应的this指向,进行修改。