JavaScript中的this详解

最新推荐文章于 2023-02-15 10:30:37 发布

axizwen

最新推荐文章于 2023-02-15 10:30:37 发布

阅读量302

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/axizwen/article/details/122447334

版权

了解JS中的this，有几个知识点需要知道。1，关于闭包。2，词法环境。3，回调函数。4，箭头函数。

1.闭包

首先，我们来说闭包，我们看看MDN中的闭包的定义。一个函数和对其周围状态（lexical environment，词法环境）的引用捆绑在一起（或者说函数被引用包围），这样的组合就是闭包（closure）。也就是说，闭包让你可以在一个内层函数中访问到其外层函数的作用域。在 JavaScript 中，每当创建一个函数，闭包就会在函数创建的同时被创建出来。

function makeFunc() {
    var name = "Mozilla";
    function displayName() {
        alert(name);
    }
    return displayName;
}

var myFunc = makeFunc();
myFunc();

运行这段代码的效果和之前 init() 函数的示例完全一样。其中不同的地方（也是有意思的地方）在于内部函数 displayName() 在执行前，从外部函数返回。

第一眼看上去，也许不能直观地看出这段代码能够正常运行。在一些编程语言中，一个函数中的局部变量仅存在于此函数的执行期间。一旦 makeFunc() 执行完毕，你可能会认为 name 变量将不能再被访问。然而，因为代码仍按预期运行，所以在 JavaScript 中情况显然与此不同。

原因在于，JavaScript中的函数会形成了闭包。闭包是由函数以及声明该函数的词法环境组合而成的。该环境包含了这个闭包创建时作用域内的任何局部变量。在本例子中，myFunc 是执行 makeFunc 时创建的 displayName 函数实例的引用。displayName 的实例维持了一个对它的词法环境（变量 name 存在于其中）的引用。因此，当 myFunc 被调用时，变量 name 仍然可用，其值就被传递到alert中。

下面是一个更有意思的示例 — 一个 makeAdder 函数：

function makeAdder(x) {
  return function(y) {
    return x + y;
  };
}

var add5 = makeAdder(5);
var add10 = makeAdder(10);

console.log(add5(2));  // 7
console.log(add10(2)); // 12

在这个示例中，我们定义了 makeAdder(x) 函数，它接受一个参数 x ，并返回一个新的函数。返回的函数接受一个参数 y，并返回x+y的值。

从本质上讲，makeAdder 是一个函数工厂 — 他创建了将指定的值和它的参数相加求和的函数。在上面的示例中，我们使用函数工厂创建了两个新函数 — 一个将其参数和 5 求和，另一个和 10 求和。

add5 和 add10 都是闭包。它们共享相同的函数定义，但是保存了不同的词法环境。在 add5 的环境中，x 为 5。而在 add10 中，x 则为 10。

2.词法环境

在了解了闭包之后，我们来看看闭包中的词法环境（Lexical Enviroment）。

在JavaScript中，每个运行的函数，代码块，以及整个脚本，都有一个被称为词法环境（Lexical Enviroment）的内部关联对象。

词法环境由两部分组成：

1. 环境记录(Enviroment Record)——一个存储所有局部变量作为其属性（包括一些其他信息，例如this的值）的对象

2，对外部词法环境的引用，与外部代码相关联。

一个“变量”只是 环境记录 这个特殊的内部对象的一个属性。“获取或修改变量”意味着“获取或修改词法环境的一个属性”。

举个例子，这段没有函数的简单的代码中只有一个词法环境：

这就是所谓的与整个脚本相关联的全局词法环境。

在上面的图片中，矩形表示环境记录（变量存储），箭头表示外部引用。全局词法环境没有外部引用，所以箭头指向了 null。

在这里，我们就是举一个列子来说明，每个函数都有自己的词法环境，并且词法环境中包括this信息，而this信息在创建的时候是不会有值的，他是随着代码的执行计算出来的。

3.回调函数。

上图是回调函数在危机百科中的介绍，我觉得主要的一句话是：回调函数和原始调用者处于相同的抽象层。

4.箭头函数

箭头函数有些特别：它们没有自己的 this。如果我们在这样的函数中引用 this，this 值取决于外部“正常的”函数。

有了这些铺垫我们再来看，btn.onclick中的代码

 let btn = document.getElementById('btn');
 btn.onclick = function(){

   setTimeout(function(){console.log(this)},1000)
 }

先看一下function函数的this。正常的function函数的this逻辑很简单，谁调用我，我的this就指向谁，在setTimeout中的function是与setTimeout处于同一抽象层的（是挂载在window对象身上的），且它是由setTimeout计数之后由window来调用的，所以这里的this就是window对象。

再来看箭头函数中的this

 let btn = document.getElementById('btn');
 btn.onclick = function(){

   setTimeout(()=>{console.log(this);},1000)
 }

箭头函数没有自己的this意思就是，在箭头函数的词法环境中的环境记录中是没有this的定义的。那如果它需要用this怎么办，就需要到外部环境引用中去找this。箭头函数的外部环境引用，this 值取决于外部“正常的”函数。箭头函数的外部有一个正常的function，这个function是由btn来调用的，所以正常函数的this是btn。那箭头函数就把它的this拿过来，在它里面用。所以箭头函数的this对象就指向的是btn。

初学JS，感觉很多知识点不是很贯通，如果有说错的地方，欢迎大佬批评指正。感谢感谢。