this的绑定(四种绑定方式)和 箭头函数 的this
一、this的默认绑定
当一个函数没有明确的调用对象的时候,也就是单纯作为独立函数调用的时候,将对函数的this使用默认绑定:绑定到全局的window对象
例子1:
1
2
3
4
|
function foo(){ console.log( this ===window) } foo(); //true |
重点:迷惑性的例子
1
2
3
4
5
6
7
|
function fn(){ function fn1(){ console.log( this ===window); } fn1(); } fn(); //true |
函数fn1在一个外部函数fn里面声明并且调用了,他的this依然指向window,因为【没有明确的调用对象时,讲对函数的this使用默认绑定:绑定到全局的window对象】
加强版迷惑例子:
1
2
3
4
5
6
7
8
9
|
var obj = { fn: function (){ function innerfn(){ console.log( this ===window); } innerfn(); //独立调用 } } obj.fn(); //true |
这里例子中,obj.fn()调用实际上是用了this的隐式绑定
【总结】凡是函数作为独立函数调用,无论它的位置在哪,它行为表现都和直接在全局环境中调用无异
二、this的隐式绑定
当函数被一个对象所“包含”的时候,我们称函数的this被隐式绑定到这个对象里面,这时候,通过this可以直接访问所绑定的对象里面的其他属性
例子:
1
2
3
4
5
6
7
8
9
10
11
|
var obj = { a:1, fn: function (){ console.log( this ); //obj({a: 1, fn: ƒ}) function fn1(){ console.log( this ); //Window } fn1(); } } obj.fn(); |
结果
对比一下这两个代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//第一段代码 function fn(){ console.log( this .a) } var obj = { a:1, fn:fn } obj.fn(); //1 //第二段代码 var obj = { a:1, fn: function (){ console.log( this .a); console.log( this ); } } obj.fn(); //1 |
fn()函数不回因为定义的位置在obj对象的内部和外部有任何区别,谁调用他谁就是this,所以在这个场景下fn()函数的this就是对象obj
三、this的显式绑定【call()、bind()、apply()】
直接例子
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
|
var name= '小红' ,age=18; var obj = { name: '小黄' , objAge: this .age, myFn: function (){ console.log( this .name + '年龄' + this .age); } } var db = { name: '小蓝' , age:24 } obj.myFn.call(db); obj.myFn.apply(db); obj.myFn.bind(db)(); |
结果
结论:bind 返回的是一个新的函数,你必须调用它才会被执行
多个传参情况下
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
var name= '小红' ,age=18; var obj = { name: '小黄' , objAge: this .age, myFn: function (fm,t){ console.log( this .name + '年龄' + this .age , '来自' + fm + '去往' + t); } } var db = { name: '小蓝' , age:24 } obj.myFn.call(db, '广州' , '上海' ); obj.myFn.apply(db,[ '广州' , '上海' ]); obj.myFn.bind(db, '广州' , '上海' )(); obj.myFn.bind(db,[ '广州' , '上海' ])(); |
结果
总结
call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:
call的参数是直接放进去的,第二第三第n个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,'成都', ... ,'string' );
apply的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ]);
bind除了返回是函数以外,它 的参数和call 一样。
四、new绑定
执行new操作的时候,将创建一个新的对象,并且将构造函数的this指向所创建的新对象
五、箭头函数的this
箭头函数是没有this的,箭头函数中的this只取决于包裹箭头函数的第一个普通函数的this。
PS:以上是参考了其他博主的自己做的笔记而已