JavaScript作用域

JavaScript运行机制

• JavaScript是一门动态类型的解释型脚本语言

编译器：进行变量的声明，添加到作用域中

引擎： 进行变量的赋值操作，若在作用域中没找到变量的声明，就抛出错误

作用域 ：收集并维护声明的变量的标识符，以及协助引擎进行一系列查询

• 如果进行对变量的赋值，执行LHS，不成功的LHS会在全局作用域自动创建一个变量（非严格模式）

• 如果是获取变量的值，执行RHS，不成功的RHS会抛出referenceerror

欺骗词法作用域

eval()会修改书写时的词法作用域

会在运行时修改已经存在的词法作用域，动态生成代码无法抵消性能的损失

with（） ：重复引用一个对象中的多个属性的快捷方式

在运行时根据传给它的对象凭空创建一个全新的词法作用域

function foo(obj) {
  with (obj) {
     a = 229;
    }
}
 ​
let o1 = {
   a: 1
}
let o2 = {
   b: 2
}
foo(o1);
console.log(o1.a);
foo(o2)             //执行此函数，with在foo的作用域中进行a的查找和赋值操作
console.log(o2.a);  //undefined  with向全局作用域泄露了a
console.log(a);     //log（）v从全局作用域中找到了a

不良后果：引擎在编译时无法对作用域进行查找和优化

函数作用域

将变量和函数包装在函数里面，最小限度地暴露必要的内容，将其他内容隐藏起来

在行内表达式外最好给函数指定函数名

词法作用域和动态作用域

• 词法作用域关注在何处声明，动态作用域关注从何处调用

动态作用域（this机制）

• this是在运行时绑定的，和函数的声明没有任何关系，只取决于函数的调用方式

• this既不指向函数自身也不指向函数的词法作用域

• 通过函数的直接调用位置，判断函数内部this的绑定对象

• this的代码风格与箭头函数的代码风格最好二选一，利于维护

1. 默认绑定

   独立函数调用时，函数应用了this的默认绑定，因此this指向全局对象

2. 隐式绑定:：在某个上下文对象中调用，this绑定该上下文对象

   调用位置有上下文对象，则函数调用中的this会绑定到这个上下文对象，

   对象属性引用链只有上一层在调用位置中起作用

3. 显示绑定： 通过call()或apply()调用，this绑定指定的对象

   call() 和 apply() 将this绑定到指定对象的上下文中

   第一个参数就是这个this对象，（如果该参数是原始值，则这个原始值会诶转换为它的对象形式，又称为“装箱”）

   1. 硬绑定

      当一个函数通过bind（）手动调用去绑定this，this就会被强制绑定到被绑定的对象上，无论之后如何对该函数进行调用，都不会改变this的绑定

   2. 软绑定

      通过softbind()将this绑定到除全局对象或undefined之外的一个默认对象，且不影响后期进行隐式绑定或显示绑定

4. new绑定：通过new调用，this绑定的是新创建的对象

5. 忽略this：在call或者apply中第一个参数为null，则this进行默认绑定

   安全的做法：传入一个特殊的空对象，使用Object.create(null)创建，将this限制在这个空对象中，避免this不小心默认绑定

6. 间接引用：将一个绑定的对象赋值给变量，会导致这个变量中的this应用默认绑定

7. 箭头函数内部的this是绑定到箭头函数外层的作用域，而且绑定后无法被修改