js中this指向问题
原创
函数中this指向对于一些开发者来说一直是一个比较头疼的问题，this在js中比较灵活，不同的情况指向不同，小shy总结出了函数调用的this指向的一些情况，供大家参考。
1. 默认绑定
function fn() {
console.log(this);
}
fn();
结果：this指向window对象
函数在被调用的时候，this会默认指向全局对象window对象。
2. 隐式绑定
const obj = {
name: "小明",
fn: function() {
console.log(this);
console.log(this.name);
}
};
obj.fn();结果：
this指向obj对象，this.name 即 obj.name
调用对象的方法时会出现隐式绑定，fn是在obj对象里的，obj调用fn，this就会指向obj对象。
3. 硬绑定(改变this指向)
const obj1 = {
name: "小明",
fn: function() {
console.log(this.name);
}
};
const obj2 = {
name: "小红"
};
obj1.fn.call(obj2); // 小红
obj1.fn.apply(obj2); // 小红
obj1.fn.bind(obj2)(); // 小红
这里call()、apply和bind方法都是可以改变函数的this指向，所以fn函数调用this都指向了obj2对象，所以得出结果为小红。（如果不太明白call()、apply() 和 bind()，可以看小shy之前的博客《js call()、apply()、bind()用法和区别》）
4. 构造函数绑定
function Person(name) {
this.name = name;
this.sayName = function() {
console.log(this.name);
}
}
const p = new Person("小明");
p.sayName(); // 小明
在使用构造函数通过new关键字创建一个对象的时候，会创建一个连接到该函数的prototype成员的新对象，同时，this会被绑定到这个新对象上。
小作业
var name = "小红";
function a() {
const name = "小白";
console.log(this.name);
}
function d(i) {
return i();
}
const b = {
name: "小黄",
detail: function() {
console.log(this.name);
},
bibi: function() {
return function() {
console.log(this.name);
}
}
};
const c = b.detail;
b.a = a;
const e = b.bibi();
a();
c();
b.a();
d(b.detail);
e();
输出结果是什么呢？ 感兴趣的话可以把答案写在评论区哟。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
腾讯云开发者
