1. this的指向
this是在函数被调用时确定的,它的指向完全取决于函数调用的地方,而不是它被声明的地方(箭头函数除外)。当一个函数被调用时,会创建一个执行上下文,它包含函数在哪里被调用(调用栈)、函数的调用方式、传入的参数等信息,this就是记录这些的一个属性,它会在函数执行的过程中被用到。
this在函数的指向有以下几种场景:
1.作为构造函数被new调用
2.作为对象的方法使用
3.作为函数直接调用
4.被call、apply、bind调用
5.箭头函数中的this
1.1 new绑定
函数如果作为构造函数使用new调用时,this绑定的是新创建的构造函数的实例。
![](https://img.haomeiwen.com/i1698779/448619e99a2674b6.png)
实际上使用new调用构造函数时,会依次执行下面的操作:
1. 创建一个新的对象
2. 构造函数的prototype被赋值给这个新对象的_ _proto_ _
3. 将新对象赋值给当前的this
4. 执行构造函数
5. 如果函数没有返回其他对象,那么new表达式中的函数调用会自动返回这个新对象,如果返回的不是对象将被忽略。
1.2 显示绑定
通过call、apply、bind我们可以修改函数绑定的this,使其成为我们指定的对象。通过这些方法的第一个参数我们可以显示绑定this。
![](https://img.haomeiwen.com/i1698779/6dcfc504b80ffa9e.png)
call和apply的区别是,call方法接收的是参数列表,而apply方法接收的是一个参数数组。
![](https://img.haomeiwen.com/i1698779/7827023b9a566a60.png)
而bind方法是设置this为给定的值,并返回一个新的函数,且在调用新函数时,将给定参数列表作为原函数的参数序列的前若干项。
![](https://img.haomeiwen.com/i1698779/b667bdf3f39a4f9f.png)
注意: 如果你把null或undefined作为this的绑定对象传入call、apply、bind,这些值在调用时会被忽略,实际应用的是默认绑定规则,如:
![](https://img.haomeiwen.com/i1698779/4050ddf39a368ab1.png)
1.3 隐式绑定
函数是否在某个上下文对象中调用,如果是的话this绑定的是那个上下文对象。
![](https://img.haomeiwen.com/i1698779/a589ddf34976c27b.png)
上面代码中,foo方法是作为对象的属性调用的,此时foo方法执行时,this指向obj这个对象,也就是说,此时this指向调用这个方法的对象,如果嵌套了多个对象,那么指向最后一个调用这个方法的对象。
![](https://img.haomeiwen.com/i1698779/5a33da96451208d4.png)
最后一个对象是obj上的b,那么此时foo方法执行时,其中的this指向的就是b对象。
1.4 默认绑定
函数独立调用,直接使用不带任何修饰的函数引用进行调用,也是上面几种绑定途径之外的方式。非严格模式下this绑定到全局对象(浏览器下时window,node环境是global),严格模式下this绑定到undefined(因为严格模式下不允许this指向全局对象)。
![](https://img.haomeiwen.com/i1698779/fad816fff1a3747b.png)
上面代码中,变量a被声明在全局作用域,成为全局对象window的一个同名属性。函数foo被执行时,this此时指向的是全局对象,因此打印出来的a是全局对象的属性。
!注意有一种情况:
![](https://img.haomeiwen.com/i1698779/e937a15b7f63c627.png)
此时的bar函数,也就是obj上的foo方法为什么又指向了全局对象呢,是因为bar方法此时是作为函数独立调用的,所以此时的场景属于默认绑定,而不是隐式绑定。
其实可以把默认绑定当做是隐式绑定的特殊情况,比如上面的bar(),可以当做是使用window.bar()的方式调用的,此时bar中的this根据隐式绑定的情景指向的就是window。
2. this绑定的优先级
优先级:new绑定 > 显示绑定 > 隐式绑定 > 默认绑定
所以this的判断顺序:
1. new绑定:函数是否在new中调用?如果是的话this绑定的是新创建的对象
2. 显示绑定:函数是否通过call、apply、bind调用?如果是的话,this绑定的是指定的对象
3. 隐式绑定:函数是否在某个上下文对象中调用?如果是的话,this绑定的是那个上下文对象
4. 如果都不是的话,使用默认绑定。在严格模式下,就绑定到undefined,否则绑定到全局对象
3. 箭头函数中的this
箭头函数的this绑定是无法通过call、apply、bind被修改的,且因为箭头函数没有构造函数constructor,所以也不可以使用new调用,即不能作为构造函数,否则会报错。
网友评论