深入理解javascript原型和閉包

原文鏈接http://www.cnblogs.com/wangfupeng1988/p/3977924.html

對象是屬性的集合。

function show(x) {console.log(typeof(x));    // undefinedconsole.log(typeof(10));   // numberconsole.log(typeof('abc')); // stringconsole.log(typeof(true));  // booleanconsole.log(typeof(function () { }));  //functionconsole.log(typeof([1, 'a', true]));  //objectconsole.log(typeof ({ a: 10, b: 20 }));  //objectconsole.log(typeof (null));  //objectconsole.log(typeof (new Number(10)));  //object}
show();

以上代碼列出了typeof輸出的集中類型標識，其中上面的四種（undefined, number, string, boolean）屬于簡單的值類型，不是對象。剩下的幾種情況——函數、數組、對象、null、new Number(10)都是對象。他們都是引用類型。
判斷一個變量是不是對象非常簡單。值類型的類型判斷用typeof，引用類型的類型判斷用instanceof。

對象都是通過函數來創建的

函數就是對象的一種，因為通過instanceof函數可以判斷。

var fn = function () { };
console.log(fn instanceof Object);  // true

var obj = { a: 10, b: 20 };
var arr = [5, 'x', true];

這是種語法糖，是一種快捷方式。真實代碼是：

//var obj = { a: 10, b: 20 };//var arr = [5, 'x', true];var obj = new Object();obj.a = 10;obj.b = 20;var arr = new Array();arr[0] = 5;arr[1] = 'x';arr[2] = true;

而其中的 Object 和 Array 都是函數。說明一切對象都是由函數創建的。
對象是函數創建的，而函數卻又是一種對象

typeof(Array)//"function"
typeof([1,2])//"object",[1,2]其實是new Array();
typeof(function() {})//"function"

prototype原型

函數有prototype屬性，對象有_proto_屬性。
每個函數都有一個屬性叫做prototype。這個prototype的屬性值是一個對象（屬性的集合，再次強調！），默認的只有一個叫做constructor的屬性，指向這個函數本身。
如上圖，SuperType是是一個函數，右側的方框就是它的原型。

接著往下說，你也可以在自己自定義的方法的prototype中新增自己的屬性

function Fn() { }
Fn.prototype.name = '王福朋';
Fn.prototype.getYear = function () {return 1988;
};

還有一種很容易被混淆的定義函數方法：

var func = function() {}
func.prototype.name = "prototype test";
func.prototype.protoFunc = function() {console.log("protoFunc")};
func.a = function() {console.log("定義對象的屬性")}
func.a();//func是個對象，func是個引用。
var funcObject = new func();
console.log(new func(), "new func()");//function() {}
console.log(funcObject, "funcObject");//function() {}
funcObject.name;
funcObject.protoFunc();
funcObject.a();//funcObject.a is not a function(…)，//func是個對象，有a這個屬性，
//funcObject是個對象，但是a不是funcObject的屬性。func的所有prototype的屬性就是funcObject的屬性。

function Fn() {};
Fn.prototype.protoFunc = function() {return "aa";console.log("protoFunc")};
Fn.a = function() {}
var fn= new Fn();
fn.protoFunc() //"aa"
fn.a();//FnObject 不是Fn對象，所以a()方法沒定義。

即，Fn是一個函數，fn對象是從Fn函數new出來的，這樣fn對象就可以調用Fn.prototype中的屬性。
因為每個對象都有一個隱藏的屬性——“__proto__”，這個屬性引用了創建這個對象的函數的prototype。即：fn.__proto__ === Fn.prototype.這里的"__proto__"成為“隱式原型”

繼承(原型鏈)

function Foo() {}
var f1= new Foo();
f1.a = 10
Foo.prototype.a = 100;
Foo.prototype.b = 200;
console.log(f1.a)//10
console.log(f1.b)//200

f1是Foo函數new出來的對象，f1.a是f1對象的基本屬性，f1.b是怎么來的呢？——從Foo.prototype得來，因為f1.__proto__指向的是Foo.prototype
訪問一個對象的屬性時，先在基本屬性中查找，如果沒有，再沿著__proto__這條鏈向上找，這就是原型鏈。

靈活的原型鏈

如果你要添加內置方法的原型屬性，最好做一步判斷，如果該屬性不存在，則添加。如果本來就存在，就沒必要再添加了。

繼承--原型鏈

理解這張圖有以下幾點：
1.一切皆對象，所以每個對象都有_proto_屬性，_proto_屬性指向創建該對象的函數的prototype。
2.prototype的屬性值是一個對象（默認的只有一個叫做constructor的屬性，指向這個函數本身）。所以各函數的prototype也有_proto_屬性。
3.Object函數的_proto_只想null。
4.var Foo = new Function();則Foo._proto_指向Function.prototype.
5.function Function(){}是有它自己創造的，所有Function._proto_指向Function.prototype.

執行上下文

在“準備工作”中完成了哪些工作：

console.log(a)//a is not definedconsole.log(a)//undefined
var a;console.log(a)//undefined
var a = 10;console.log(a)//function a() {}函數聲明
function a() {}console.log(a)//undefined 函數表達式
var a = function(){}console.log(this)//Window {external: Object, chrome: Object, document: document, lock: Object, SF: Object…} 
//this在任意環境下都有值

變量、函數表達式--變量聲明，默認賦值為undefined；
this——賦值
函數聲明——賦值；
這三種數據的準備情況我們稱之為“執行上下文”或者“執行上下文環境”。

給執行上下文環境下一個通俗的定義——在執行代碼之前，把將要用到的所有的變量都事先拿出來，有的直接賦值了，有的先用undefined占個空。

this

在函數中this到底取何值，是在函數真正被調用執行的時候確定的，函數定義的時候確定不了。因為this的取值是執行上下文環境的一部分，每次調用函數，都會產生一個新的執行上下文環境。
情況1：構造函數
所謂構造函數就是用來new對象的函數。其實嚴格來說，所有的函數都可以new一個對象，但是有些函數的定義是為了new一個對象，而有些函數則不是。另外注意，構造函數的函數名第一個字母大寫（規則約定）。例如：Object、Array、Function等。

function Foo() {this.name = "name";this.year = "year";console.log(this);
}var f1 = new Foo();//Foo {name: "name", year: "year"}
Foo();//Window {external: Object, chrome: Object, document: document, lock: Object, SF: Object…}

如果函數作為構造函數用，那么其中的this就代表它即將new出來的對象。
如果直接調用Foo函數，而不是new Foo()，這種情況下this是window。

情況2：函數作為對象的一個屬性

var obj = {x:10,fn:function(){console.log(this);    console.log(this.x);}
}var fn1 = obj.fn;
fn1();//Window {external: Object, chrome: Object, document: document, lock: Object, SF: Object…} undefined
obj.fn();//Object {x: 10}  10

fn不僅作為一個對象的一個屬性，而且的確是作為對象的一個屬性被調用。結果this就是obj對象。
注意，如果fn函數不作為obj的一個屬性被調用。如上代碼，如果fn函數被賦值到了另一個變量中，并沒有作為obj的一個屬性被調用，那么this的值就是window，this.x為undefined。

情況3：函數用call或者apply調用
當一個函數被call和apply調用時，this的值就取傳入的對象的值。

var obj = {x : 1
}var fn = function() {console.log(this);console.log(this.x);
}fn.call(obj);//Object {x: 1} 1

情況4：調用普通函數

var obj = {x:10,fn:function(){console.log(this);    //Object {x: 10}console.log(this.x);    //10function f() {console.log(this);    // Window {external: Object, chrome: Object, document: document, lock: Object, SF: Object…}console.log(this.x);//undefined}f();}
}obj.fn();

函數f雖然是在obj.fn內部定義的，但是它仍然是一個普通的函數，this仍然指向window。

簡介【作用域】

你光知道“javascript沒有塊級作用域”是完全不夠的，你需要知道的是——javascript除了全局作用域之外，只有函數可以創建的作用域。
所以，我們在聲明變量時，全局代碼要在代碼前端聲明，函數中要在函數體一開始就聲明好。除了這兩個地方，其他地方都不要出現變量聲明。而且建議用“單var”形式。
jQuery源碼的最外層是一個自動執行的匿名函數：

為什么要這樣做呢？

原因就是在jQuery源碼中，聲明了大量的變量，這些變量將通過一個函數被限制在一個獨立的作用域中，而不會與全局作用域或者其他函數作用域的同名變量產生沖突。
全世界的開發者都在用jQuery，如果不這樣做，很可能導致jQuery源碼中的變量與外部javascript代碼中的變量重名，從而產生沖突。

閉包

但是你只需要知道應用的兩種情況即可——函數作為返回值，函數作為參數傳遞。

function fn(){var max = 10;return function bar(x){if(x > max) {console.log(x);}};
}var f1 = fn();
f1(15);//15

如上代碼，bar函數作為返回值，賦值給f1變量。執行f1(15)時，用到了fn作用域下的max變量的值。

第二，函數作為參數被傳遞

var max = 10;
fn = function(x){if(x > max) {console.log(x);}
};(function(f) {var max = 100;f(15);//15
})(fn);

如上代碼中，fn函數作為一個參數被傳遞進入另一個函數，賦值給f參數。執行f(15)時，max變量的取值是10，而不是100。
自由變量跨作用域取值時，要去創建這個函數的作用域取值，而不是“父作用域”。
當一個函數被調用完成之后，其執行上下文環境將被銷毀，其中的變量也會被同時銷毀。但是有些情況下，函數調用完成之后，其執行上下文環境不會接著被銷毀。這就是需要理解閉包的核心內容。
對于這個例子

function fn(){var max = 10;return function bar(x){if(x > max) {console.log(x);}};
}var f1 = fn();
max = 100;
f1(15);//15

fn()調用完成。按理說應該銷毀掉fn()的執行上下文環境，但是這里不能這么做。注意，重點來了：因為執行fn()時，返回的是一個函數。函數的特別之處在于可以創建一個獨立的作用域。而正巧合的是，返回的這個函數體中，還有一個自由變量max要引用fn作用域下的fn()上下文環境中的max。因此，這個max不能被銷毀，銷毀了之后bar函數中的max就找不到值了。

總結：跟著大牛的文章，跟著理解，跟著寫代碼，終于把閉包理解了。但是，理論是學到了，真正用的時候還得要多思考。這種邏輯的碰撞就是程序員向前最大的鼓勵。謝謝大牛。
寫給自己的話：過早地開始關注細節，你很可能錯失上下文或整體信息。當然，錯失了細節，也會讓你的理解僅僅停留在一些事物的表面。