JavaScript中的原型与原型链

前言

做为前端高频面试题之一，相信不少小伙伴都有遇到过这个问题。那么你是否清楚完整的了解它呢？

国际惯例，让咱们先抛出问题：

• 什么是原型、原型链
• 它们有什么特色
• 它们能作什么
• 怎么肯定它们的关系

或许你已经有答案，或许你开始有点疑惑，不管是 get 新技能或是简单的温习一次，让咱们一块儿去探究一番吧

若是文章中有出现纰漏、错误之处，还请看到的小伙伴多多指教，先行谢过

如下↓

原型

JavaScript 是基于原型的

咱们建立的每一个函数都有一个 prototype(原型) 属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含能够由特定类型的全部实例共享的属性和方法。

简单来讲，就是当咱们建立一个函数的时候，系统就会自动分配一个 prototype属性，能够用来存储可让全部实例共享的属性和方法

用一张图来表示就更加清晰了：

图解：

• 每个构造函数都拥有一个 prototype 属性，这个属性指向一个对象，也就是原型对象
• 原型对象默认拥有一个 constructor 属性，指向指向它的那个构造函数
• 每一个对象都拥有一个隐藏的属性 __proto__，指向它的原型对象

function Person(){}

var p = new Person();

p.__proto__ === Person.prototype // true

Person.prototype.constructor === Person // true
复制代码

那么，原型对象都有哪些特色呢

原型特色

function Person(){}
Person.prototype.name = 'tt';
Person.prototype.age = 18;
Person.prototype.sayHi = function() {
    alert('Hi');
}
var person1 = new Person();
var person2 = new Person();
person1.name = 'oo';
person1.name // oo
person1.age // 18
perosn1.sayHi() // Hi
person2.age // 18
person2.sayHi() // Hi
复制代码

从这段代码咱们不难看出：

• 实例能够共享原型上面的属性和方法
• 实例自身的属性会屏蔽原型上面的同名属性，实例上面没有的属性会去原型上面找

既然原型也是对象，那咱们可不能够重写这个对象呢？答案是确定的

function Person() {}
Person.prototype = {
    name: 'tt',
    age: 18,
    sayHi() {
        console.log('Hi');
    }
}

var p = new Person()
复制代码

只是当咱们在重写原型链的时候须要注意如下的问题:

function Person(){}
var p = new Person();
Person.prototype = {
    name: 'tt',
    age: 18
}

Person.prototype.constructor === Person // false

p.name // undefined
复制代码

一图赛过千言万语

• 在已经建立了实例的状况下重写原型，会切断现有实例与新原型之间的联系
• 重写原型对象，会致使原型对象的 constructor 属性指向 Object ，致使原型链关系混乱，因此咱们应该在重写原型对象的时候指定 constructor( instanceof 仍然会返回正确的值)

Person.prototype = {
    constructor: Person
}
复制代码

注意：以这种方式重设 constructor 属性会致使它的 Enumerable 特性被设置成 true(默认为false)

既然如今咱们知道了什么是 prototype(原型)以及它的特色，那么原型链又是什么呢？

原型链

JavaScript 中全部的对象都是由它的原型对象继承而来。而原型对象自身也是一个对象，它也有本身的原型对象，这样层层上溯，就造成了一个相似链表的结构，这就是原型链

一样的，咱们使用一张图来描述

• 全部原型链的终点都是 Object 函数的 prototype 属性
• Objec.prototype 指向的原型对象一样拥有原型，不过它的原型是 null ，而 null 则没有原型

清楚了原型链的概念，咱们就能更清楚地知道属性的查找规则，好比前面的 p 实例属性.若是自身和原型链上都不存在这个属性，那么属性最终的值就是 undefined ，若是是方法就会抛出错误

class类

ES6 提供了 Class(类) 这个概念，做为对象的模板，经过 class 关键字，能够定义类

为何会提到 class ：

ES6 的 class 能够看做只是一个语法糖，它的绝大部分功能，ES5 均可以作到，新的 class 写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

// 能够这么改写
function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};
复制代码

class 里面定义的方法，其实都是定义在构造函数的原型上面实现实例共享,属性定义在构造函数中，因此 ES6 中的类彻底能够看做构造函数的另外一种写法

除去 class 类中的一些行为可能与 ES5 存在一些不一样，本质上都是经过原型、原型链去定义方法、实现共享。因此，仍是文章开始那句话 JavaScript是基于原型的

更多 class 问题，参考这里

关系判断

instanceof

最经常使用的肯定原型指向关系的关键字，检测的是原型,可是只能用来判断两个对象是否属于实例关系， 而不能判断一个对象实例具体属于哪一种类型

function Person(){}
var p = new Person();

p instanceof Person // true
p instanceof Object // true
复制代码

hasOwnProperty

经过使用 hasOwnProperty 能够肯定访问的属性是来自于实例仍是原型对象

function Person() {}
Person.prototype = {
    name: 'tt'
}
var p = new Person();
p.age = 15;

p.hasOwnProperty('age') // true
p.hasOwnProperty('name') // false
复制代码

原型链的问题

因为原型链的存在，咱们可让不少实例去共享原型上面的方法和属性，方便了咱们的不少操做。可是原型链并不是是十分完美的

function Person(){}
Person.prototype.arr = [1, 2, 3, 4];

var person1 = new Person();
var person2 = new Person();

person1.arr.push(5) 
person2.arr // [1, 2, 3, 4, 5]
复制代码

引用类型，变量保存的就是一个内存中的一个指针。因此，当原型上面的属性是一个引用类型的值时，咱们经过其中某一个实例对原型属性的更改，结果会反映在全部实例上面，这也是原型 共享 属性形成的最大问题

另外一个问题就是咱们在建立子类型（好比上面的 p）时，没有办法向超类型（ Person ）的构造函数中传递参数

后记

鉴于原型的特色和存在的问题，因此咱们在实际开发中通常不会单独使用原型链。通常会使用构造函数和原型相配合的模式，固然这也就牵扯出了 JavaScript 中另外一个有意思的领域：继承

那么，什么又是继承呢

且听下回分解

最后，推荐一波前端学习历程，不按期分享一些前端问题和有意思的东西欢迎 star 关注 传送门

参考文档

JavaScript高级程序设计

ECMAScript6入门