JSJS中对于this的理解

Posted 2021-01-03 不无聊

一、对this的产生原因分析和了解

第一：this指的是函数运行时所在的环境。

第二：javascript 语言之所以有this的设计，跟内存里面的数据结构有关系（内存存储详细理解参考原文）。

总结如下：

对于普通对象的保存：实际对象属性的值就是值；

对于函数的保存：实际函数属性的值是函数的地址；（而函数本身，可理解为：它不属于任何一个对象，相当于一个全局对象）

同时，函数，可以作为一个参数（值）被调用，被传播。同时，在函数体内部，允许引用当前环境的其他变量（可以引用当前环境的其他变量。但当前环境是不确定的，所以会出现不同的值）

二、this绑定详解

this 实际上是在函数被调用时发生的绑定，它指向什么地方完全取决于函数在哪里被调用。

2.1 默认绑定（绑定在全局作用域）

即在调用函数时，函数不带任何修饰，也就是“光秃秃”的调用（即没有任何修饰的调用），就会应用默认绑定规则, 默认绑定指向全局作用域。

注意：在 javascript 中，如果使用了严格模式，则 this 不能绑定到全局对象。（不是很理解，不过先记录下）

2.2 隐式绑定

当函数在调用时，如果函数有所谓的“落脚点”，即有上下文对象（即调用时.前面的对象）时，隐式绑定规则会把函数中的 this 绑定到这个上下文对象。

function say() {
    console.log(this.name)
}
var name = "global"
var obj = {
    name: "inside",
    say: say
}
var alias = obj.say // 设置一个简写   (1)
alias() // 函数调用 输出"global"  (2)

注意：隐式绑定时丢失上下文问题。

这个可以结合函数的存储理解为：obj.say只是一个函数地址，不是函数本身。所以调用时，还是在当前全局环境下调用。

2.3 显式绑定

javascript中提供三种显式绑定方法：apply,call,bind。

apply	call	bind
相同点	apply和call的用法基本相似	apply和call的用法基本相似
不同点	apply(obj,[arg1,arg2,arg3,...]被调用函数的参数以数组的形式给出	call(obj,arg1,arg2,arg3,...)被调用函数的参数依次给出
作用	apply, call 的作用就是给函数绑定一个执行上下文，且是显式绑定的。但传入参数时会有所不同。	同左

注意：bind返回一个新函数，这个函数已经制定了执行上下文（这表示执行上下文在之后不可改变了），而返回这个新函数可以接受参数（即在绑定的执行上下文中，以参数为入参执行函数）。

2.4 new 绑定

new 绑定：指通过 new 操作符调用构造函数时发生的 this 绑定。

注意：在 javascript 中并没有其他语言那样的类的概念。构造函数也仅仅是普通的函数而已，只不过构造函数的函数名以大写字母开头，也只不过它可以通过 new 操作符调用而已。

实际上：new 和 bind 应该很类似。只是一个在创建时执行，一个在执行过程中执行。（不过还是很不同的，见下文区别）

2.5 bind 和 new 的区别

不过还是有区别的：bind只能被函数调用。而new 返回的是一个对象。即new 之后，函数的执行上下文就不可以被改变了，bind不行，显示绑定的三种形式都不行。所以new 绑定 的优先级最高。

2.6 四种绑定的优先级和区别：

默认绑定 < 隐式绑定 < 显式绑定 < new 绑定

注意：bind只能被函数调用。而new 返回的是一个对象。即new 之后，函数的执行上下文就不可以被改变了，bind不行，显示绑定的三种形式都不行。所以new 绑定 的优先级最高。

三、参考

1. JavaScript 的 this 原理 - 阮一峰的网络日志 http://www.ruanyifeng.com/blog/2018/06/javascript-this.html
2. JavaScript中this绑定详解 - 想到什么写什么 - SegmentFault 思否 https://segmentfault.com/a/1190000007101339