深入理解JavaScript原型和闭包

摘要：本文是本人阅读学习深入理解原型和闭包时所作的总结和笔记，当然也引用了很多原文，感兴趣的朋友也可以直接去看原文。即这里的称为隐式原型。注意，构造函数的函数名第一个字母大写规则约定。但实际上，上述情况是一种理想的情况。

本文是本人阅读学习深入理解JavaScript原型和闭包时所作的总结和笔记，当然也引用了很多原文，感兴趣的朋友也可以直接去看原文。

先说结论，一切引用类型都是对象，对象是属性的集合。

首先我们对不同变量使用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属于值类型，不是对象。
而其他的几种类型 - 包括函数、数组、对象、null、new Number(10)都是对象，它们属于引用类型。

在JavaScript中，数组是对象，函数是对象，对象还是对象。对象里面的一切都是属性，只有属性，没有方法，或者说方法也是一种属性。属性表示为键值对的形式。

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两个属性。

函数和数组不能用上面的方法定义属性，下面以函数为例：

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

在jQuery源码中，变量jQuery或者$其实是一个函数，我们可以用typeof()验证一下：

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

很明显，这就是在$或者jQuery函数上加了一个trim属性，属性值是函数，作用是截取前后空格。

上文已经说到，函数也是一种对象，我们可以用instanceof验证一下：

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

但是函数和对象的关系却有一点复杂，请看下面这个例子：

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

由上面这个例子可以得出，对象是可以通过函数创建的。

但其实，对象都是通过函数创建的。

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都是函数：

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

由此可以得出，对象都是通过函数创建的。

每个函数都有一个默认属性 - prototype。

这个prototype的属性值是一个对象，这个对象有一个默认属性 - constructor，这个属性指向这个函数本身。

而原型作为一个对象，除了constructor之外，当然可以有其他属性，以函数Object为例，在浏览器调试窗口输入Object.prototype会得到以下返回值：

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

同时，我们还可以为这个原型增添自定义方法或属性

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是一个函数，fn对象是从Fn函数中new出来的，这样fn对象就可以调用Fn.prototype中的属性。

每个对象都有一个隐藏的属性 - __proto__，这个属性引用了创建这个对象的函数的prototype。即：fn.__proto__ === Fn.prototype

这里的__proto__称为“隐式原型”。

每个函数function都有一个prototype，即原型。

每个对象都有一个__proto__，可称为隐式原型。

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

每个对象都有一个__proto__属性，指向创建该对象的函数的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通常是一个函数。

判断规则：沿着A.__proto__和B.prototype查找，如果能找到同一个引用，即同一个对象，则返回true。

由以上判定规则，我们可以解释许多奇怪的判定结果，例如：

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

instanceof表示的是一种继承关系 - 原型链

JavaScript中的继承通过原型链来体现。

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函数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中继承而来的

每个函数都有apply、call方法，都有length、arguments等属性，这些都是从Function.prototype中继承而来的

由于Function.prototype.__proto__指向Object.prototype，所以函数也会有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()作了修改。

同理，我们也可以自己定义一个函数并修改toString()方法。

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

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

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

最后，如果缺少需要的方法，也可以自己创建

如果要添加内置方法的原型属性，最好做一步判断，如果该属性不存在，则添加。如果本来就存在，就没必要再添加了。

执行上下文，也叫执行上下文环境

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(){} // 函数声明

console.log(f_2) // undefined
var f_2 = function(){} // 函数表达式

在js代码执行前，浏览器会先进行一些准备工作：

变量、函数表达式 - 变量声明，默认赋值为undefined；

this - 赋值；

函数声明 - 赋值；

这三种数据的准备工作我们称之为“执行上下文”或者“执行上下文环境”。

JavaScript在执行一个代码段之前，都会进行这些“准备工作”来生成执行上下文。这个“代码段”其实分三种情况 - 全局代码，函数体，eval代码。

首先，全局代码，写在

var a = 10, // 1、进入全局上下文环境
    fn,
    bar = function(x){
      var x = 5
      fn(x+b) // 3、进入fn()函数上下文环境
    }

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

bar() // 2、进入bar()函数上下文环境

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);
    // 创建函数bar()时，b=20
    // 通过作用域链查找到a=10
  }
  return bar;
}

var x = fn(),
    b = 200;

x(); // 30

// 1、全局作用域，max=100，其他变量undefined
function fn() {
  // 2、fn()作用域，max=10（调用结束后销毁），其他变量undefined
  var max = 10;
  return function bar(x) {
    // 3、bar()作用域，max=10，x=15（调用结束后销毁）
    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)作用域
  // 调用f1()时的上下文环境中，x=5
  // 调用f2()时的上下文环境中，x=10
  return function () {
    // 匿名function作用域
    console.log(x);
  }
}
var f1 = fn(5),
    f2 = fn(10);
f1(); // 5
f2(); // 10