js普通函数和箭头函数的this（全网最容易理解）

最近在被箭头函数与普通函数的区别的时候，有一个很是重要的区别就是this指向问题。自己笔者比较笨的那种，因此下面我都理解，全网的程序员都应该没问题。说重点。。。

普通函数的this

首先咱们来搞明白普通函数的this指向问题：

const obj = {
    bg:function(){
        console.log(this)    
    }
}
obj.bg() //obj
var dbl = obj.bg
dbj() //windows
复制代码

上面代码，obj对象里面有一个bg的普通函数属性，第一行执行obj.bg()，函数里面的this指向obj这个对象。 第二行var dbl = obj.bg只作了赋值，并无执行，也就说如今dbl只是一个普通函数， 第三行执行dbl，此时普通函数里面的this指向window。 因此上述总结：

• 1.普通函数最终指向调用它的对象，也就是说谁调用就指向谁。
• 2.没有被对象调用的函数默认指向window

function test(){
    console.log(this)
}
test()     //windows
new test() //test对象
test.call({id:1}) // {id:1}对象 
复制代码

test是一个普通的构造函数，第一行执行此时普通函数里面的this指向window，符合上述观点，第二行new一个实例此时的this指向test的对象，这里有些小伙伴比较蒙了，不是说好的谁调用指向谁吗？怎么回事，那是咱们不够了解new到底作了什么事。new关键字：1.建立了一个新的对象。2.将这个新的对象的__proto__指向了构造函数对象prototype对象。3.把构造函数的this指向这个新的对象而且执行，例如：test.call(newobj)。4.返回新的对象。这个样一来咱们就明白执行实例化一个构造函数new test() 为何指向test对象了。可是这不是我想表达的重点，咱们再看第三行test.call({id:1}),call方法你们都很熟吧，就是用来改变this指针的函数，而且执行这个构造函数（相应的还有bind、apply函数）。那么这样一来同一个构造函数，不一样的调用方式，this指向的对象也是不同的。 因此上述总结：

• 3.在函数没有调用的时候this的指向是没法肯定的，也就是说普通函数的this是在执行的时候肯定的。

箭头函数的this

再接着说剪头函数，其实箭头函数没有this，必须经过查找做用域链查找决定值。

const obj = {
    bg:() => {
        console.log(this)    
    }
}
obj.bg() //windows
复制代码

例子中的剪头函数bg的在obj调用函数的时候，this对obj对象没有绑定做用它会沿着做用域链往上找，再上层做用域是window因此输出结果是window；也就是说箭头函数没有this，它的this取决于做用域链上的this。 在这里笔者有一个误区，就是总觉得bg的箭头函数上一层做用域是obj这个对象的块级做用域，其实bg是obj的一个属性，他们应该是同一级的做用域，我来换种写就可理解了const obj.bg = ()=> {}这样上层做用域就是window（ 这里我仍是要很是感谢笔者的同窗X帮我从坑中解救出来，哈哈哈）

function test1(){
    return function(){
    console.log(this)
    }
}
var Test1 = new test1();  Test1() //windows

function test2(){
    return ()=>{
    console.log(this)
    }
}
var Test2 = new test2();  Test2() //Test2
复制代码

剪头函数的特殊本质就是函数中的this没有绑定做用，或者能够这样说：剪头函数中的this其实始终指向的是函数定义时的this的指向而非执行时的。