JavaScript中this指向的深刻解析

普通函数的this指向

简单说说

首先，按照惯例，咱们先举个栗子：

var bar = 2;
function foo() {
  this.bar = 1;
  this.getBar = function() {
    console.log(this.bar);
  }
}
var test = new foo();
var getBar = test.getBar;

test.getBar();  //1
getBar();       //2

经过这个例子咱们就能看到，虽然是同一个函数，可是实际上获得的结果却不同。这个缘由相信你们都能知道。不知道的也告诉你：this实际上是指向调用该函数的那个对象。那么当咱们在全局环境中调用的时候，this天然就指向了全局环境。

那么到是有个问题：this为何会随调用者变化而变化？

这可能须要你继续往下看看

深刻说说

那么若是说深层次的理解this的指向，我以为大概能够从数据类型讲起

咱们都知道，栈中存放的是基本数据类型，也就是String、Number、Boolean、Symbol、Null、Undefined这七种数据类型，固然Symbol是ES6新增的一个数据类型。那么堆中存放的就是一些引用类型了，如Obejct、Function。实际上当咱们定义一个引用类型的时候，js会同时定义一个地址指针指向内存中的对象。

例如：当咱们声明一个字面量对象时候let a = {num:1};实际上a中存放的是指向{num:1}的地址

如今咱们解析一下上面那段代码是如何执行的

// 在全局环境下定义一个变量bar
var bar = 2;

function foo() {
    //在foo中也声明了一个bar
    this.bar = 1;
    
    //在foo中声明一个getBar函数
    this.getBar = function() {
        console.log(this.bar);
    }
}

//构造函数模式自定义对象，将foo的this赋予test
var test = new foo();

//将test中的getBar方法赋予getBar
var getBar = test.getBar;

//调用test中的getBar
test.getBar();  //1

//调用getBar
getBar();       //2

如今列出来一看，放佛恍然大悟，终于知道为啥输出的是不一样的结果了。那么我这里却是有几个问题

• 为何调用同一个函数却有不一样的结果？
• foo中的this是指向foo的，为何foo中的函数能够取得外部的this？
• 为何this会随调用它的对象变化而变化？

ok，其实要弄清楚上述问题，咱们须要明白一点，函数也是个引用类型。那么咱们上面讲过，建立引用类型的时候会同时建立一个地址指针。那么咱们就能够这样理解上面的foo对象

实际上foo中的getBar只是存放了一个函数的地址而已*。那么这个函数并非foo所私有。什么东西是foo的呢？一个值为1的bar和一个指向function() {console.log(this.bar);}函数的getBar而已。

这样咱们就不难理解，为何调用同一个函数会有不同的结果了，由于这个函数并非foo所私有。比如内存就是深圳，函数就只是深圳的一套房。getBar就是这套房的钥匙。那么一开始foo这我的建好了这房子，就他有这房子的钥匙，那么固然只有他能进出该房子，后来有一天他把钥匙多配了一把给了window这好朋友。因而乎window也能进这套房了。给window配钥匙的过程：var getBar = test.getBar;这里只是将该函数的地址赋给全局下的getBar而已，房子也只是一套房子，函数仍是一个函数。

因为函数能够在不一样的运行环境执行，因此须要有一种机制，可以在函数体内部得到当前的运行环境（context）。因此，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

因此当window调用这个函数的时候，this就不是指向foo了。而是指向window。this是指向他们本身。window的衣服不会在进了foo的房子之后就变成foo的衣服。

ok，咱们如今再把刚刚的代码从新注释一下

// 在全局环境下定义一个变量bar
var bar = 2;

function foo() {
    //在foo中也声明了一个bar
    this.bar = 1;
    
    //在foo中声明一个getBar函数，getBar存放该函数的地址
    this.getBar = function() {
        console.log(this.bar);
    }
}

//构造函数模式自定义对象，将foo的this赋予test
var test = new foo();

//将test中的getBar方法的地址赋予全局的getBar
var getBar = test.getBar;

//调用test中的getBar函数
test.getBar();  //1

//调用getBar函数
getBar();       //2

因而乎咱们就把普通的this指向弄明白了。顺便还明白了堆栈的区别。接下来看看不普通的函数this指向是如何的

箭头函数this指向

箭头函数内没有this，箭头函数的this是父级函数的this

// 在全局环境下定义一个变量bar
var bar = 2;

function foo() {
    //在foo中也声明了一个bar
    this.bar = 1;
    
    //在foo中定义一个箭头函数，getBar存放该函数的地址
    this.getBar = () => {
        console.log(this.bar);
    }
}

//构造函数模式自定义对象，将foo的this赋予test
var test = new foo();

//将test中的getBar方法的地址赋予全局的getBar
var getBar = test.getBar;

//调用test中的getBar函数
test.getBar();  //1

//调用getBar函数
getBar();       //1

若是定义了箭头函数的状况下，this执行就不会随意的改变了。普通函数的this是会跟随调用者变化，可是箭头函数就很特别，他只会继承父级的this，并且一旦创建就不会改变了。因此在这里咱们就能够看见，尽管全局下面调用getBar，可是实际上仍是取到了foo的this。

所以箭头函数不能够用来看成构造函数。由于它自己是没有this的！

因此箭头函数使用的话须要与普通函数区别开这点，它的this指向定义函数时候的父级。

后话

关于this就介绍到这里，若是有什么不懂的欢迎随时提问，我会随时回答你们的问题。

那么最后，成功不在一朝一夕，咱们都须要努力