转载

白话解释 Javascript 原型继承(prototype inheritance)

什么是继承?

学过“面向对象”的同学们是否还记得，老师整天挂在嘴边的面向对象三大特征：封装，继承，多态。今天我们就来白话一下javascript中的原型继承，没学过的同学们也不用担心，跟着往下走，我相信你会明白的。

继承，当然是面向对象其中的一种思想和概念了，所谓继承，顾名思义就是继承了。。。

比如说小明是老明唯一的儿子，老明有一个亿的资产，这一个亿的资产虽然不在小明手里，但是小明是老明儿子，小明在一定程度上“继承”了他老爸给他提供的这么多的资产，小明不仅可以享用自己赚来的钱，也可以随时消费他父辈的资产。

在程序中，其实也是类似的，如果一个对象A继承了对象B，那么对象A不仅可以使用自己的属性和方法，同时也可以使用父级B中的属性和方法。

为了能够说明白Javascript 中的原型继承，就不得不说javascript中的对象。

javascript对象两种创建(声明)方式

在javascript中有两种方式可以创建一个javascript 对象(object).

对象字面量(object literal)方式
构造函数(constructor)方式

第一种对象字面量方式很简单粗暴:

var a = {}; // 我创建了一个空对象a

第二种“构造函数”方式来“创建对象”。

“构造函数”只是创建一个对象的第一步！有了构造函数之后，第二部就是用它创建一个对象！

所以，第一步，来一个构造函数，你可以把它当成一个普通函数，比如：

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

这个函数也可以接受参数，如果大家对this关键字不了解，请先看《详解javascript this关键字》这个教程，这里我就不啰嗦了。

我们有了构造函数之后，第二步开始使用它构造一个函数。

在javascript中，我们使用 “new” 操作符 + 构造函数来创建一个对象。

var a = new People('xiaoming');
var b = new People;

顺便提一下，如果你不想给构造函数传入参数，那么带不带括号都是一样的，也就是说： var a = new People; var b = new People(); 这两种创建对象方式都正确。

小提示：其实第一种对象字面量方式只是构建对象的语法糖(syntax sugar)，底层还是使用构造函数方式构造的： new Object() 大家不相信的话，可以打开你的chrome的控制台，直接输入： Object 是不是看到了下面这一行？ function Object() { [native code] } 这个Object也是个构造函数，只不过这里原生代码。

原型prototype

现在大家知道了javascript中对象创建的两种方式。 var a = {}; var xiaoming = new People(); 接下来这句话请大家重复三遍：

所有的javascript对象都从一个叫“原型”的地方继承了所有的属性和方法！

这个“原型”是个啥？就是个对象！你可以把它想象成：{}。

我们前面说了创建对象的两种方法： 1, 对象字面量 var a = {}; // 其实等于 var a = new Object; 2, 构造函数

function People(){
}

var a = new People();

我们说过了：

所有的javascript对象都从一个叫“原型”的地方继承了所有的属性和方法！

上面这两个例子中对象是： a 那么原型(prototype)在哪呢？大家试着和我一样做一下： console.log(Object.prototype); console.log(People.prototype); 是不是都输出了一个对象？

我们之前也说了，原型（prototype）就是一个对象而已，现在大家也知道它在哪了吧？原型就是构造函数的一个属性，这里可能听着有点别扭，函数的属性？对，javascript中的构造函数也是对象！

重要的事情说三遍： javascript的原型(prototype)是什么？就是“构造函数”下的一个对象叫做“原型”(prototype)

再添一句，这个原型对象中又有个名为“constructor”的属性，指向了该函数本身。

function People(){}

People.prototype.constructor === People // true

再提醒一下，原型只存在在“构造函数”中，有些同学会误解的去找一个“对象”或“对象字面量”的原型(prototype)，因为我们说了原型(prototype)只存在在“构造函数”中，所以去对象或对象字面量里找原型的找不到的，只能返回undefined。比如：

var a = {};
console.log(a.prototype) // 返回undefined

// 或者

function People() {}
var p = new People;
console.log(p.prototype) // 依然返回undefined

// 但是
console.log(People.prototype) // 就返回一个{} 当然这里面有好多原生的方法

但是，还有一个特别属性 __proto__ 可以让你“向父级”查看，当前对象继承的“原型”是谁？就是孩子找爸爸。打开你的chrome浏览器的控制台，接着上面的代码继续试验： ``` a. proto // Object {} p. proto // Object {} a. proto === Object.prototype // true p. proto === People.prototype // true

// 我们发现两个对象的原型都是对象。 // 那么我们再来看看构造函数“继承”的原型是谁？

Object. proto // function () {} People. proto // function () {} ```

看到这里，希望你能明白，不管是javascript自带的，还是我们自定义的构造函数依然继承自匿名函数的原型！(希望你没晕)