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

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

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

首先我們對不同變量使用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屬于值類型，不是對象。
而其他的幾種類型 - 包括函數(shù)、數(shù)組、對象、null、new Number(10)都是對象，它們屬于引用類型。

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

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

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

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

函數(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ù)，我們可以用typeof()驗證一下：

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

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

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

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

但是函數(shù)和對象的關(guān)系卻有一點復(fù)雜，請看下面這個例子：

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

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

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

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

上面這種方式，其實是一個語法糖，而這段代碼的本質(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

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

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

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

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

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

同時，我們還可以為這個原型增添自定義方法或?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是一個函數(shù)，fn對象是從Fn函數(shù)中new出來的，這樣fn對象就可以調(diào)用Fn.prototype中的屬性。

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

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

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

每個對象都有一個__proto__，可稱為隱式原型。

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

每個對象都有一個__proto__屬性，指向創(chuàng)建該對象的函數(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__是一個特例，它指向的是null

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

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

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

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

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

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

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

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

JavaScript中的繼承通過原型鏈來體現(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出來的對象，f.a是對象f的基本屬性，因為f.__proto__ === Foo.prototype，所以f.b是從Foo.prototype中繼承而來的。

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

通過hasOwnProperty，我們可以判斷出一個屬性到底是基本屬性，還是從原型中繼承而來的。

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中繼承而來的

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

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

首先，對象屬性可以隨時改動

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

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()作了修改。

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

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

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

console.log(f.toString) // 嚴新晨

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

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

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

console.log(a) // 報錯，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ù)表達式

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

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

this - 賦值；

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

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

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

首先，全局代碼，寫在

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

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

bar() // 2、進入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就是一個自由變量
}

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()時，b=20
    // 通過作用域鏈查找到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()時的上下文環(huán)境中，x=5
  // 調(diào)用f2()時的上下文環(huán)境中，x=10
  return function () {
    // 匿名function作用域
    console.log(x);
  }
}
var f1 = fn(5),
    f2 = fn(10);
f1(); // 5
f2(); // 10