结论：函数中this总是指向调用它的对象（箭头函数除外、特殊情况除外）。
- 对象字面量。
var name = "win"
var p = {
name: "p",
fn1: function() {
console.log(this.name);
return function() {
console.log(this.name);
}
},
fn2: function() {
console.log(this.name);
return () => {
console.log(this.name);
}
},
fn3: () => {
console.log(this.name);
return () => {
console.log(this.name);
}
}
};
p.fn1()() // p win
p.fn2()() // p p
p.fn3()() // win win
箭头函数内的this向上指向，直到遇上非箭头函数内this，此处可理解为css中绝对定位向上查找父级。
-
call改变this指向。
var name = "win"
var p = {
name: "p",
fn1: function() {
console.log(this.name);
return function() {
console.log(this.name);
}
},
fn2: function() {
console.log(this.name);
return () => {
console.log(this.name);
}
},
fn3: () => {
console.log(this.name);
return () => {
console.log(this.name);
}
}
};
var p2 = { name: "p2" };
p.fn1.call(p2)(); // p2 win
p.fn1().call(p2); // p p2
p.fn2.call(p2)(); // p2 p2
p.fn2().call(p2); // p p
p.fn3.call(p2)(); // win win
p.fn3().call(p2); // win win
call对箭头函数内的this是无效的，但可通过改变其向上指向的this(其父级)来改变。
- 构造函数。
var name = "win";
var P = function(name) {
this.name = name;
this.fn = () => {
console.log(this.name);
};
this.fn2 = function() {
console.log(this.name);
return () => {
console.log(this.name);
};
}
};
P.prototype = {
fn3: () => {
console.log(this.name);
}
};
var p = new P("p");
p.fn(); // p
p.fn2()(); // p p
p.fn3(); // win
- 在构造函数内，即使使用箭头函数，其内
this也指向正确。 - 原型上使用箭头函数会导致
this指向错误。
- 复合例子。
var name = "win"
var p = {
name: "p",
o: {
name: "o",
fn: function() {
console.log(this.name);
return () => {
console.log(this.name);
}
},
fn2: () => {
console.log(this.name);
return () => {
console.log(this.name);
}
},
fn3: () => {
console.log(this.name);
return function() {
console.log(this.name);
}
}
}
};
p.o.fn()(); // o o
p.o.fn2()(); // win win
p.o.fn3()(); // win win
p.o.fn.call(p)(); // p p
p.o.fn2.call(p)(); // win win
p.o.fn3.call(p)(); // win win
p.o.fn().call(p); // o o
p.o.fn2().call(p); // win win
p.o.fn3().call(p); // win o
- 特殊情况。
var name = "win";
var p = {
name: "p",
fn: function() {
console.log(this.name);
return () => {
console.log(this.name);
}
}
}
function fn(f) {
f && f()
}
fn(p.fn) // win
fn(p.fn.bind(p)) // p
// fn(p.fn)可看作如下转化
var fn2 = p.fn;
fn(fn2);
// 值得注意的是箭头函数this指向的是该函数定义时确定的this，与调用它时的对象无关
fn(p.fn()); // p p
总结：
- 箭头函数通俗的理解为其父级this指向，定义时。
- 一般函数this指向调用其的对象。
- 函数被当作其他函数参数时，应理解为有中间变量将函数独立出来，以函数的归属对象无关。
网友评论