无论是工作或者面试中，this指向问题是经常遇到的。所以这篇文章把常见的指向问题列出来给大家，避免踩坑。首先我们要知道，在函数中this到底取何值，是在函数真正被调用执行的时候确定的，函数定义的时候确定不了，也就是说，this的指向完全取决于函数调用的位置。因为this的取值是作用域环境的一部分，每次调用函数，都会在不同的作用域环境。
1：全局环境中
在浏览器环境严格模式中（区别于node），this默认指向window。立即执行函数，默认的定时器等函数，this也是指向window。
console.log(this === window) // true
function fn(){
console.log(this === window)
}
fn() // true
(function(){
console.log(this === window) // true
})()
setTimeout(function() {
console.log(this === window); //true
}, 500)
2：对象函数中
如果函数作为对象的一个属性被调用时，函数中的this指向该对象。
var x = 10 // 相当于 window.x = 10
var obj = {
x: 20,
f: function(){
console.log(this.x)
},
s: function(){
console.log(this.x) // 20
function fn(){
console.log(this.x)
}
return fn // 函数f虽然是在obj.fn内部定义的，但是它仍然是一个普通的函数，this仍然指向window
}
}
var fn = obj.f
fn() // 10
obj.f() // 20
obj.s()() // 10 obj.s()执行返回fn，然后 fn（）的值为10
首先调用fn()为什么结果为10，因为新建了变量fn，相当于fn = function(){ console.log(this.x)}, 函数中this默认指向window,故输出为10。而 obj.f() 中this 指向obj，所以this.x = obj.x, 输出结果为20。
3：构造函数中
构造函数创建的实例的属性指向构造函数的prototype。
function Man(name){
this.name = name
}
Man.prototype.getName = function(){
// this指向 Man构造的实例对象
return this.name
}
const tom = new Man('tom')
console.log(tom.getName()) // 'tom'
// 切记请勿修改构造函数的返回值，将会改变默认指向，比如
function Man(name){
this.name = name
return {
name: 'lily'
}
}
Man.prototype.getName = function(){
// this指向 Man构造的实例对象
return this.name
}
const tom = new Man('tom')
console.log(tom.name) // 'lily'
4：箭头函数中
箭头函数的this是在定义函数时绑定的，不是在执行过程中绑定的，箭头函数中的this取决于该函数被创建时的作用域环境。
1:
var name = "window";
var A = {
name: "A",
B: {
name: "B",
sayHello1: () => {
console.log(this); //Window
console.log(this.name);
},
sayHello2: function () {
console.log(this); //B
console.log(this.name);
},
},
};
A.B.sayHello1();
A.B.sayHello2();
2:
var name = "jack";
var man = {
name: "tom",
f1: function () {
// 这边的this和下面的setTimeout函数下的this相等
var that = this;
console.log(this); // man
setTimeout(() => {
console.log(this.name, that === this); // 'tom' true
}, 0);
},
f2: function () {
// 这边的this和上面的setTimeout箭头函数下的this不相等，这里的this指向man
var that = this;
console.log(this); // man
setTimeout(function () {
console.log(this); // window
console.log(this.name, that === this); // 'jack' false
console.log(that.name, that === this); // 'tom' false
}, 0);
},
};
man.f1(); // 'tom' true
man.f2(); // 'jack' false
setTimeout默认指向window，但是，在箭头函数中，this的作用域环境在man内，故this指向了man。也就是说此时的this可以忽略外围包裹的setTimeout定时器函数，看上一层的作用域。
5：dom节点中
特别在是react中jsx语法中，我们通常要改变dom的this指向，不然获取不到指定的执函数。所以通常需要在函数声明使用bind绑定事件。
<button id="btn">myBtn</button>
const obj = { a: 1 };
var name = "window";
var btn = document.getElementById("btn");
btn.name = "dom";
var fn = function () {
console.log(this);
};
btn.addEventListener("click", fn); // this指向 btn
btn.addEventListener("click", fn.bind(obj)); // this指向 obj
6: 面试题
6.1. 面试题一：
var name = "window";
var person = {
name: "person",
sayName: function () {
console.log(this.name);
}
};
function sayName() {
var sss = person.sayName;
sss();
person.sayName();
(person.sayName)();
(b = person.sayName)();
}
sayName();
这道面试题非常简单，无非就是绕一下，希望把面试者绕晕：
优先级总结：
- new绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定
function sayName() {
var sss = person.sayName;
// 独立函数调用，没有和任何对象关联
sss(); // window
// 关联
person.sayName(); // person
(person.sayName)(); // person
//优先级总结：new绑定 > 显示绑定（bind）> 隐式绑定 > 默认绑定
(b = person.sayName)(); // window
}
6.2. 面试题二：
var name = 'window'
var person1 = {
name: 'person1',
foo1: function () {
console.log(this.name)
},
foo2: () => console.log(this.name),
foo3: function () {
return function () {
console.log(this.name)
}
},
foo4: function () {
return () => {
console.log(this.name)
}
}
}
var person2 = { name: 'person2' }
person1.foo1();
person1.foo1.call(person2);
person1.foo2();
person1.foo2.call(person2);
person1.foo3()();
person1.foo3.call(person2)();
person1.foo3().call(person2);
person1.foo4()();
person1.foo4.call(person2)();
person1.foo4().call(person2);
下面是代码解析：
// 隐式绑定，肯定是person1
person1.foo1(); // person1
// 隐式绑定和显示绑定的结合，显示绑定生效，所以是person2
person1.foo1.call(person2); // person2
// foo2()是一个箭头函数，不适用所有的规则
person1.foo2() // window
// foo2依然是箭头函数，不适用于显示绑定的规则
person1.foo2.call(person2) // window
// 获取到foo3，但是调用位置是全局作用于下，所以是默认绑定window
person1.foo3()() // window
// foo3显示绑定到person2中
// 但是拿到的返回函数依然是在全局下调用，所以依然是window
person1.foo3.call(person2)() // window
// 拿到foo3返回的函数，通过显示绑定到person2中，所以是person2
person1.foo3().call(person2) // person2
// foo4()的函数返回的是一个箭头函数
// 箭头函数的执行找上层作用域，是person1
person1.foo4()() // person1
// foo4()显示绑定到person2中，并且返回一个箭头函数
// 箭头函数找上层作用域，是person2
person1.foo4.call(person2)() // person2
// foo4返回的是箭头函数，箭头函数只看上层作用域
person1.foo4().call(person2) // person1
6.3. 面试题三:
var name = 'window'
function Person (name) {
this.name = name
this.foo1 = function () {
console.log(this.name)
},
this.foo2 = () => console.log(this.name),
this.foo3 = function () {
return function () {
console.log(this.name)
}
},
this.foo4 = function () {
return () => {
console.log(this.name)
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.foo1()
person1.foo1.call(person2)
person1.foo2()
person1.foo2.call(person2)
person1.foo3()()
person1.foo3.call(person2)()
person1.foo3().call(person2)
person1.foo4()()
person1.foo4.call(person2)()
person1.foo4().call(person2)
下面是代码解析：
// 隐式绑定
person1.foo1() // peron1
// 显示绑定优先级大于隐式绑定
person1.foo1.call(person2) // person2
// foo是一个箭头函数，会找上层作用域中的this，那么就是person1
person1.foo2() // person1
// foo是一个箭头函数，使用call调用不会影响this的绑定，和上面一样向上层查找
person1.foo2.call(person2) // person1
// 调用位置是全局直接调用，所以依然是window（默认绑定）
person1.foo3()() // window
// 最终还是拿到了foo3返回的函数，在全局直接调用（默认绑定）
person1.foo3.call(person2)() // window
// 拿到foo3返回的函数后，通过call绑定到person2中进行了调用
person1.foo3().call(person2) // person2
// foo4返回了箭头函数，和自身绑定没有关系，上层找到person1
person1.foo4()() // person1
// foo4调用时绑定了person2，返回的函数是箭头函数，调用时，找到了上层绑定的person2
person1.foo4.call(person2)() // person2
// foo4调用返回的箭头函数，和call调用没有关系，找到上层的person1
person1.foo4().call(person2) // person1
6.4. 面试题四：
var name = 'window'
function Person (name) {
this.name = name
this.obj = {
name: 'obj',
foo1: function () {
return function () {
console.log(this.name)
}
},
foo2: function () {
return () => {
console.log(this.name)
}
}
}
}
var person1 = new Person('person1')
var person2 = new Person('person2')
person1.obj.foo1()()
person1.obj.foo1.call(person2)()
person1.obj.foo1().call(person2)
person1.obj.foo2()()
person1.obj.foo2.call(person2)()
person1.obj.foo2().call(person2)
下面是代码解析：
// obj.foo1()返回一个函数
// 这个函数在全局作用于下直接执行（默认绑定）
person1.obj.foo1()() // window
// 最终还是拿到一个返回的函数（虽然多了一步call的绑定）
// 这个函数在全局作用于下直接执行（默认绑定）
person1.obj.foo1.call(person2)() // window
person1.obj.foo1().call(person2) // person2
// 拿到foo2()的返回值，是一个箭头函数
// 箭头函数在执行时找上层作用域下的this，就是obj
person1.obj.foo2()() // obj
// foo2()的返回值，依然是箭头函数，但是在执行foo2时绑定了person2
// 箭头函数在执行时找上层作用域下的this，找到的是person2
person1.obj.foo2.call(person2)() // person2
// foo2()的返回值，依然是箭头函数
// 箭头函数通过call调用是不会绑定this，所以找上层作用域下的this是obj
person1.obj.foo2().call(person2) // obj
6.5. 面试题五：
obj = {
func() {
const arrowFunc = () => {
console.log(this._name)
}
return arrowFunc
},
_name: "obj",
}
obj.func()()
func = obj.func
func()()
obj.func.bind({ _name: "newObj" })()()
obj.func.bind()()()
obj.func.bind({ _name: "bindObj" }).apply({ _name: "applyObj" })()
答案:
// obj
// undefined
// newObj
// undefined
// bindObj
7. 综合
// 示例 1:
var name = "window";
var person1 = {
name: "person1",
say: function () {
console.log(this.name);
},
};
function sayName1() {
var sss = person1.say;
sss(); // window
person1.say(); // person1
// (person1.say)(); // 等于person1.say() // person1
(b = person1.say)(); // window
}
sayName1();
// 示例 2:
var name = "window";
var person2 = {
name: "person2",
foo1: function () {
console.log("foo1", this.name);
},
foo2: () => console.log("foo2", this.name),
foo3: function () {
return function () {
console.log("foo3", this.name);
};
},
foo4: function () {
return () => {
console.log("foo4", this.name);
};
},
};
var obj = { name: "zgc" };
person2.foo1(); // foo1 person2
person2.foo1.call(obj); // foo1 zgc
person2.foo2(); // foo2 window, 注意:这里的上层作用域是window
person2.foo2.call(obj); // foo2 window
person2.foo3()(); // foo3 window
person2.foo3.call(obj)(); // foo3 window
person2.foo3().call(obj); // foo3 zgc
person2.foo4()(); // foo4 person2
person2.foo4.call(obj)(); // foo4 zgc
person2.foo4().call(obj); // foo4 person2
// 示例 3:
var name = "window";
function Student(name) {
this.name = name;
this.bar1 = function () {
console.log("bar1", this.name);
};
this.bar2 = () => console.log("bar2", this.name);
this.bar3 = function () {
return function () {
console.log("bar3", this.name);
};
};
this.bar4 = function () {
return () => {
console.log("bar4", this.name);
};
};
}
var stu1 = new Student("stu1");
var stu2 = new Student("stu2");
stu1.bar1(); // bar1 stu1
stu1.bar1.call(stu2); // bar1 stu2
stu1.bar2(); // bar2 stu1, 注意:这里的上层作用域是Person构造函数
stu1.bar2.call(stu2); // bar2 stu1
stu1.bar3()(); // bar3 window
stu1.bar3.call(stu2)(); // bar3 window
stu1.bar3().call(stu2); // bar3 stu2
stu1.bar4()(); // bar4 stu1
stu1.bar4.call(stu2)(); // bar4 stu2
stu1.bar4().call(stu2); // bar4 stu1
// 示例 4:
var name = "window";
function Student2(name) {
this.name = name;
this.obj = {
name: "obj",
baz1: function () {
return function () {
console.log("baz1", this.name);
};
},
baz2: function () {
return () => {
console.log("baz2", this.name);
};
},
};
}
var stu3 = new Student2("stu3");
var stu4 = new Student2("stu4");
stu3.obj.baz1()(); // baz1 window
stu3.obj.baz1.call(stu4)(); // baz1 window
stu3.obj.baz1().call(stu4); // baz1 stu4
stu3.obj.baz2()(); // baz2 obj
stu3.obj.baz2.call(stu4)(); // baz2 stu4
stu3.obj.baz2().call(stu4); // baz2 obj
8.参考文章：
- js中this的指向
- 彻底理解this
- 彻底搞懂js中this指向问题 本文涉及到的案例是相对比较常见，如果想更加深入的理解this，可以参考github上的一篇文章 ☛ 传送门
