Javascript的this,闭包，原型链

学而不思则罔，思而不学则殆 -----孔子
温故而知新 -----孔子

前言

任何的编程语言，都有其难点。 “this”、闭包、原型链则是Javascript中的三个难点。这三个知识点一定是贯穿于你的Javascript项目之中。所以本文想把学习和工作中关于这三个知识点的经验和心得记录和总结下来，方便自己以后随时翻看复习，同时也帮助新手能够更加容易地理解这三个知识点。

目录

• this

• 闭包

• 原型链

this 关键字

一般，在编程语言里面，this会指向其所在的实例。Javascript也不例外。但Javascript中的this是动态的，所以很容易造成你以为this指向的是这个实例，然而却指向其它实例的错误发生。其实，只要抛开其它编程语言对this的定义的话，就会发现其实Javascript中的this也挺简单。

谁叫，谁负责

在Javascript里面，没有类的概念。一切都是客体，包括函数也不例外，不仅如此，函数在Javascript里面还是一等公民。而Javascript的客体里面，都会有一个this，一般指向的都是这个客体本身。但是若这个函数以callback函数的方式传递给其它函数时，它的this就发生了变化。比如如下的函数。

var obj = {name:'Trump',sayWhoIam: function(){console.log(this.name)}};

obj.sayWhoIam(); // Trump

var obj1 = {name:'Jincheng'};
obj1.sayHello = obj.sayWhoIam;
obj1.sayHello(); // Jincheng

window.name = 'I am window';
setTimeout(obj.sayWhoIam, 1000) // I am window

凌乱了没有？是不是觉得明明这三个都应该输出Trump才是呀，怎么每一个输出的结果都不同？这其实就是Javascript的this的动态特性。没有绑定在一个特定的客体上（所以可以使用bind函数，来为一个函数绑定this）。为了弄清楚Javascript的动态特性，我们一步一步的来理解Javascript中函数的呼出原理。首先，我们看上面的代码中的第一行代码。使用var声明了一个obj变量，这个变量是一个客体。客体中有name和sayWhoIam属性。name属性的type是string，sayWhoIam属性的type是Function客体。那console.log中的this呢？首先可以确认的是，它是一个客体。但指向哪里呢？当然我们在定义这个函数的时候，肯定想的是指向obj。但其实这个this在这里就是个this，没有指定到obj。只有当obj呼出它的sayWhoIam时，这个this才指向了obj。为了理解上面函数的呼出原理，我们可以把obj重新变形一下。如下图：

function sayWhoIam(){  console.log(this.name)};
var obj = {name: "Trump"};
window.name = 'I am window';
sayWhoIam(); // I am window
window.sayWhoIam();// I am window
sayWhoIam.call(window); //I am window

obj.sayWhoIam = sayWhoIam;
obj.sayWhoIam(); //Trump
sayWhoIam.call(obj); // Trump

有没有看出什么规律来？是的。其实我们呼出函数的本质就是使用了函数客体的call函数而已。这个call函数的第一个参数就是所呼出函数里面this所指向的客体。如果我们没有使用call来呼出函数，而是使用括号（sayWhoIam()）的话，翻译器会自动为我们寻找呼出的对象，一层层网上找，一直找到window（browser的情况。 node.js则是global对象）。所以在上面的代码中，直接呼出sayWhoIam的时候，实际上和后面的window.sayWhoIam一样，实际上是呼出了sayWhoIam.call(window)。其后的obj.sayWhoIam也是如此，究其本质就是为一个Function客体指定了一个呼出客体（caller），然后使用Function可以的call属性执行其函数体而已。也就是说，你可以把任何一个函数都看成一个独立的个体。不管它怎么变，被传递也好，被呼出也好，就只看这个函数什么时候被呼出，以及被谁呼出。那么那个函数中的this就是谁（bind情况除外）。

闭包

闭包应该算是使用Javascript的高级技巧。利用了Javascript中函数的域变量和函数返回函数以后，所返回的函数中使用的呼出函数的变量不消失的特点。这句话是不是特别绕？没关系，听我慢慢道来。首先我们来看一般闭包的形式。

var base = 10;
//非闭包情况
function notClosure(){  
    var acc = base; 
    acc = acc + base；  
    return acc;
}
notClosure(); // 20
notClosure(); // 20
notClosure(); // 20

//每次执行函数时，都会声明一个acc的变量，并为其赋值，然后做简单加减乘除，再返回它。因为每次函数都生成这个变量，结束时又清除内部所有的变量，所以不是闭包的情况，函数内部的变量具有挥发性。

//使用闭包
function createClosure(){  
    var acc = base;  
    return function(){   
       acc = acc + base;    
       return acc;  
    }
}

var myclosure = createClosure();
myclosure(); //20
myclosure(); //30
myclosure(); //40
myclosure(); //50
console.dir(myclosure); //多了一个closure scope,并且是createClosure.

使用和不使用闭包的差异就是能否为你的函数存储变量。可以看到crateClosure在myClosure之前被呼出，那么createClosure函数内的acc变量照理说应该随着其的呼出结束而消失，但是由于createClosure返还的是一个函数，这个被返还的函数中，就会比noClosure函数多出一个closure scope， noClosure只有一个Global scope。查看这个多出来的closure scope可以发现其就是一个客体，拥有来自createClosure的变量，并且保存其值。

所以所谓的闭包，其实就是使用一个函数来返回一个函数或者客体，这个被返还的客体具备一个闭包，在闭包中，能够存储外层函数的变量，以及其值。

闭包的好处就是一个函数从此拥有了状态，客体从此拥有了私有变量。闭包外面不可以使用闭包内的变量值，只有拥有这个闭包的函数或者客体有能力使用闭包内的变量值（还可以是函数等一切类型）。

原型链

理解了原型链，就能理解Javascript中的继承。在Javascript中，本身语言是不提供继承的。但可以使用原型链来达到继承的目的。所以我们有必要理解一下什么是原型链。使用chrome的开发工具，在Console里面，var test = {}; testchrome 会显示其是一个Object，展开它，就能看见它拥有一个proto的属性，这就是原型。告诉了我们一个重要信息，test对象的类是Object。其实在Javascript里面这么说是不严谨的。因为Javascript里面就没有类的说法。所以准确地来说，其实告诉了我们test客体有一个原型，这个原型指向的是Object客体。这样就可以在test中调用原型里面的函数了。所谓的原型链，就是proto的proto指向另一客体。这样，但我们呼出对象的函数或者变量时，首先会找它自己是否拥有这个函数或者变量，若是拥有，则使用，若是不拥有则找上一层原型，以此类推。用代码说话。

function Human(age){  
    this.age = age
};
//函数，不仅拥有__proto__还会有一个叫做prototype的客体。
//Human.prototype.__proto__ === Human.__proto__.__proto__  为true。Human的__proto__是function，而function的__proto__是Object。Human的prototype是一个Object，其__proto__也是Object。

Human.prototype.getAge = function(){
  console.log(this.age)
} 

function Man(name, age){  
    this.name = name;  
    Human.call(this,age);//constructor stealing.
}

Man.prototype = new Human(); // prototype chaining.
Man.prototype.getName = function(){console.log(this.name)};
var jim = new Man("Jim", 12);
jim.getAge(); // 12
jim.getName(); // Jm

在上面的代码中，首先定义了Human构造器函数，这个构造器函数接受一个age参数。同时使用Human的prototype，为其添加了getAge方法。然后创建Man构造器函数。为了继承来自Human的成员变量和成员方法。这里使用了两个技巧，一个是constructor stealing,另一个是prototype chanining.使用constructor stealing获取父类的成员变量，使用prototype chaining 获得父类的成员变量和方法。这里使用constructor stealing的目的是防止其对象共享父类引用型成员变量。举例来说，当父类中有一个成员变量是客体的话，使用prototype chaining继承其成员变量，会使得子类的对象共享其变量。因为原型链方法是让Man的prototype为一个Human的对象。

上代码

function Human(age){
  this.age = age;
  this.position = ["President", "Student"]
};

Human.prototype.getAge = function(){
  console.log(this.age);
};

function Man(name){
  this.name = name
};

Man.prototype = new Human();
Man.prototype.getName = function(){
  console.log(this.name);
};

var myman2 = new Man("Jincheng")
var myman = new Man("Trump");

myman.position.push("Stupid");
myman2.position // ["President", "Student", "Stupid"]

上面的代码中，由于Man没有定义position，所以执行myman.position.push时会去找Man的prototype中是否有position这个变量，找到以后，实际上把值添加到了Man的prototype，即Human的一个实例中。造成了成员变量共享的结果。

总之，原型链，就是一个不停往上找的过程，知道找到Object为止。