一、什么是原型

• 原型是Javascript中的继承的基础，JavaScript的继承就是基于原型的继承。

1.1 函数的原型对象

​ 在JavaScript中，我们创建一个函数A( 就是声明一个函数 ), 那么浏览器就会在内存中创建一个对象B，而且每个函数都默认会有一个属性 prototype 指向了这个对象( 即： prototype的属性的值是这个对象 )。这个对象B就是函数A的原型对象，简称函数的原型。这个原型对象B 默认会有一个属性 constructor 指向了这个函数A ( 意思就是说：constructor属性的值是函数A )。

如图：

1.2 使用构造函数创建对象

​ 当把一个函数作为构造函数 (理论上任何函数都可以作为构造函数) 使用new创建对象的时候，那么这个对象就会存在一个默认的不可见的属性，来指向了构造函数的原型对象。 这个不可见的属性我们一般用 [[prototype]] 来表示，只是这个属性没有办法直接访问到。

二、与原型有关的几个属性和方法

2.1 prototype属性

​ prototype 存在于构造函数中 (其实任意函数中都有，只是不是构造函数的时候prototype我们不关注而已) ，他指向了这个构造函数的原型对象。

​ 参考前面的示意图。

2.2 constructor属性

​ constructor属性存在于原型对象中，他指向了构造函数

看下面的代码：

function Person () {
}
console.log(Person.prototype.constructor === Person);	// true
var p1 = new Person();
  //使用instanceof 操作符可以判断一个对象的类型。  
  //typeof一般用来获取简单类型和函数。
  //而引用类型一般使用instanceof，因为引用类型用typeof 总是返回object。
  //最准确的话用Object.prototype.toString.call(obj);
console.log(p1 instanceof Person);	// true

2.3 __proto __ 属性(注意：左右各是2个下划线)

​ 用构造方法创建一个新的对象之后，这个对象中默认会有一个不可访问的属性 [[prototype]] , 这个属性就指向了构造方法的原型对象。

​但是在个别浏览器中，也提供了对这个属性[[prototype]]的访问(chrome浏览器和火狐浏览器。ie浏览器不支持)。访问方式：p1.proto

​ 但是开发者尽量不要用这种方式去访问，因为操作不慎会改变这个对象的继承原型链。

2.4 hasOwnProperty() 方法

​ 大家知道，我们用去访问一个对象的属性的时候，这个属性既有可能来自对象本身，也有可能来自这个对象的[[prototype]]属性指向的原型。

​ hasOwnProperty方法，可以判断一个属性是否来自对象本身。

2.5 in 操作符

​in操作符用来判断一个属性是否存在于这个对象中。但是在查找这个属性时候，现在对象本身中找，如果对象找不到再去原型中找。换句话说，只要对象和原型中有一个地方存在这个属性，就返回true

function Person () {

}
Person.prototype.name = "张三";
var p1 = new Person();
p1.sex = "男";
console.log("sex" in p1);	//对象本身添加的，所以true
console.log("name" in p1);	//原型中存在，所以true
console.log("age" in p1); 	//对象和原型中都不存在，所以false

一、原型链与继承的概念

​继承是所有的面向对象的语言最重要的特征之一。大部分的语言的都支持两种继承：接口继承和实现继承。

​ 但是对JavaScript来说，没有类和接口的概念(ES6之前)，所以只支持实现继承，而且继承在 原型链 的基础上实现的。等了解过原型链的概念之后，你会发现继承其实是发生在对象与对象之间。

二、原型链的概念

在JavaScript中，原型链是实现继承的主要方法。其基本思想是利用原型让一个引用类型关联另一个引用类型的属性和方法

​ 再回顾下，构造函数、原型(对象)和对象之间的关系。每个构造函数都有一个属性 prototype 指向一个原型对象，每个原型对象也有一个属性 constructor 指向函数，通过new 构造函数() 创建出来的对象内部有一个不可见的属性[[prototype]]指向构造函数的原型。当每次访问对象的属性和方法的时候，总是先从p1中找，找不到则再去p1指向的原型中找。

2.1 更换构造函数的原型

​ 原型其实就是一个对象，只是默认情况下原型对象是浏览器会自动帮我们创建的，而且自动让构造函数的 prototype 属性指向这个自动创建的原型对象。

​ 其实我们完全可以把原型对象更换成一个我们自定义类型的对象。

看下面的代码：

function Grandfather() {
    this.id = "孙子~我是你爷爷~"
}

//定义一个构造函数。
function Father () {
    // 添加name属性.  默认直接赋值了。当然也可以通过构造函数传递过来
    this.name = "张三";
}
//给Father的原型添加giveMoney方法
Father.prototype.giveMoney = function () {
    console.log("我是Father原型中定义的方法");
}
//再定义一个构造函数。
function Son () {
    //添加age属性
    this.age = 18;
}
//关键地方：把Son构造方法的原型替换成Father的对象。
Son.prototype = new Father();
//给Son的原型添加getMoney方法
Son.prototype.getMoney = function () {
    console.log("我是Son的原型中定义的方法");
}
//创建Son类型的对象
var son1 = new Son();

//发现不仅可以访问Son中定义属性和Son原型中定义的方法，也可以访问Father中定义的属性和Father原型中的方法。
//这样就通过原型完成了类型之间的继承。
//Son继承了Father中的属性和方法，当然还有Father原型中的属性和方法。
son1.giveMoney();
son1.getMoney();
console.log("Father定义的属性：" + son1.name);
console.log("Son中定义的属性：" + son1.age);

2.2 默认顶端原型

​ 其实上面原型链还缺少一环。

​ 在 JavaScript 中所有的类型如果没有指明继承某个类型，则默认是继承的 Object 类型。这种 默认继承也是通过原型链的方式完成的。

说明：

1. 原型链的顶端一定是Object的原型对象。这也是为什么我们随意创建一个对象，就有很多方法可以调用，其实这些方法都是来自Object的原型对象。
2. 通过对象访问属性方法的时候，一定是会通过原型链来查找的，直到原型链的顶端。
3. 一旦有了继承，就会出现多态的情况。假设需要一个Father类型的数据，那么你给一个Father对象，或Son对象都是没有任何问题的。而在实际执行的过程中，一个方法的具体执行结果，就看在原型链中的查找过程了。给一个实际的Father对象则从Fahter的原型链中查找，给一个实际的Son则从Son的原型链中查找。
4. 因为继承的存在，Son的对象，也可以看出Father类型的对象和Object类型的对象。 子类型对象可以看出一个特殊的父类型对象。

2.3 测试数据的类型

1. typeof：一般用来测试简单数据类型和函数的类型。如果用来测试对象，则会一直返回object，没有太大意义。
2. instanceof: 用来测试一个对象是不是属于某个类型。结果为boolean值。
3. isPrototypeOf( 对象 ) : 这是个原型的方法，参数传入一个对象，判断参数对象是不是由这个原型派生出来的。 也就是判断这个原型是不是参数对象原型链中的一环。
4. 最准确的一种 Object.prototype.toString.call(obj);
5. constructor：返回对象的构造函数 语法object.constructor
6. Array.isArray 用于确定传递的值是否是一个 Array

2.4 原型链在继承中的缺陷

​ 原型链并非完美无缺，也是存在一些问题的。

父类型的属性共享问题

​在原型链中，父类型的构造函数创建的对象，会成为子类型的原型。那么父类型中定义的实例属性，就会成为子类型的原型属性。对子类型来说，这和我们以前说的在原型中定义方法，构造函数中定义属性是违背的。子类型原型中的属性被所有的子类型的实例所共有，如果有一个实例去更改，则会很快反应到其他的实例上。

看下面的代码：

function GirlFriend() {
    this.boys = ["张三","李四"]
}

function Person() {

}
// 子类的原型对象中就有一个属性 boys ，是个数组
Person.prototype = new GirlFriend()

p1 = new Person()
p2 = new Person()
console.log(p1.boys)
console.log(p2.boys)

//给p1的boys属性的数组添加一个元素
p1.boys.push("王二麻子")
console.log(p1.boys)

//这时，发现p2中的boys属性的数组内容也发生了改变
console.log(p2.boys)  // "张三","李四", "王二麻子"