首页 > 代码库 > javaScript之this全面解析(2)

javaScript之this全面解析(2)

在理解this的绑定过程之前,我们先来理解调用位置(不是声明位置) ,最重要的是要分析调用栈(就是为了到达当前执行位置所调用的所有函数)。

我们关心的调用位置就在当前正在执行的函数的前一个调用中,例:

技术分享

好了,调用位置我们已经找到了,然后我们来看看this绑定的四大规则

第一个规则:默认绑定(独立函数调用),可以把这条规则看做是无法应用其他规则时的默认规则,看代码

技术分享

代码中foo()是直接使用不带有任何修饰的函数引用进行调用的,因此只能使用默认绑定,无法应用其他规则。如果使用严格模式(strict mode),

则不能将全局对象用于默认绑定,因此this会绑定到undefined。

技术分享

第二个规则:隐式绑定  

看代码

技术分享

 

当函数引用有上下文对象时,隐式绑定规则会把函数调用的this绑定到这个上下文对象,因为调用foo时

this被绑定到obj,因此this.a和obj.a是一样的。对象属性引用链中只有上一层或者说最后一层在调用位置起作用

如:

技术分享

隐式丢失:看代码

技术分享

虽然bar是obj.foo的一个引用,但是实际上,它引用的是foo函数本身,因此此时的bar()其实是一个不带任何修饰的函数调用,因此应用了默认绑定。

技术分享

参数传递其实就是一种隐式赋值,所以结果和上面结果一样

 

如果把函数传入语言内置的函数而不是传入你声明的函数,结果是一样的,没有区别

技术分享

 

 第三个规则:显示绑定

说到这里就不得不说call和apply函数了,那么他们是如何工作的呢?

他们的第一个参数是一个对象,是给this准备的,接着在调用函数时将其绑定到this。因为你可以直接指定this的绑定对象,因此称之为显示绑定

看代码:

技术分享

如果你传入了一个原始值(字符串类型、布尔类型或者数字类型)来当做this的绑定对象,这个原始值会被转换成他的

对象形式(也就是new String(...)、new Boolean(...)或者new Number(...))。这通常被称为装箱。

 硬绑定:方法1

技术分享

方法2

技术分享

由于硬绑定是一种非常常用的模式,所以es5提供了内置的方法function.prototype.bind,用法如下

技术分享

规则四:new绑定

使用 new来调用函数,会自动执行以下操作:

1、创建一个全新的对象

2、这个新对象会被执行[[prototype]]连接

3、这个新对象会绑定到函数调用的this

4、如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象

看以下代码,new  this绑定

技术分享

 

javaScript之this全面解析(2)