作用域链
js拥有全局作用域（window）、函数作用域、块级作用域（es6）。
块级作用域是es6开始才拥有的，因为es6中以let定义的变量才拥有块级作用域。
es5以及更早，JS是没有块级作用域的。
// es5
f(true) {
var a = 1;
}
console.log(a) // 1
// es6
if(true) {
let c = 1;
}
console.log(c) // Uncaught ReferenceError: c is not defined
作用域的作用就是将定义的变量限制在某个范围，从而对这些定义的变量起到范围限制作用。
在代码书写上，函数的大括号、定义let变量的大括号就是这些变量的访问范围，也就是说出了这个大括号，理论上就找不到这些变量了。
但是因为引用类型的特殊原因，比如有一个函数，内部定义了一个变量var a = {a:123};通过return a，这样操作，在函数外面也可以引用这个对象a。这样是不是就形成了闭包呢？答案不是，只有函数才会形成闭包。
提个问题，对象的大括号，里面是不是一个作用域呢？答案：不是。
还是上面那句话，js以函数划分作用域，es6之后，let定义的变量在大括号内可以形成块级作用域。
代码：
var a=3;
var object = {
a:2,
run: function() {
alert(this.a);//2
alert(a);//3
}
};
object.run();
如果object大括号也是一个作用域，两个a都应该打印2，但是下面的a,打印的是3。
为什么打印的是3呢？
刚才有句话，作用域的作用就是限制定义的变量访问范围的，记住是变量的访问范围。
当运行run()函数的时候，
第一步，代码会在函数作用域内部查找this，this指向object，打印object.a属性的值
第二步，代码会在函数作用域内部查找a，发现该函数作用域不存在a，继续往上一个作用域查找，run函数的上一个作用域是全局作用域，发现全局作用域下有一个a=3，所以打印的值就是3，如果全局作用域也不存在该变量，就会报错。
注意是报错，而不是undefined，定义了变量而没有赋值，它的值才是undefined，如果一个变量根本没定义，直接使用就会报错。
当查找一个变量时，如果当前作用域没找到该变量，代码会继续往上一个作用域查找（可以理解为更大的大括号），直到最外层的全局作用域为止，这就是所谓的作用域链。
原型链
js的原型是通过函数的prototype属性来实现的，每一个函数都一个隐藏属性prototype，普通对象是没有prototype属性的，比如： let a = {}。
原型链是通过另一个隐藏属性[[prototype]]或者叫proto来实现的，每一个对象都有这个隐藏属性。
代码：
Object.prototype.objCustom = function() {};
Object.prototype.arrCustom = 123
Array.prototype.arrCustom = function() {};
function a() {
let arr = [3, 5, 7];
arr.foo = 'hello';
console.log(arr.objCustom, arr.arrCustom)
}
a()
//打印： function(){} function(){}
为什么变量arr能找到Object、Array的prototype属性呢？
分析一下代码：
执行a方法的时候，
第一步，定义变量arr
第二步，赋值，添加foo属性
第三步，查找需要打印的变量arr
首先在函数作用域中查找，是存在该变量的，接着找arr是不是存在objCustom和arrCustom两个属性，变量arr本身是没有这个两个属性，但是它是一个Array类型的变量，于是它通过原型链proto找到Array.prototype，在Array.prototype是存在属性arrCustom，找到后，不会继续查找该属性。
但是objCustom属性在Array.prototype中也不存在，但是Array.prototype也是一个对象，里面也存在一个proto，所以继续查找，找到了最顶层的Object.prototype，此时终于找到objCustom属性，如果没找到，打印undefined。
这个查找对象属性的过程，就是原型链，通过proto实现的。
总结一下，找变量，会涉及到作用域链；找对象属性，涉及的是原型链。
网友评论