深入浅出js中的this
this应当如何确定!
说到这个,就不得不说JS中this的绑定额;JS中有五种绑定模式及一种特殊绑定模式【ES6的箭头函数】
1.默认绑定
默认绑定的this值取决于严格模式和非严格模式;1
2
3
4
5
6
7
8
9
10
11
12
13
14
15var a = 10086;
//在非严格模式中,单纯的函数调用的上下文年默认是指向window;所以this之下window
function test1(){
console.log(this.a);
}
test1(); //结果集:10086
//而在严格模式中,this不指向window,只会绑定到undefined,
function test2(){
"use strict"
console.log(this.a);
}
test2();//抛出异常,值为undefined
2.new绑定
1 | //这个this绑定比较好理解,new 谁对象this指向new的对象 |
3.显式绑定(硬绑定) – call , apply , bind
call和apply的区域在于传参的方式不同,但是作用基本一致
bind是es5的绑定方法,绑定后this无法改变,上面亦是如此
1 | //因为call传入是obj,所以上下文this绑定于obj |
4.隐式绑定
隐式绑定是要看是否有上下文对象,调用的时候是否给某个对象拥有或者包含;则该this绑定到该对象中。
1 |
|
5.软绑定
(函数模拟的)–软绑定 是相对原生 bind 而言一个更灵活的绑定 this 的功能。bind 有一个弊端:被绑定后的新函数无法再更改 this
6.箭头函数
这里说下this和箭头函数的一些要点:
- 箭头函数的this绑定是根据外层作用域来决定
- 箭头函数绑定this无法修改,call,apply,bind等都无法修改他
- 特别适合用于回调函数等这些,避免了var self = this这种写法
总结
若是把undefined,null作为this绑定对象参数传入call,apply,bind,会采用默认绑定规则,而参数依旧传入;比如你有一个数组想要依次分割传入一个函数中,apply就可以做到;在未来ES7 中,有一个关于 bind 语法 的提议,提议将:: 作为一个新的绑定操作符,该操作符会将左值和右值(一个函数)进行绑定;若是能开展,this在一些情况下都可以不用写了