JavaScript的标准是 ECMAScript 。截至 2012 年，所有浏览器都完整的支持ECMAScript 5.1，旧版本的浏览器至少支持 ECMAScript 3 标准。2015年6月17日，ECMA国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015，但通常被称为 ECMAScript 6 或者ES2015。 到现在更新到了 ECMAScript 2022(ES13)。ES6 中新特性最多，后面的版本则每次进行少量更新。

作用域

作用域规定了如何查找变量，也就是确定当前执行代码对变量的访问权限。

JavaScript 采用词法作用域(lexical scoping)，也就是静态作用域，函数的作用域在函数定义的时候就决定了。而在动态作用域中，函数的作用域是在函数调用的时候才决定的。

《JavaScript权威指南》中的例子

var scope = "global scope";
function checkscope(){var scope = "local scope";function f(){return scope;}return f();
}
checkscope(); // => local scope

由于JavaScript采用的是词法作用域，函数的作用域基于函数创建的位置。这里 f 函数创建在 checkscope 函数内部，所以当 f 函数找不到 scope 时，会向当前作用域，即在 checkscope 函数内部查找 scope

《JavaScript权威指南》的回答就是：

JavaScript 函数的执行用到了作用域链，这个作用域链是在函数定义的时候创建的。嵌套的函数 f() 定义在这个作用域链里，其中的变量 scope 一定是局部变量，不管何时何地执行函数 f()，这种绑定在执行 f() 时依然有效。

另外一个简单的例子

var value = 1;function foo() {console.log(value);
}function bar() {var value = 2;foo();
}bar(); // => 1

执行 foo 函数，先从 foo 函数内部查找是否有局部变量 value，如果没有，就根据书写的位置，查找上面一层的代码，也就是 value = 1，所以结果会打印 1。即函数的作用域在函数定义的时候就决定了。

tips: 参考 https://juejin.cn/column/7035531575974592520

执行上下文

可执行代码
JS中分为3种：全局代码、函数代码、eval 代码。
当执行到一个函数的时候，就会创建执行上下文(execution context)
执行上下文栈
JavaScript 引擎创建了执行上下文栈（Execution context stack，ECS）来管理执行上下文我们定义执行上下文栈是一个数组:ECStack = [];

JS 开始要解释执行代码的时候，最先遇到的就是全局代码，所以初始化的时候首先就会向执行上下文栈压入一个全局执行上下文，我们用 globalContext 表示它，并且只有当整个应用程序结束的时候，ECStack 才会被清空。

我们来分析下面代码:

function fun3() {console.log('fun3')
}function fun2() {fun3();
}function fun1() {fun2();
}fun1();

当执行一个函数的时候，就会创建一个执行上下文，并且压入执行上下文栈，当函数执行完毕的时候，就会将函数的执行上下文从栈中弹出。

// fun1()
ECStack.push( functionContext);// fun2
ECStack.push( functionContext);// fun3
ECStack.push( functionContext);// fun3执行完毕
ECStack.pop();// fun2执行完毕
ECStack.pop();// fun1执行完毕
ECStack.pop();

对于每个执行上下文，都有三个重要属性：

• 变量对象(Variable object，VO)
• 作用域链(Scope chain)
• this

变量对象
变量对象是与执行上下文相关的数据作用域，存储了在上下文中定义的变量和函数声明。变量对象中又可分为全局上下文下的变量对象和函数上下文下的变量对象。

• 全局上下文下的变量对象：全局上下文中的变量对象就是全局对象。

1.在客户端 JavaScript 中，全局对象就是 Window 对象，可以通过 this 引用。

console.log(this); // window

2.全局对象是由 Object 构造函数实例化的一个对象。

console.log(this instanceof Object);

3.作为全局变量的宿主。

var a = 1;
console.log(this.a);

4.客户端 JavaScript 中，全局对象有 window 属性指向自身。

var a = 1;
console.log(window.a);this.window.b = 2;
console.log(this.b);

• 函数上下文下的变量对象

在函数上下文中，我们用活动对象(activation object, AO)来表示变量对象。活动对象和变量对象其实是一个东西，只是变量对象是规范上的或者说是引擎实现上的，不可在 JS 环境中访问，只有到当进入一个执行上下文中，这个执行上下文的变量对象才会被激活，所以才叫 activation object ，而只有被激活的变量对象，也就是活动对象上的各种属性才能被访问。

活动对象是在进入函数上下文时刻被创建的，它通过函数的 arguments 属性初始化。arguments 属性值是 Arguments 对象。

通过var声明的变量才被放入AO中，也会出现变量提升

执行过程

1. 进入执行上下文

当进入执行上下文时，这时候还没有执行代码，变量对象会包括：

• 函数的所有形参 (如果是函数上下文)
  • 由名称和对应值组成的一个变量对象的属性被创建
  • 没有实参，属性值设为 undefined
• 函数声明
  • 由名称和对应值（函数对象(function-object)）组成一个变量对象的属性被创建
  • 如果变量对象已经存在相同名称的属性，则完全替换这个属性
• 变量声明
  • 由名称和对应值（undefined）组成一个变量对象的属性被创建；
  • 如果变量名称跟已经声明的形式参数或函数相同，则变量声明不会干扰已经存在的这类属性

举个例子：

function foo(a) {console.log(b) //undefinedvar b = 2;function c() {} // 函数var d = function() {}; // 变量var c = 1 // 不影响cb = 3;}foo(1);

在进入执行上下文后，这时候的 AO 是：

AO = {arguments: {0: 1,length: 1},a: 1,b: undefined,c: reference to function c(){},d: undefined
}

2. 代码执行

在代码执行阶段，会顺序执行代码，根据代码，修改变量对象的值，当代码执行完后，这时候的 AO 是：

AO = {arguments: {0: 1,length: 1},a: 1,b: 3,c: reference to function c(){},d: reference to FunctionExpression "d"
}

• 全局上下文的变量对象初始化是全局对象

• 函数上下文的变量对象初始化只包括 Arguments 对象

• 在进入执行上下文时会给变量对象添加形参、函数声明、变量声明等初始的属性值

• 在代码执行阶段，会再次修改变量对象的属性值

作用域链
当查找变量的时候，会先从当前上下文的变量对象中查找，如果没有找到，就会从父级(词法层面上的父级)执行上下文的变量对象中查找，一直找到全局上下文的变量对象，也就是全局对象。这样由多个执行上下文的变量对象构成的链表就叫做作用域链。

函数有一个内部属性 [[scope]]，当函数创建的时候，就会保存所有父变量对象到其中。当函数激活时，进入函数上下文，创建 VO/AO 后，就会将活动对象添加到作用链的前端。这时候执行上下文的作用域链，我们命名为 Scope。

函数执行上下文中作用域链和变量对象的创建过程：

var scope = "global scope";
function checkscope(){var scope2 = 'local scope';return scope2;
}
checkscope();

1. checkscope 函数被创建，保存作用域链到内部属性 [[scope]]

checkscope.[[scope]] = [globalContext.VO
];

2. 执行 checkscope 函数，创建 checkscope 函数执行上下文，checkscope 函数执行上下文被压入执行上下文栈

ECStack = [checkscopeContext,globalContext
];

3. checkscope 函数并不立刻执行，开始做准备工作，第一步：复制函数 [[scope]] 属性创建作用域链

checkscopeContext = {Scope: checkscope.[[scope]],
}

4. 第二步：用 arguments 创建活动对象，随后初始化活动对象，加入形参、函数声明、变量声明

checkscopeContext = {AO: {arguments: {length: 0},scope2: undefined}，Scope: checkscope.[[scope]],
}

5. 第三步：将活动对象压入 checkscope 作用域链顶端

checkscopeContext = {AO: {arguments: {length: 0},scope2: undefined},Scope: [AO, [[Scope]]]
}

6. 准备工作做完，开始执行函数，随着函数的执行，修改 AO 的属性值

checkscopeContext = {AO: {arguments: {length: 0},scope2: 'local scope'},Scope: [AO, [[Scope]]]
}

7. 查找到 scope2 的值，返回后函数执行完毕，函数上下文从执行上下文栈中弹出

ECStack = [globalContext
];

在源代码中当定义（书写）一个函数的时候（并未调用），js引擎也能根据函数书写的位置，函数嵌套的位置，生成一个 [[scope]]，作为该函数的属性存在（这个属性属于函数的）。

然后进入函数执行阶段，生成执行上下文，执行上下文可以宏观的看成一个对象，（包含vo,scope,this），此时，执行上下文里的scope(作用域链)和之前属于函数的那个 [[scope]] 不是同一个，执行上下文里的scope，是在之前函数的[[scope]]的基础上，又新增一个当前的AO对象构成的。

函数定义时候的[[scope]]和函数执行时候的scope，前者作为函数的属性，后者作为函数执行上下文的属性。

JS执行上下文全过程见 https://blog.csdn.net/by6671715/article/details/105241528

this 指向

var obj = {a: 1,b: function(){console.log(this);}}

1. 作为对象调用时，指向该对象 obj.b(); // 指向obj
2. 作为函数调用, var b = obj.b; b(); // 指向全局window
3. 作为构造函数调用 var b = new Fun(); // this指向当前实例对象
4. 作为call与apply调用 obj.b.apply(object, []); // this指向当前的object

bind，apply，call

• bind 创建一个新的函数，不自动执行

function fun() {console.log(this.name, arguments);
}
let obj = {name: 'alex'}
let b = fun.bind(obj, 'others')
b('another')

• apply 接收一个包含多个参数的数组

function fun() {console.log(this.name, arguments);
}
let obj = {name: 'alex'}
fun.apply(obj, ['other'])

• call 接收一个参数列表

function fun() {console.log(this.name, arguments)
}
let obj = { name: 'alex' }
fun.call(obj, 'other')

闭包

MDN 闭包

闭包（closure）是一个函数以及其捆绑的周边环境状态，让开发者可以从内部函数访问外部函数的作用域。在 JavaScript 中，闭包会随着函数的创建而被同时创建。

经典例子

Helpful notes will appear here
E-mail: 
Name: 
Age: 
function showHelp(help) {document.getElementById('help').innerHTML = help;
}function setupHelp() {var helpText = [{'id': 'email', 'help': 'Your e-mail address'},{'id': 'name', 'help': 'Your full name'},{'id': 'age', 'help': 'Your age (you must be over 16)'}];for (var i = 0; i < helpText.length; i++) {var item = helpText[i];document.getElementById(item.id).onfocus = function() {showHelp(item.help);}}
}setupHelp(); // 将全部提示 'Your age (you must be over 16)'

赋值给 onfocus 的是闭包，这些闭包是由他们的函数定义和在 setupHelp 作用域中捕获的环境所组成的。这三个闭包在循环中被创建，但他们共享了同一个词法作用域，在这个作用域中存在一个变量 item。这是因为变量 item 使用 var 进行声明，由于变量提升，所以具有函数作用域。当 onfocus 的回调执行时，item.help 的值被决定。由于循环在事件触发之前早已执行完毕，变量对象 item（被三个闭包所共享）已经指向了 helpText 的最后一项。

解决办法1：

// 嵌套闭包
function makeHelpCallback(help) {return function() {showHelp(help);};
}
document.getElementById(item.id).onfocus = makeHelpCallback(item.help)

解决办法2：

// 立即执行函数(匿名闭包)
(function() {var item = helpText[i];document.getElementById(item.id).onfocus = function() {showHelp(item.help);}
})(); 

解决办法3：

// 使用 let 避免 var 变量提升
for (let i = 0; i < helpText.length; i++) {//...
}

原型

__proto__

每个JavaScript对象(除了 null )都具有的一个属性，这个属性会指向该对象的原型。

function Person() {
}
var person = new Person();
console.log(person.__proto__ === Person.prototype); // true

function Person(name, age) {this.name = name;this.age = age;
}const person = new Person('Alex', 16);
// Person 类型实例的原型，默认也是一个空对象
console.log(person.__proto__); // => Person {}
//es6 新方法
console.log({}.__proto__ === Object.getPrototypeOf({})); // true

可以直接修改对象的原型，不过被设置的值的类型只能是对象或者 null，其它类型不起作用:

const obj = { name: 'Alex' };
console.log(obj.__proto__); // {constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}obj.__proto__ = 666;
// 非对象和 null 不生效
console.log(obj.__proto__ === Object.prototype); // trueobj.__proto__ = null;
// 设置为 null 返回 undefined
console.log(obj.__proto__=== Object.prototype); // false// 设置原型为对象
obj.__proto__ = { constructor: 'Function Student' };
console.log(obj.__proto__); // { constructor: 'Function Student' }

如果被设置的值是不可扩展的，将抛出 TypeError：

const frozenObj = Object.freeze({});
// Object.isExtensible(obj) 可以判断 obj 是不是可扩展的
console.log(Object.isExtensible(frozenObj)); // => false
frozenObj.__proto__ = null; // => TypeError: #