this的在什么时候确定下来的
- this和作用域不一样,作用域是声明的时候就定下来了,this是在调用的时候才确定下来
this的绑定方式有5种
-
1.默认绑定
默认绑定一般发生在回调函数,函数直接调用;
function test() {
console.log(this); //window 或 严格模式下是undefined
}
setTimeout(function () {
console.log(this);
//window setTimeout比较奇怪,默认绑定严格模式下竟然不是undefined
});
arr.forEach(function(){
console.log(this);//window 或严格模式下是undefined
});
-
2.隐式绑定
这个通俗点用一句话概括就是谁调用就是指向谁
const obj = {
name:'joy',
getName(){
console.log(this); //obj
console.log(this.name); //joy
}
};
obj.getName();
还有一些情况,链式调用,看最后那个
const obj1 = {
name:'joy',
getName(){
console.log(this); //obj
console.log(this.name); //joy
}
};
const obj2 = {
name:'sam',
friend:obj1
};
const obj3 = {
name: 'jam',
friend:obj2
};
obj3.friend.friend.getName() //obj joy本质上还是obj1调用的
const obj1 = {
name:'joy',
getName(){
console.log(this);
console.log(this.name);
}
};
const obj2 = {
name:'sam',
getName:obj1.getName
};
obj2.getName() //obj2 sam
-
3.显示绑定call,apply,bind
const obj1 = {
name:'joy',
getName(){
console.log(this); //obj
console.log(this.name); //joy
}
};
const obj2 = {
name:'sam'
};
obj1.getName.call(obj2); //obj2 sam
obj1.getName.apply(obj2); //obj2 sam
const fn = obj1.getName.bind(obj2);
fn();//obj2 sam
call和apply之间的不同,就是传参的方式不同
fn.apply(this,[1,2]); //不管多少个,都用数组包裹传参
fn.call(this,1,2); //一个个参数列出来传
call,apply和bind的区别
call和apply都是即时调用,绑定既是调用,而bind不是,bind会返回绑定后的函数,自行需要的时候再调用
学习要知其然知其所以然,我们来试试如何自己实现一个call,apply,bind吧
自己实现call,apply,bind
-
new绑定
function Vehicle() {
console.log(this);
}
Vehicle(); //window
new Vehicle(); //Vehicle这个new出来的对象
-
es6的箭头函数
window.name = 'win';
const obj1 = {
name: 'joy',
getName: () => {
console.log(this); //window 调用前this是什么函数里面的this就是什么
console.log(this.name); //win
}
};
obj1.getName();
以上就是this指向5种绑定的方式,那么问题来了,当同时拥有几种绑定方式,谁的优先级更高呢?
箭头函数 > new > 显式 > 隐式 > 默认绑定
具体可以自行去尝试一下,这里就先给出结论
