this指向问题(vue箭头函数this指向问题)
定义： this 关键字是函数运行时自动生成的一个内部对象，只能在函数内部使用，总指向调用它的对象。
同时，this在函数执行过程中，this一旦被确定了，就不可以再更改
var a = 10;
var obj = {
a: 20
}
function fn() {
this = obj; // 修改this，运行后会报错
console.log(this.a);
}
fn();复制代码绑定规则
不同的使用场合，this有不同的值，主要分为下面几种情况：
默认绑定
隐式绑定
new绑定
显示绑定
默认绑定
全局环境中定义person函数，内部使用this关键字
var name = 'Jenny';
function person() {
return this.name;
}
console.log(person()); //Jenny复制代码调用函数的对象在游览器中位window，因此this指向window，所以输出Jenny
注意： 严格模式下，this会绑定到undefined，只有函数运行在非严格模式下，默认绑定才能绑定到全局对象
隐式绑定
函数还可以作为某个对象的方法调用，这时**this就指这个上级对象**
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m(); // 1
// 多重对象调用
var o = {
a:10,
b:{
fn:function(){
console.log(this); //{fn: ƒ}
}
}
}
o.b.fn();
// 尽管 fn 这个函数是被最外层的对象所调用，this指向的也只是它上一级的对象
var ffffn = o.b.fn
ffffn() //window
// 虽然`fn`是对象`b`的方法，但是`fn`赋值给`ffffn`时候并没有执行，所以最终指向`window`复制代码new绑定
通过构建函数new关键字生成一个实例对象，此时this指向这个实例对象
function test() {
this.x = 1
}
var obj = new test();
obj.x // 1
// new关键字改变了this的指向复制代码new过程遇到return一个对象，此时this指向为返回的对象
function fn()
{
this.user = 'xxx';
return {};
}
var a = new fn();
console.log(a.user); //undefined复制代码如果返回一个简单类型的时候，则this指向实例对象
function fn()
{
this.user = 'xxx';
return 1;
}
var a = new fn;
console.log(a.user); //xxx复制代码注意返回 null 的时候，此时的 new 仍然指向实例对象
function fn()
{
this.user = 'xxx';
return null;
}
var a = new fn;
console.log(a.user); //xxx复制代码显式修改
apply()、call()、bind()是函数的一个方法，作用是改变函数的调用对象。它的第一个参数就表示改变后的调用这个函数的对象。因此，这时this指的就是这第一个参数。
var x = 0;
function test() {
console.log(this.x);
}
var obj = {};
obj.x = 1;
obj.m = test;
obj.m.apply(obj) // 1
obj.m.call(obj)
obj.m.bind(obj)() // bind返回的是函数复制代码箭头函数
箭头函数没有自己的this，在箭头函数代码书写所在的作用域的this就是箭头函数的this。
const obj = {
sayThis: () => {
console.log(this);
}
};
obj.sayThis(); // window 因为 JavaScript 没有块作用域，所以在定义 sayThis 的时候，里面的 this 就绑到 window 上去了
const globalSay = obj.sayThis;
globalSay(); // window 浏览器中的 global 对象复制代码需要注意一些潜在的坑
const button = document.getElementById('mngb');
console.log(this)
button.addEventListener('click',function(){
(()=> {
console.log(this === window) // true
this.innerHTML = 'clicked button'
})()
} )复制代码this触发点击事件对象应该是button，但是this却是`window；可以查看
[防抖节流中的例子] juejin.cn/post/703363…
在原型上添加方法时候，此时this指向window
Cat.prototype.sayName = () => {
console.log(this === window) //true
return this.name
}
const cat = new Cat('mm');
cat.sayName()复制代码优先级
隐式绑定 × 显示绑定
function foo() {
console.log( this.a );
}
var obj1 = {
a: 2,
foo: foo
};
var obj2 = {
a: 3,
foo: foo
};
obj1.foo(); // 2
obj2.foo(); // 3
obj1.foo.call( obj2 ); // 3
obj2.foo.call( obj1 ); // 2复制代码new 绑定 × 隐式绑定
function foo(something) {
this.a = something;
}
var obj1 = {
foo: foo
};
var obj2 = {};
obj1.foo( 2 );
console.log( obj1.a ); // 2
obj1.foo.call( obj2, 3 );
console.log( obj2.a ); // 3
var bar = new obj1.foo( 4 );
console.log( obj1.a ); // 2
console.log( bar.a ); // 4复制代码new绑定 × 显式绑定
function foo(something) {
this.a = something;
}
var obj1 = {};
var bar = foo.bind( obj1 );
bar( 2 );
console.log( obj1.a ); // 2
var baz = new bar( 3 );
console.log( obj1.a ); // 2
console.log( baz.a ); // 3复制代码bar被绑定到obj1上，但是new bar(3)并没有像我们预计的那样把obj1.a修改为3。但是，new修改了绑定调用bar()中的this
综上，new绑定优先级 > 显示绑定优先级 > 隐式绑定优先级 > 默认
伪原创工具 SEO网站优化 https://www.237it.com/
作者：刘小芒zZ
链接：https://juejin.cn/post/7035480279653285895