作用域（静态分析）
作用域是定义变量和访问变量的范围。
作用域可以通过静态分析，不需要运行代码，就可以分析出当前作用域。
作用域分为：全局作用域、函数作用域、块级作用域。
- 全局作用域：在顶层声明的变量和函数可以被访问的范围，通常就是在最外层（非函数体或循环体内）。全局变量中声明的变量和函数在任何地方都可以访问，包括其他作用域内部。在全局作用域中声明的变量，称为全局变量。
- 函数作用域：函数作用域是在函数体内部声明的变量可以被访问的范围。在函数体外部无法被访问。函数作用域可以创建私有变量，这些被声明的变量只能在函数体中被访问。
- 块级作用域：块级作用域是在代码块（if条件语句、for循环或大括号{}中的代码）内（let、const）声明的变量可以被访问的范围。在ES6（ECMAScript2015）之前，JavaScript中没有明确的块级作用域。可以使用var声明函数作用域变量。在ES6中引入let和const关键字后，当使用let和const声明变量时会产生块级作用域，变量的可访问范围在当前代码块内。
作用域规定了标识符（变量、函数等）在程序中的可见性和生命周期。当变量被引用时，JavaScript引擎会根据作用域找到对应的变量。如果当前作用域中找不到该变量，就会继续往上级作用域中查找，直到找到或者到达全局作用域。这就形成了作用域链（这个过程被称为作用域链）（scope chain）。
作用域链
作用域链是变量和函数的可访问性和查找规则。
function outer() {
const outerVar = 'Outer variable';
function inner() {
const innerVar = 'Inner variable';
console.log(innerVar); // Inner variable
console.log(outerVar); // Outer variable
console.log(globalVar); // Global variable
}
inner();
}
const globalVar = 'Global variable';
outer();从上述代码可以看到，内部函数可以访问自身函数体内的变量，又可以访问外部函数体的变量，还能访问全局变量。作用域链会从内层，到外层，逐层查找。
如果不使用var声明变量呢？
console.log(d) //报错：is not defined // 此时并没有发生变量提升
d=yunyin
// 'yunyin'
window.d
// 'yunyin'
function test() {
e ='yy'
}
test()
console.log(e) // yy
console.log(window.e) // yy可以看到，如果不用var进行变量声明，只做赋值操作，此时的变量会被挂在在window对象上。因此只有当变量使用var声明之后才会产生变量提升。
函数提升
函数提升是默认存在的，目的是为了方便开发者，可以随意放置函数的位置。
变量提升
只有使用var声明的变量才会产生变量提升，只会提升变量定义，不会提升变量赋值。因此在变量声明之前使用var声明的变量会返回undefined（变量提升）。如果使用let、const声明的变量，在变量声明之前访问，会报错 Cannot access 'xx' before initialization。报错提示，无法在变量初始化之前访问。如：
console.log(dog)
let dog = 'wangcai'如果是在函数中定义的变量在外部访问，则会报错 Uncaught ReferenceError: dog is not defined。如下：
function funLog() {
let dog = 'wangcai'
}
console.log(dog)可以看到报错内容是不一样的。
this上下文（动态分析）
this是在执行时动态读取上下文决定的，而不是创建时决定的
函数直接调用——this指向window
function foo(){
console.log('函数内部', this) //window对象
}
foo()从上述代码可以看到，在函数体内的this指向window对象。这是因为当前被调用的foo函数，是在全局环境下被调用的。
隐式绑定——this执行调用堆栈的上级（对象、数组等引用关系逻辑）
function fn() {
console.log('隐式绑定', this) //obj对象
}
const obj = {
a: 1,
fn
}
obj.fn = fn;
obj.fn();从上述代码可以看出，当函数被obj对象引用后，obj对象调用函数时，this执行的是obj对象。说明当前函数作用域被调用时，指向被调用的对象。注意，引用不代表执行，this指向的是执行的对象，而不是引用对象。（当前函数是在哪里执行的）
猜猜this指向
const foo = {
bar: 10,
fn: function () {
console.log(this.bar)
console.log(this)
}
}
const fn1 = foo.fn
fn1()上述代码中，定义了fn1单独取出foo对象中的fn方法，此时定义的函数在windows上，因此this的上下文指向的是window，window上没有bar变量，所以为undefined
const o1 = {
txt: 'o1',
fn: function (){
//直接使用上下文——传统派活
console.log('o1fn', this)
return this.txt
}
}
const o2 = {
txt: 'o2',
fn: function (){
//呼叫领导执行——部门协作
return o1.fn()
}
}
const o3 = {
txt: 'o3',
fn: function (){
//直接内部构造——公共人
let fn = o1.fn
return fn()
}
}
console.log('o1fn', o1.fn());
console.log('o2fn', o2.fn());
console.log('o3fn', o3.fn());o1调用fn，此时this指向o1，在o2中只是返回了o1的调用，依然属于o1自身的调用，因此this是o1，o3把o1.fn重新抽出来赋给o3对象中的fn，返回定义的fn函数，此时调用fn与o3之间并无关联，fn是在window上执行的，而window上并没有text的值，因此返回undefined
如果需要将console.log('o2fn', o2.fn()) 的结果改成o2，如下：
//在o2初始化fn方法时，把o1的方法抽出，赋给o2方法
const o1 = {
txt: 'o1',
fn: function (){
//直接使用上下文——传统派活
console.log('o1fn', this)
return this.txt
}
}
const o2 = {
txt: 'o2',
fn: o1.fn
}
console.log('o2', o2.fn()) //this指向o2显示绑定this
function foo() {
console.log('函数内部', this);
}
foo();
// 使用
foo.call({
a: 1
});
foo.apply({
a: 1
});
const bindFoo = foo.bind({
a: 1
});
bindFoo();foo()属于函数调用此时this指向window，call、apply、bind调用后都让this指向了对象{a: 1}
call、apply、bind区别
（1）执行时机
- call接收多个参数，第一个参数是this指向，从第二个参数开始是传递给函数的参数，call会立即执行函数
- apply接收两个参数，第一个参数是this指向，第二个参数是一个数组，数组中的元素会被展开后传递给函数，apply也会立即执行函数
- bind接收多个参数，第一个参数是this指向，第二个参数开始是传递给函数的参数。与call和apply不同，bind不会立即执行函数，而是返回一个新的函数，这个新的函数在调用时才会执行。
（2）参数传递方式
- call和apply都可以传递数组或伪数组对象作为参数
- apply的第二个参数必须是数组或伪数组，而call和bind的参数是独立传递的
（3）使用场景
- call适用于动态传递参数给函数的场景，特别是在不知道具体参数数量时
- apply常用于需要传递多个参数给函数的场景，特别是参数较多时，使用apply可以避免手动展开参数的麻烦
- bind适用于需要预先绑定this和部分参数，但不想立即执行函数的场景。bind返回的新函数可以在需要时调用，且可以保存绑定状态，直到实际需要执行时才使用。
bind实现
//1.需求:手写bind => bind位置(挂载在哪里) => Funtion.prototype
Function.prototype.newBind = function(){
const _this = this
//2.bind是什么?
const args = Array.prototype.slice.call(arguments) //把伪数组转成数组
// const args = [...arguments].slice(1) //把伪数组转成数组，并取出第一项
// 输入:args特点，第一项是新this，第二项~最后一项函数传参
const newThis = args.shift() //取出数组中的第一项
// 返回:返回的是一个函数 =>构造一个函数 =>这个函数返回原函数的结果且继承传参
return _this.newApply(newThis, args)
}
Function.prototype.newApply = function(context){
//边缘检测
if (typeof this !== 'function') {
throw new TypeError('使用正确的函数进行调用') //如果当前调用方不是函数没法往下执行
}
//如果传入为空报错，context为新的上下文，如果没传默认在window上执行
context = context || window
// 执行函数的替换
context.fn = this //指向当前执行的对象
// 临时挂载指向fn => 销毁临时挂载
let result = arguments[1]
? context.fn(...arguments[1])
: context.fn()
delete context.fn
//返回结果
return result
}闭包
function mail(){
let content = 'mail'
return function(){
console.log(content)
}
}
const envelop = mail()
envelop()
//局部变量content逃逸到了外部闭包的含义：函数内部作用域以函数包裹的形式传递到外部，使内部作用域的变量逃逸到外部。
函数可以使JS产生封闭作用域，这JS模块的基石
闭包可以使模块返回变量，让JS真正实现模块化
