以this的使用场景进行分类:
1.普通函数下,this 的指向
2.构造函数下,this 的指向
3.箭头函数下,this 的指向
普通函数下,this的指向
(1)函数的定义位置不影响其this指向,this指向只和调用函数的对象有关。
(2)多层嵌套的对象,内部方法的this指向离被调用函数最近的对象(window也是对象,其内部对象调用方法的this指向内部对象, 而非window)。
(3)setTimeout & setInterval 对于延时函数内部的回调函数的this指向全局对象window
//时延函数的普通写法下的this指向
function Person() {
this.age = 0;
setTimeout(function() {
console.log(this);
}, 3000);
}
var p = new Person();//3秒后返回 window 对象
构造函数下,this 的指向
(1)构造函数中的this与被创建的新对象绑定。
箭头函数下,this 的指向
(1)箭头函数不绑定this, 它会捕获其所在(即定义的位置)上下文的this值, 作为自己的this值
function Person() {
this.age = 0;
setInterval(() => {
// 回调里面的 `this` 变量就指向了期望的那个对象了
this.age++;
}, 3000);
}
var p = new Person(); //三秒之后age变为1
var adder = {
base : 1,
add : function(a) {
var f = v => v + this.base;
return f(a);
},
addThruCall: function inFun(a) {
var f = v => v + this.base;
var b = {
base : 2
};
return f.call(b, a);
}
};
console.log(adder.add(1)); // 输出 2
console.log(adder.addThruCall(1)); // 仍然输出 2(而不是3,因为箭头函数不绑定this,其内部的this并没有因为call() 而改变,其this值仍然为函数inFun的this值,指向对象adder
(2)以上的箭头函数都是在方法内部,总之都是以非方法的方式使用,如果将箭头函数当做一个方法使用会怎样呢?
var obj = {
i: 10,
b: () => console.log(this.i, this),
c: function() {
console.log( this.i, this)
}
}
obj.b(); // undefined window{...}
obj.c(); // 10 Object {...}
作为方法的箭头函数this指向全局window对象,而普通函数则指向调用它的对象 。
ps: 最近遇到的一个小坑:当字符串为空时,split()返回一个包含一个空字符串的数组,而不是一个空数组,如果字符串和分隔符都是空字符串,则返回一个空数组。
网友评论