摘要：本文是本人閱讀學(xué)習(xí)深入理解原型和閉包時(shí)所作的總結(jié)和筆記，當(dāng)然也引用了很多原文，感興趣的朋友也可以直接去看原文。即這里的稱為隱式原型。注意，構(gòu)造函數(shù)的函數(shù)名第一個(gè)字母大寫規(guī)則約定。但實(shí)際上，上述情況是一種理想的情況。

本文是本人閱讀學(xué)習(xí)深入理解JavaScript原型和閉包時(shí)所作的總結(jié)和筆記，當(dāng)然也引用了很多原文，感興趣的朋友也可以直接去看原文。

先說(shuō)結(jié)論，一切引用類型都是對(duì)象，對(duì)象是屬性的集合。

首先我們對(duì)不同變量使用typeof()看看都有哪些輸出的類型。

console.log(typeof(x));                 // undefined
console.log(typeof(10));                // number
console.log(typeof("abc"));             // string
console.log(typeof(true));              // boolean
console.log(typeof(function () {}));    // function
console.log(typeof([1, "a", true]));    // object
console.log(typeof({ a: 10, b: 20 })); // object
console.log(typeof(null));             // object
console.log(typeof(new Number(10)));   // object

在以上代碼中，undefined, number, string, boolean屬于值類型，不是對(duì)象。
而其他的幾種類型 - 包括函數(shù)、數(shù)組、對(duì)象、null、new Number(10)都是對(duì)象，它們屬于引用類型。

在JavaScript中，數(shù)組是對(duì)象，函數(shù)是對(duì)象，對(duì)象還是對(duì)象。對(duì)象里面的一切都是屬性，只有屬性，沒有方法，或者說(shuō)方法也是一種屬性。屬性表示為鍵值對(duì)的形式。

JavaScript中的對(duì)象可以任意的擴(kuò)展屬性，定義屬性的方法通常有兩種。

var obj = {
  a = 10,
  b: function(x) {
    console.log(this.a + x)
  },
  c: {
    name: "Steven"，
    year: 1988
  }
}

上面這段代碼中，obj是一個(gè)自定義的對(duì)象，其中a、b、c是它的屬性，而屬性c的本身又是一個(gè)對(duì)象，它又有name、year兩個(gè)屬性。

函數(shù)和數(shù)組不能用上面的方法定義屬性，下面以函數(shù)為例：

var fn = function () {
  alert(100);
};
fn.a = 10;
fn.b = function () {
  alert(123);
};
fn.c = {
  name: "Steven",
  year: 1988
};

在jQuery源碼中，變量jQuery或者$其實(shí)是一個(gè)函數(shù)，我們可以用typeof()驗(yàn)證一下：

console.log(typeof ($));  // function
console.log($.trim(" ABC "));

很明顯，這就是在$或者jQuery函數(shù)上加了一個(gè)trim屬性，屬性值是函數(shù)，作用是截取前后空格。

上文已經(jīng)說(shuō)到，函數(shù)也是一種對(duì)象，我們可以用instanceof驗(yàn)證一下：

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

但是函數(shù)和對(duì)象的關(guān)系卻有一點(diǎn)復(fù)雜，請(qǐng)看下面這個(gè)例子：

function Fn() {
  this.name = "嚴(yán)新晨";
  this.year = 1990;
}
var fn_1 = new Fn();

由上面這個(gè)例子可以得出，對(duì)象是可以通過(guò)函數(shù)創(chuàng)建的。

但其實(shí)，對(duì)象都是通過(guò)函數(shù)創(chuàng)建的。

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

上面這種方式，其實(shí)是一個(gè)語(yǔ)法糖，而這段代碼的本質(zhì)是：

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都是函數(shù)：

console.log(typeof (Object));  // function
console.log(typeof (Array));  // function

由此可以得出，對(duì)象都是通過(guò)函數(shù)創(chuàng)建的。

每個(gè)函數(shù)都有一個(gè)默認(rèn)屬性 - prototype。

這個(gè)prototype的屬性值是一個(gè)對(duì)象，這個(gè)對(duì)象有一個(gè)默認(rèn)屬性 - constructor，這個(gè)屬性指向這個(gè)函數(shù)本身。

而原型作為一個(gè)對(duì)象，除了constructor之外，當(dāng)然可以有其他屬性，以函數(shù)Object為例，在瀏覽器調(diào)試窗口輸入Object.prototype會(huì)得到以下返回值：

Object
  ...
  constructor
  hasOwnProperty
  isPrototypeOfs
  toLocalString
  toString
  valueOf
  ...

同時(shí)，我們還可以為這個(gè)原型增添自定義方法或?qū)傩?/p>

function Fn(){}
Fn.prototype.name = "Steven"
Fn.prototype.getYear = function(){
  return 1988;
}

var fn = new Fn();
console.log(fn.name);
console.log(fn.getYear());

在上例中，Fn是一個(gè)函數(shù)，fn對(duì)象是從Fn函數(shù)中new出來(lái)的，這樣fn對(duì)象就可以調(diào)用Fn.prototype中的屬性。

每個(gè)對(duì)象都有一個(gè)隱藏的屬性 - __proto__，這個(gè)屬性引用了創(chuàng)建這個(gè)對(duì)象的函數(shù)的prototype。即：fn.__proto__ === Fn.prototype

這里的__proto__稱為“隱式原型”。

每個(gè)函數(shù)function都有一個(gè)prototype，即原型。

每個(gè)對(duì)象都有一個(gè)__proto__，可稱為隱式原型。

var obj = {}
console.log(obj.__proto__ === Object.prototype) // true

每個(gè)對(duì)象都有一個(gè)__proto__屬性，指向創(chuàng)建該對(duì)象的函數(shù)的prototype

function Foo(){}
Foo.__proto__ === Function.prototype // true
Object.__proto__ === Function.prototype // true 
Function.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true

注意，Object.prototype.__proto__是一個(gè)特例，它指向的是null

由于typeof在判斷引用類型時(shí)，返回值只有object或function，這時(shí)我們可以用到instanceof。

function Foo(){}
var f = new Foo()

console.log(f instanceof Foo) // true
console.log(f instanceof Object) // true

用法：A instanceof B，變量A是一個(gè)待判斷的對(duì)象，變量B通常是一個(gè)函數(shù)。

判斷規(guī)則：沿著A.__proto__和B.prototype查找，如果能找到同一個(gè)引用，即同一個(gè)對(duì)象，則返回true。

由以上判定規(guī)則，我們可以解釋許多奇怪的判定結(jié)果，例如：

Object instanceof Function // true
Function instanceof Object // true
Function instanceof Function // true

instanceof表示的是一種繼承關(guān)系 - 原型鏈

JavaScript中的繼承通過(guò)原型鏈來(lái)體現(xiàn)。

function Foo(){}
var f = new Foo()

f.a = 10

Foo.prototype.a = 100
Foo.prototype.b = 200

console.log(f.a) // 10
console.log(f.b) // 200

上例中，f是Foo函數(shù)new出來(lái)的對(duì)象，f.a是對(duì)象f的基本屬性，因?yàn)?b>f.__proto__ === Foo.prototype，所以f.b是從Foo.prototype中繼承而來(lái)的。

在JavaScript中，訪問一個(gè)對(duì)象的屬性時(shí)，先在基本屬性中查找，如果沒有，再沿著__proto__這條鏈向上找，這就是原型鏈

通過(guò)hasOwnProperty，我們可以判斷出一個(gè)屬性到底是基本屬性，還是從原型中繼承而來(lái)的。

function Foo(){}
var f_1 = new Foo()

f.a = 10

Foo.prototype.a = 100
Foo.prototype.b = 200

var item

for(item in f){
  console.log(item) // a b
}

for(item in f){
  if(f.hasOwnProperty(item){
    console.log(item) // a
  })
}

hasOwnProperty方法是從Object.prototype中繼承而來(lái)的

每個(gè)函數(shù)都有apply、call方法，都有length、arguments等屬性，這些都是從Function.prototype中繼承而來(lái)的

由于Function.prototype.__proto__指向Object.prototype，所以函數(shù)也會(huì)有hasOwnProperty方法

首先，對(duì)象屬性可以隨時(shí)改動(dòng)

其次，如果繼承的方法不合適，可以隨時(shí)修改

var obj = { a: 10, b: 20 }
console.log(obj.toString()) // [object Object]

var arr = [1, 2, true]
console.log(arr.toString()) // 1, 2, true

從上例中可以看出，Object和Array的toString()方法是不一樣的，肯定是Array.prototype.toString()作了修改。

同理，我們也可以自己定義一個(gè)函數(shù)并修改toString()方法。

function Foo(){}
var f = new Foo()

Foo.prototype.toString = function(){
  return "嚴(yán)新晨"
}

console.log(f.toString) // 嚴(yán)新晨

最后，如果缺少需要的方法，也可以自己創(chuàng)建

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

執(zhí)行上下文，也叫執(zhí)行上下文環(huán)境

console.log(a) // 報(bào)錯(cuò)，a is not undefined

console.log(a) // undefined
var a;

console.log(a) // undefined
var a  = 10;

console.log(this) // Window {...}

console.log(f_1) // function f_1({})
function f_1(){} // 函數(shù)聲明

console.log(f_2) // undefined
var f_2 = function(){} // 函數(shù)表達(dá)式

在js代碼執(zhí)行前，瀏覽器會(huì)先進(jìn)行一些準(zhǔn)備工作：

變量、函數(shù)表達(dá)式 - 變量聲明，默認(rèn)賦值為undefined；

this - 賦值；

函數(shù)聲明 - 賦值；

這三種數(shù)據(jù)的準(zhǔn)備工作我們稱之為“執(zhí)行上下文”或者“執(zhí)行上下文環(huán)境”。

JavaScript在執(zhí)行一個(gè)代碼段之前，都會(huì)進(jìn)行這些“準(zhǔn)備工作”來(lái)生成執(zhí)行上下文。這個(gè)“代碼段”其實(shí)分三種情況 - 全局代碼，函數(shù)體，eval代碼。

首先，全局代碼，寫在

var a = 10, // 1、進(jìn)入全局上下文環(huán)境
    fn,
    bar = function(x){
      var x = 5
      fn(x+b) // 3、進(jìn)入fn()函數(shù)上下文環(huán)境
    }

fn = function(y){
  var c = 5
  console.log(y+c)
}

bar() // 2、進(jìn)入bar()函數(shù)上下文環(huán)境

a === undefined
fn === undefined
bar === undefined
this === window

a === 10
fn === function
bar === function
this === window

b === undefined
x === 5
arguments === [5]
this === window

var a = 10,
    b = 20;
    // 全局作用域：a=10，b=20

function fn(x){
  var a = 100,
      c = 300；
      // fn(10)：a=100，c=300，x=10

  function bar(x){
    var a = 1000,
        d = 4000;
        // bar(100)：a=1000，d=4000，x=100
        // bar(100)：a=1000，d=4000，x=200
  }
  bar(100);
  bar(200);
}
fn(10)

var a = 10
function fn(){
  var b = 20
  return a + b // 這里的a就是一個(gè)自由變量
}

var x = 10;
function fn(){
  console.log(x) // 10
}

function show(f){
  var x = 20;
  (function(){
    f() // 10，而不是20
  })()
}

show(fn);

var a = 10;
function fn() {
  var b = 20;
  function bar() {
    console.log(a + b);
    // 創(chuàng)建函數(shù)bar()時(shí)，b=20
    // 通過(guò)作用域鏈查找到a=10
  }
  return bar;
}

var x = fn(),
    b = 200;

x(); // 30

// 1、全局作用域，max=100，其他變量undefined
function fn() {
  // 2、fn()作用域，max=10（調(diào)用結(jié)束后銷毀），其他變量undefined
  var max = 10;
  return function bar(x) {
    // 3、bar()作用域，max=10，x=15（調(diào)用結(jié)束后銷毀）
    if (x > max) {
      console.log(x);
    }
  }
}
var f1 = fn(), // bar()作為返回值賦值給f1
    max = 100;
f1(15); // 15

// 全局作用域，max=10
var max = 10,
    fn = function (x) {
      if (x > max) {
        console.log(x) // 15
      }
    };
(function (f) {
  var max = 100;
  f(15); // max=10而不是100
})(fn);

// 全局作用域中x=100
var x = 100;
function fn(x) {
  // fn(x)作用域
  // 調(diào)用f1()時(shí)的上下文環(huán)境中，x=5
  // 調(diào)用f2()時(shí)的上下文環(huán)境中，x=10
  return function () {
    // 匿名function作用域
    console.log(x);
  }
}
var f1 = fn(5),
    f2 = fn(10);
f1(); // 5
f2(); // 10