《深入理解javascript原型和闭包系列》 知识点整理
深入理解javascript原型和闭包系列 对原型和闭包等相关知识的讲解，由浅入深，通俗易懂，每个字都值得细细研究。
一、一切都是对象
1. typeof操作符输出6种类型：string boolean number undefined function object
2. 数组、null object都是object类型
3. 对象：若干属性的集合。js中，数组是对象，函数是对象，对象是对象
4. 函数和对象的关系：
1. 函数生成对象：通过new构造函数生成实例对象
2. 函数是一种对象：
1. 所有的函数都有一个prototype（原型）属性，是一个对象，这个对象中默认的存在一个constructor属性指向函数本身。
2. 每个对象都有一个隐藏的属性:`__proto__`，指向创建这个对象的构造函数的prototype
3. 函数也是对象，当然也有`__proto__`属性，指向Function.prototype(大写Function的原型)
4. 总结：
1. 自定义构造函数(也是对象)的`__proto__`指向Function.prototype;
2. Object.`__proto__`也指向Function.protorype;
3. Function.`__proto__`指向Function.prototype(Function这个对象，当然是被Function函数自身创建的，所以指向自身的prototype)
5. Function.prototype这个对象，是被Object创建的对象，它的隐藏`__proto__`属性，指向Object.prototype，最后，Object.prototype指向Null！
二、 继承
1. 访问一个对象的属性时，先在基本属性中查找，如果没有找到，沿着`__proto__`这个属性（指向构造函数的prototype）往上找
2. 实际应用中如何区分一个属性是自有的还是在原型中的呢？——obj.hasOwnProperty(proName)
3.每个函数都有call、apply方法，length、arguments等属性，肯定是继承的，都是继承自Function.prototype
4. 原型的灵活性：
在Java和C#中，你可以简单的理解class是一个模子，对象就是被这个模子压出来的一批一批月饼。
压个啥样，就得是个啥样，不能随便动，动一动就坏了。
而在javascript中，就没有模子了，月饼被换成了面团，你可以捏成自己想要的样子。
三、执行上下文
1. **一段代码**在正真一行一行执行前，浏览器事先做了准备工作：
1. 对变量的**声明**，但不赋值，赋值是在执行到赋值语句时进行的
2. 直接对this进行**赋值**
3. 函数：
1. 函数声明：function foo(){} //把函数名赋值了！
2. 函数表达式： var foo = function(){} //由于是var的变量，与第一种情况一样，只声明，不赋值
4. 总结：
1. var出来的变量，函数表达式，只声明，不赋值，默认undefined
2. this：赋值
3. 函数声明：赋值
2. 执行**代码段**前的这个准备工作，就叫做执行上下文/上下文环境/执行环境
3. 这个**代码段**其实又分为三种情况：
1. 全局代码
2. eval()
3. 函数【重点↓】
4. 函数代码段中的执行上下文有这些数据：
1. var 出来的变量只声明，没赋值
2. this和函数声明已经赋值
3. 特殊的地方：
1. arguments变量和函数的参数都已经被赋值
function foo(x){ console.log(arguments); console.log(x); } foo(10); //在进入函数体内部开始执行之前，函数体内部的arguments和参数x已经被赋值了
2. **自由变量的取值作用域：赋值**
5. 由此可知，函数每调用一次，都会产生一个新的执行上下文环境，因为不同的调用可能会有不同的参数传入
6. 函数在定义的时候（不是调用的时候），就已经确定了函数体内部**自由变量**的**作用域**
var a =10; function fn(){ console.log(a); //本函数在创建的时候就决定了这个a要取值的作用域：全局作用域 } function bar(f){ var a = 20; f(); } bar(fn); //10
7. 关于this的一点小问题
var obj = { x:10, fn:function(){ function f(){ console.log(this); console.log(this.x); } f(); } }; obj.fn(); //this指window /* obj.fn保存了指向 function(){ function f(){ console.log(this); console.log(this.x); } f(); } 的指针，加一个(): =>obj.fn()表示开始调用： function f(){ console.log(this); console.log(this.x); } f(); 这个f函数在window环境调用执行，所以this指向window */
8. 上下文环境的执行顺序
1. 执行全局代码时，会产生一个全局上下文环境。
2. 每次调用函数时，会产生函数内部的执行上下文环境。
3. 当函数调用完成时，这个上下文环境以及其中的数据都会被消除，再重新回到全局上下文环境。
4. 处于活动状态的执行上下文环境只有一个。
var a=10; function bar(x){ var b = 5; fn(x+b); }; function fn(y){ var c = 5; console.log(y+c); }; bar(10); ----------------解析---------------------- /* 1. 产生全局上下文执行环境,该声明的声明，该赋值的赋值 1. a = 10 ； fn = function(); bar = function() 2. 到调用bar(10)函数时，进入bar函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值 1. b = 5; x = 10; arguments = [10] 3. 接着调用fn函数，进入fn函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值 2. c = 5 ; y = 15; 4. fn函数执行完毕，它对应的上下文执行环境都会被销毁，里面保存的数据都没有了 5. bar函数同样如此，它对应的上下文执行环境都会被销毁，数据清除 */
四、自由变量和作用域
1. 作用域：javascript除了全局作用域之外，只有函数可以产生作用域。所以，在声明变量时，全局代码要在代码前端声明，函数中要在函数体一开始就声明好。除了这两个地方，其他地方都不要出现变量声明。而且建议用“单var”形式。
2. 作用域就是一个地盘，最大的用处就是隔离变量，使不同作用域下相同的变量名不会产生冲突
3. 每个函数都会创建自己的作用域，作用域在函数**定义**的时候就已经确定了，而不是在调用的时候确定
var a = 10,b=20; function fn(x){ var a =100, c = 300; function bar(x){ var a = 1000,d = 4000; console.log(x); console.log(a); console.log(b); console.log(c); console.log(d); } bar(100); bar(200); } fn(10); ----------------------解析：-------------------------- /* 1. 产生全局上下文执行环境,该声明的声明，该赋值的赋值 1. a = 10; b=20; fn = function(); 2. 到调用fn(10)函数时，进入fn函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值 1. a = 100 ; c = 300 ; x = 10 ; arguments = [10] ; bar = function() 3. 到调用bar(100)函数时，进入bar函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值 1. a = 1000 ; d = 4000 ; x = 100; 4. 到调用bar(200)函数时，进入bar函数内部，产生函数内部的执行上下文环境，该声明的声明，该赋值的赋值 1. a = 1000 ; d = 4000 ; x = 200; 2. 与bar(100)函数相比较，同一个作用域，不同的调用，产生不同的执行上下文环境 5. 总结： 1. 作用域只是一个“地盘”，一个抽象的概念，其中没有变量。 2. 要通过作用域对应的执行上下文环境来获取变量的值。 3. 同一个作用域下，不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值。 4. 作用域中变量的值是在执行过程中产生的确定的，而作用域却是在函数创建时就确定了。 5. 所以，如果要查找一个作用域下某个变量的值，就需要找到这个作用域对应的执行上下文环境，再在其中寻找变量的值。 */
4. 自由变量：在函数内部中使用的变量x，却没有在函数内部声明，也就是在其他作用域中声明的，对这个函数来说，x就是自由变量
var x= 10; function fn(){ var b = 20; console.log(x+b); //x就是自由变量 } /* 1. b从本作用域中取，x就要到另外的作用域中取, 2. 是到fn的父级作用域取吗？不是的！ */ --------------------分割线--------------------------- var x= 10; function fn(){ console.log(x); } function show(f){ var x = 20; function foo(){ f(); //10 } foo(); } show(fn); //因此：要到创建这个函数的那个作用域中取值——是“创建”，而不是“调用”，切记切记。 //创建fn函数的作用域是window，所以，x = 10； /* 总结一下： 1. 先在当前作用域查找变量x，没有找到则继续； 2. 如果当前作用域是全局作用域，则证明x未定义，结束；否则继续； 3. 不是全局作用域，那就是函数作用域，将**创建该函数的作用域**作为当前作用域； 4. 跳到第一步循环…… */
5. 必须多次重复强调：要去**创建**这个函数的作用域取值，而不是“父作用域”。
五、最后的闭包：
1. 一般情况下，当一个函数被调用完成之后，其执行上下文环境将被销毁，其中的变量也会被同时销毁。
2. 但有些情况下，函数调用完，其执行上下文环境没有销毁，其中的变量也还在内存中，这就是闭包的核心内容。
function fn(){ var max = 10 ; return function bar(x){ if(x>max){console.log(x);} }; } var f1 = fn(),max = 100 ; f1(15); ----------------解析：--------------------- /* 1. 执行所有代码前，先生成全局上下文执行环境，该声明的声明，该赋值的赋值 1. fn = function() ; f1 = undefined ; max = 100; 2. 执行fn()函数，进入fn函数的上下文执行环境，声明、赋值 1. max = 10 ； bar = function() ; 2. 执行fn函数里的语句，把bar函数return出去，赋值给fn 3. 【重点】此时，fn函数执行完毕了，按理来说，fn的上下文执行环境应该被销毁，变量从内存清除，但在这里不能这么做！！ 1. 因为执行fn函数的过程中返回了一个bar函数，这个bar函数的特别之处在于， 它创建了一个自己独立的作用域。 2. 在bar函数内部，有一个max自由变量，如果自己没有，就要到创建这个函数的作用域中找，就是fn函数作用域中的max 3. 所以，这个max不能被销毁，fn函数的上下文执行环境不能被销毁，依然存在于执行栈中。 4. 也就是说，执行完var f1 = fn() ,max = 100;之后，全局上下文环境将变为活动状态，但是fn()上下文环境依然会在执行上下文栈中。 5. 创建bar函数是在执行fn函数时创建的。fn()早就执行结束了，但是fn()执行上下文环境还存在与栈中，里面的变量声明、赋值都还在， 6. 因此bar(15)时，max可以查找到。如果fn()上下文环境销毁了，那么max就找不到值了。 */
六、上下文环境和作用域的关系
1. 上下文环境：就是一个对象，里面保存了许多属性，所有变量都在这个对象里面存着。对于函数来说，上下文环境是在调用函数的时候创建
2. 作用域：是一个地盘，一个抽象的概念，规定了变量起作用的范围。除了全局作用域之外只有函数才能创建作用域，作用域在函数定义时确定，而不是在函数调用时确定。
3. 关系：
1. 要通过作用域对应的执行上下文环境来获取变量的值。
2. 同一个作用域下，不同的调用会产生不同的执行上下文环境，继而产生不同的变量的值。
3. 作用域中变量的值是在执行过程中产生的确定的，而作用域却是在函数创建时就确定了。
4. 如果要查找一个作用域下某个变量的值，就需要找到这个作用域对应的执行上下文环境，再在其中寻找变量的值。
