图解-JS普通函数跟箭头函数中this的指向问题

Vue:

不要在选项 property 或回调上使用箭头函数,比如 created: () => console.log(this.a) 或 vm.$watch('a', newValue => this.myMethod())。因为箭头函数并没有 thisthis 会作为变量一直向上级词法作用域查找,直至找到为止,经常导致 Uncaught TypeError: Cannot read property of undefined 或 Uncaught TypeError: this.myMethod is not a function 之类的错误。

1.我们手写复习一下js函数变量作用域的问题

//错误:c is not defined        
var fs = function show() {
    var c = 10;
}
console.log(c);
//结论:函数可以限制变量的作用域
//写法1.
var
c=new Date(); var obj = { age:c }
//写法2.
var c=new Date();
var obj = {
age:c
}
//结论:
这两种写法都是等价的,区别在于一个是匿名方法,一个非匿名方法

回到正题,先看下面的

案例1


var obj = {
    say: ()=>{  
        console.log(this);        
    }
};
//此时this指向window
//我们按照上面的规则改写,来找箭头函数的作用域
var func = ()=>{  
    console.log(this);        
};
var obj = {
    say: func
};
//可以看到箭头函数的作用域在windows,因为箭头函数没有作用域,js引擎向上查找箭头函数内的this,当然是window了

案例2


var obj = {
    say: function () {      
        setTimeout(()=>{
           console.log(this);
     }, 1000);
    }
};
//改写一下
var obj = {
    say: function () {
        var func = () => { 
            console.log(this);
        };
        setTimeout(func, 1000);
    }
};
obj.say();

这个箭头函数的this我们来找一下

首先切记箭头函数没有this,箭头函数里面的this要向上查找

1.由于obj.say()可知say函数内的this执行obj

2.由于这个箭头函数的作用域在say里,所以箭头函数this就是say中的this就是obj

结论:

普通函数有调用者的概念谁调用this指代谁。

箭头函数比较特殊没有调用者,不存在this.箭头函数()的概念,但是它内部可以有this,而内部的this由上下文决定

原文地址:https://www.cnblogs.com/chaeyeon/p/12938347.html