JavaScript_原型和继承(2017-03-15)

一、函数创建过程

在了解原型链之前我们先来看看一个函数在创建过程中做了哪些事情，举一个空函数的例子：

function A() {};

当我们在代码里面声明这么一个空函数，js解析的本质是（肤浅理解有待深入）：
1、创建一个原型对象（有constructor属性及[[Prototype]]属性，根据ECMA，其中[[Prototype]]属性不可见、不可枚举）。文中[[Prototype]]属性等同于__proto__属性
2、创建一个函数对象（有name、prototype属性），再通过prototype属性引用刚才创建的对象
3、创建变量A，同时把函数的引用赋值给变量A

此时函数对象A创建完毕。

如下图所示：

JavaScript_原型和继承(2017-03-15)

（注意图中都是“ 引用 ”类型）
每个函数的创建都经历上述过程。

二、构造函数

那么什么是构造函数呢？
按照ECMA的定义

Constructor is a function that creates and initializes the newly created object.

构造函数是用来新建同时初始化一个新对象的函数。
什么样的函数可以用来创建同时初始化新对象呢？答案是：任何一个函数，包括空函数。
所以，结论是：任何一个函数都可以是构造函数。

三、原型

根据前面空函数的创建图示，我们知道每个函数在创建的时候都自动添加了prototype属性，这就是函数的原型，从图中可知其实质就是对一个对象的引用（这个对象暂且取名原型对象）。
我们可以对函数的原型对象进行操作，和普通的对象无异！一起来证实一下。
围绕刚才创建的空函数，这次给空函数增加一些代码：

 function A() {

       this.width = 10;

       this.data = [1,2,3];

       this.key = "this is A";

   }

   A._objectNum = 0;//定义A的属性

   A.prototype.say = function(){//给A的原型对象添加属性

       alert("hello world")

   }

第7~9行代码就是给函数的原型对象增加一个say属性并引用一个匿名函数，根据“函数创建”过程，图解如下：

JavaScript_原型和继承(2017-03-15)

（灰色背景就是在空函数基础上增加的属性）
简单说原型就是函数的一个属性，在函数的创建过程中由js编译器自动添加。

那么原型有什么用呢？
先了解下new运算符，如下：

     function A() {

        this.width = 10;

        this.data = [1,2,3];

        this.key = "this is A";

     }

     A._objectNum = 0;//定义A的属性

     A.prototype.say = function(){//给A的原型对象添加属性

        alert("hello world")

     }

     var a1 = new A;

     var a2 = new A;

这是通过构造函数来创建对象的方式，那么创建对象为什么要这样创建而不是直接var a1 = {};呢？这就涉及new的具体步骤了，这里的new操作可以分成三步(以a1的创建为例)：
1、新建一个对象并赋值给变量a1：var a1 = {};
2、把这个对象的[[Prototype]]属性指向函数A的原型对象：a1.[[Prototype]] = A.prototype
3、调用函数A，同时把this指向1中创建的对象a1，对对象进行初始化：A.apply(a1,arguments)
其结构图示如下：

JavaScript_原型和继承(2017-03-15)

从图中看到，无论是对象a1还是a2，都有一个属性保存了对函数A的原型对象的引用，对于这些对象来说，一些公用的方法可以在函数的原型中找到，节省了内存空间。

四、原型链

了解了new运算符以及原型的作用之后，一起来看看什么是[[Prototype]]？以及对象如何沿着这个引用来进行属性的查找？
在js的世界里，每个对象默认都有一个[[Prototype]]属性，其保存着的地址就构成了对象的原型链，它是由js编译器在对象 被创建 的时候自动添加的，其取值由new运算符的右侧参数决定：当我们var object1 = {};的时候，object1的[[Prototype]]就指向Object构造函数的原型对象，因为var object1 = {};实质上等于var object = new Object();（原因可参照上述对new A的分析过程）。
对象在查找某个属性的时候，会首先遍历自身的属性，如果没有则会继续查找[[Prototype]]引用的对象，如果再没有则继续查找[[Prototype]].[[Prototype]]引用的对象，依次类推，直到[[Prototype]].….[[Prototype]]为undefined（Object的[[Prototype]]就是undefined）
如上图所示：

  //我们想要获取a1.fGetName

  alert(a1.fGetName);//输出undefined

  //1、遍历a1对象本身

  //结果a1对象本身没有fGetName属性

  //2、找到a1的[[Prototype]]，也就是其对应的对象A.prototype，同时进行遍历

  //结果A.prototype也没有这个属性

  //3、找到A.prototype对象的[[Prototype]]，指向其对应的对象Object.prototype

  //结果Object.prototype也没有fGetName

  //4、试图寻找Object.prototype的[[Prototype]]属性，结果返回undefined，这就是a1.fGetName的值

JavaScript_原型和继承(2017-03-15)

简单说就是通过对象的[[Prototype]]保存对另一个对象的引用，通过这个引用往上进行属性的查找，这就是原型链。

五、继承

有了原型链的概念，就可以进行继承。

function B() {};

这个时候产生了B的原型B.prototype
原型本身就是一个Object对象，我们可以看看里面放着哪些数据
B.prototype 实际上就是

{

    constructor: B,

    [[Prototype]]: Object.prototype

}

图示如下：

JavaScript_原型和继承(2017-03-15)

因为prototype本身是一个Object对象的实例，所以其原型链指向的是Object的原型

B.prototype = A.prototype;//相当于把B的prototype指向了A的prototype；这样只是继承了A的prototype方法，A中的自定义方法则不继承

B.prototype.thisisb = "this is constructor B";//这样也会改变a的prototype

JavaScript_原型和继承(2017-03-15)

但是我们只想把B的原型链指向A，如何实现？
第一种是通过改变原型链引用地址

B.prototype.__proto__ = A.prototype;

ECMA中并没有__proto__这个方法，这个是ff、chrome等js解释器添加的，等同于EMCA的[[Prototype]]，这不是标准方法，那么如何运用标准方法呢？
我们知道new操作的时候，实际上只是把实例对象的原型链指向了构造函数的prototype地址块，那么我们可以这样操作

B.prototype = new A();

JavaScript_原型和继承(2017-03-15)

这样产生的结果是：
产生一个A的实例，同时赋值给B的原型，也即B.prototype 相当于对象

{

    width: 10,

    data: [

        1,

        2,

        3

    ],

    key: "this is A",

    [[Prototype]]: A.prototype

}

这样就把A的原型通过B.prototype.[[Prototype]]这个对象属性保存起来，构成了原型的链接

但是注意，这样B产生的对象的构造函数发生了改变，因为在B中没有constructor属性，只能从原型链找到A.prototype，读出constructor:A

var b = new B;

console.log(b.constructor);//output A

JavaScript_原型和继承(2017-03-15)

所以我们还要人为设回B本身

B.prototype.constructor = B;

  //现在B的原型就变成了{width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype , constructor : B}

  console.log(b.constructor);//output B

  //同时B直接通过原型继承了A的自定义属性width和name

  console.log(b.data);//output [1,2,3]

JavaScript_原型和继承(2017-03-15)

  //这样的坏处就是

  b.data.push(4);//直接改变了prototype的data数组（引用）

  var c = new B;

  alert(c.data);//output [1,2,3,4]

JavaScript_原型和继承(2017-03-15)

  //其实我们想要的只是原型链，A的自定义属性我们想在B中进行定义（而不是在prototype）

  //该如何进行继承？

  //既然我们不想要A中自定义的属性，那么可以想办法把其过滤掉

  //可以新建一个空函数

  function F(){}

  //把空函数的原型指向构造函数A的原型

  F.prototype = A.prototype;

  //这个时候再通过new操作把B.prototype的原型链指向F的原型

  B.prototype = new F;

  //这个时候B的原型变成了{[[Prototype]] : F.prototype}

  //这里F.prototype其实只是一个地址的引用

  //但是由B创建的实例其constructor指向了A，所以这里要显示设置一下B.prototype的constructor属性

  B.prototype.constructor = B;

  //这个时候B的原型变成了{constructor : B , [[Prototype]] : F.prototype}

  //这样就实现了B对A的原型继承

JavaScript_原型和继承(2017-03-15)

最终：

    function A() {

        this.width = 10;

        this.data = [1,2,3];

        this.key = "this is A";

    }

    A._objectNum = 0;//定义A的属性

    A.prototype.say = function(){//给A的原型对象添加属性

        console.log("hello world")

    }

    var a1 = new A;

    var a2 = new A; 

    //我们想要获取a1.fGetName

    console.log("想要获取a1.fGetName " + a1.fGetName);//输出undefined

    //1、遍历a1对象本身

    //结果a1对象本身没有fGetName属性

    //2、找到a1的[[Prototype]]，也就是其对应的对象A.prototype，同时进行遍历

    //结果A.prototype也没有这个属性

    //3、找到A.prototype对象的[[Prototype]]，指向其对应的对象Object.prototype

    //结果Object.prototype也没有fGetName

    //4、试图寻找Object.prototype的[[Prototype]]属性，结果返回undefined，这就是a1.fGetName的值 

    function B() {

    };

    B.prototype = A.prototype;//相当于把B的prototype指向了A的prototype；这样只是继承了A的prototype方法，A中的自定义方法则不继承

    B.prototype.thisisb = "this is constructor B";//这样也会改变a的prototype 

    //B的原型链指向A

    //第一种

    //B.prototype.__proto__ = A.prototype;

    //第二种

    B.prototype = new A();

    var b = new B;

    //B产生的对象的构造函数发生了改变，因为在B中没有constructor属性，只能从原型链找到A.prototype，读出constructor:A

    /*

    实例b的构造函数:function A() {

        this.width = 10;

        this.data = [1,2,3];

        this.key = "this is A";

    }

    */

    console.log("实例b的构造函数:" + b.constructor);//output A 

    //人为设回B本身

    B.prototype.constructor = B;

    //现在B的原型就变成了{width :10 , data : [1,2,3] , key : "this is A" , [[Prototype]] : A.prototype , constructor : B}

    /*

    实例b的构造函数2:function B() {

    }

    */

    console.log("实例b的构造函数2:" +b.constructor);//output B

    //同时B直接通过原型继承了A的自定义属性width和name

    /*

    实例b的data:1,2,3

    */

    console.log("实例b的data:" +b.data);//output [1,2,3]

    //这样的坏处就是

    b.data.push(4);//直接改变了prototype的data数组（引用）  

    var c = new B;

    /*

    实例c的data:1,2,3,4

    */

    console.log("实例c的data:" +c.data);//output [1,2,3,4]

    //其实我们想要的只是原型链，A的自定义属性我们想在B中进行定义（而不是在prototype）

    //该如何进行继承？

    //既然我们不想要A中自定义的属性，那么可以想办法把其过滤掉

    //可以新建一个空函数

    function F(){}

    //把空函数的原型指向构造函数A的原型

    F.prototype = A.prototype;

    //这个时候再通过new操作把B.prototype的原型链指向F的原型

    B.prototype = new F;

    //这个时候B的原型变成了{[[Prototype]] : F.prototype}

    //这里F.prototype其实只是一个地址的引用

    //但是由B创建的实例其constructor指向了A，所以这里要显示设置一下B.prototype的constructor属性

    B.prototype.constructor = B;

    //这个时候B的原型变成了{constructor : B , [[Prototype]] : F.prototype}

    //这样就实现了B对A的原型继承

结构图：

JavaScript_原型和继承(2017-03-15)

附录：之前分析的一个例子

代码：

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>js</title>

<script>

    function Parent(){

        this.superName='Parent';

    };

    function Child(){

        this.subName='Child';

    };

    //隐藏属性__proto__，相当于c中的指针，存储的是对象的地址。

    //增加constructor属性

    Parent.prototype.otherName = 'Other';

    //指向新的对象

    //导致Parent.prototype下constructor等属性丢失

    /*

    console.log(Person.prototype.hasOwnProperty("constructor")); //true

    Parent.prototype={

        otherName2:'Other2',

    };

    console.log(Person.prototype.hasOwnProperty("constructor")); //false

    */

    var parentA = new Parent();

    //此时

    //Child.prototype.__proto__=Parent.prototype

    //Child.prototype下没有constructor属性，将去父层次寻找该属性

    Child.prototype = new Parent();

    //Child.prototype =  Parent.prototype;//此种方式只继承父类的原型方法

    var childA = new Child();

    var childB = new Child();

    var objectA = new Object();

    var functionA = new Function();

    //搜索顺序：childA对象 -> childA的原型对象(Child.prototype=new Parent()) ->childA的原型对象的原型对象(Parent.prototype) -> ....

    //1.凡是通过new Function()创建的对象都是函数对象，其他的是普通对象。

    //2.所有对象都有__proto__属性，函数对象有属性是原型对象 prototype。

    //3.原型对象prototype是普通对象（Function.prototype是函数对象，但没有prototype属性）。

    console.log("输出Child");

    console.log(childA.subName);//输出 Child

    console.log(childA.superName);//输出 Parent

    console.log(childA.otherName);//输出 other

    console.log(childA.unName);//输出 undefined

    console.log("输出Child原型");

    console.log(Child.prototype) //Parent {superName: "Parent", otherName: "Other"}

    console.log(Child.prototype.constructor === Object); //false

    console.log(Child.prototype.constructor === Parent); //true

    console.log("输出Parent原型");

    console.log(Parent.prototype) //Parent {otherName: "Other"}

    console.log(Parent.prototype.constructor === Object); //false

    console.log(Parent.prototype.constructor === Parent); //true

    console.log(childA.__proto__ === Child.prototype) //true

    console.log(typeof Child. prototype) //Object

    console.log(typeof Function.prototype) //function  这个特殊

</script>

</head>

<body>

</body>

</html>

结构图：

JavaScript_原型和继承(2017-03-15)

copy来源：http://blog.jobbole.com/19795/

秒客网

JavaScript_原型和继承(2017-03-15)

一、函数创建过程

二、构造函数

三、原型

四、原型链

五、继承

附录：之前分析的一个例子

相关文章

JavaScript_原型和继承(2017-03-15)

一、函数创建过程

二、构造函数

三、原型

四、原型链

五、继承

附录 ：之前分析的一个例子

相关文章

附录：之前分析的一个例子