JavaScript中this指向的深入解析

AlphaGooo 发布于2019-08-23 10:29 / 1542人阅读

普通函数的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就介绍到这里，如果有什么不懂的欢迎随时提问，我会随时回答大家的问题。

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

云服务器 GPU云服务器 this的指向 javascript中this详解 javascript的this 改变this指向

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96390.html

深入认知 JavaScript

摘要：深入认知前言关于，平时我们仅仅做到了使用，但是真的理解为什么这么使用吗这里详细介绍一些我们常用的语法。在以下，是没有块级作用域的，只有函数作用域。而如果在作用域中嵌套作用域，那么就会有作用域链。本文当时写在本地，发现换电脑很不是方便，在这里记录下。深入认知 Javascript 前言关于 Javascript，平时我们仅仅做到了使用，但是真的理解为什么这么使用吗？这里详细...

malakashi 2019-08-23 18:02 评论0 收藏0
【进阶3-2期】JavaScript深入之重新认识箭头函数的this

摘要：箭头函数的寻值行为与普通变量相同，在作用域中逐级寻找。题目这次通过构造函数来创建一个对象，并执行相同的个方法。我们知道this绑定规则一共有5种情况： 1、默认绑定（严格/非严格模式） 2、隐式绑定 3、显式绑定 4、new绑定 5、箭头函数绑定其实大部分情况下可以用一句话来概括，this总是指向调用该函数的对象。但是对于箭头函数并不是这样，是根据外层（函数或者全局）作用域（...

Rainie 2019-08-23 14:31 评论0 收藏0
深入理解JavaScript执行上下文和执行栈

摘要：执行上下文和执行栈是中关键概念之一，是难点之一。理解执行上下文和执行栈同样有助于理解其他的概念如提升机制作用域和闭包等。函数执行完成，函数的执行上下文出栈，并且被销毁。前言如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是Ja...

silenceboy 2019-08-23 16:00 评论0 收藏0
深入理解JavaScript执行上下文和执行栈

摘要：执行上下文和执行栈是中关键概念之一，是难点之一。理解执行上下文和执行栈同样有助于理解其他的概念如提升机制作用域和闭包等。函数执行完成，函数的执行上下文出栈，并且被销毁。前言如果你是一名 JavaScript 开发者，或者想要成为一名 JavaScript 开发者，那么你必须知道 JavaScript 程序内部的执行机制。执行上下文和执行栈是JavaScript中关键概念之一，是Ja...

leiyi 2019-08-02 14:34 评论0 收藏0
【进阶1-5期】JavaScript深入之4类常见内存泄漏及如何避免

摘要：本期推荐文章类内存泄漏及如何避免，由于微信不能访问外链，点击阅读原文就可以啦。四种常见的内存泄漏划重点这是个考点意外的全局变量未定义的变量会在全局对象创建一个新变量，如下。因为老版本的是无法检测节点与代码之间的循环引用，会导致内存泄漏。（关注福利，关注本公众号回复[资料]领取优质前端视频，包括Vue、React、Node源码和实战、面试指导）本周正式开始前端进阶的第一期，本周的主题...

red_bricks 2019-08-23 13:47 评论0 收藏0