JS中的普通函数和箭头函数的this相关知识总结

最新推荐文章于 2023-06-27 13:02:39 发布

ICE努力学前端

最新推荐文章于 2023-06-27 13:02:39 发布

阅读量636

点赞数

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

本文链接：https://blog.csdn.net/zhaohb2016/article/details/125717215

版权

关于《你所不知道的JS上》、《es6入门》的笔记整理

1、this到底是什么

this 是在运行时进行绑定的，并不是在编写时绑定，它的上下文取决于函数调用时的各种条件。this 的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。

当一个函数被调用时，会创建一个活动记录（有时候也称为执行上下文）。这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this 就是记录的其中一个属性，会在函数执行的过程中用到。

也就是说，this是记录调用中的一个属性，提供了一种更优雅的方式来隐式的“传递”了一个对象引用，可以将API设计的更加简洁且易于复用（下面是具体的几个例子）。

主要参考阮一峰老师的的网络日志JavaScript 的 this 原理

JavaScript 语言之所以有this的设计，跟内存里面的数据结构有关系。
借鉴阮一峰老师的图片
当对象的属性的值是一个函数时，引擎会将函数单独保存在内存中，然后再将函数的地址赋值给foo属性的value属性。这样由于函数是一个单独的值，所以它可以在不同的环境（执行上下文）执行

JavaScript 允许在函数体内部，引用当前环境的其他变量。

var f = function () {
   
  console.log(x);
};

上面代码中，函数体里面使用了变量x。该变量由运行环境提供。

现在问题就来了，由于函数可以在不同的运行环境执行，所以需要有一种机制，能够在函数体内部获得当前的运行环境（context）。所以，this就出现了，它的设计目的就是在函数体内部，指代函数当前的运行环境。

var f = function () {
   
  console.log(this.x);
}

var x = 1;
var obj = {
   
  f: f,
  x: 2,
};

// 单独执行
f() // 1

// obj 环境执行
obj.f() // 2

调用位置是理解this绑定指向的关键，调用位置就是函数在代码中被调用的位置（而不是声明的位置）。清楚调用位置才能回答这个问题：这个 this 到底引用的是什么？

最重要的是要分析调用栈（就是为了到达当前执行位置所调用的所有函数）。我们关心的调用位置就在当前正在执行的函数的前一个调用中。

function baz(){
   
    // 当前调用栈是：baz 
    // 因此，当前调用位置是全局作用域 
    console.log( "baz

关注