转载

详解JavaScript原型

JavaScript语言与传统的面向对象语言（如Java）有点不一样，js语言设计的简单灵活，没有class、namespace等相关概念，而是万物皆对象。虽然js不是一个纯正的面向对象语言，但依然可以对js面向对象编程。 java语言面向对象编程的基础是类,而js语言面向对象编程的基础是原型 。

原型是学习js的基础之一，由它衍生出许多像原型链、this指向、继承等问题。所以深入掌握js原型，才能对其衍生的问题有很好的理解。网上有很多文章解释原型里的等式关系，那样有些晦涩难懂，这里笔者从js设计历史来逐步解释js原型。

历史

在ES6前， js语法是没有class 的。倒不是js语言作者Brendan Eich忘记引入class语法，而是因为当初设计js语言时，只想解决表单验证等简单问题（估计js作者没想到后来js成为最流行的语言之一），没必要引入class这种重型武器，不然就跟Java这种基于class的面向对象语言一样了。具体可以看下阮一峰老师的 Javascript继承机制的设计思想。

虽然设计js语言时，更多的考虑轻量级灵活，但依然要在语言层面考虑对象封装以及多个对象之间复用的问题。先看下使用传统方式进行封装：

function Person(name) {
    return {
      name: name,
      sleep: function() {
        console.log( 'go to sleep' )
      }
    }
}

var person1 = Person('tom')
var person2 = Person('lucy')
... personN
复制代码

传统方式有以下两个弊端：

person1、person2...personN 实例对象没有内在联系，它们只是基于相同的工厂函数生成。
浪费内存，无法共享属性和方法。比如每个人的sleep方法是相同的，但生成10000个person实例会有10000个sleep方法占据内存

既然无意引入class语法，同时需要满足对象的封装以及复用问题，那就需要在js语言层面引入一种机制来处理class问题。

原型

js作者使用了原型概念来解决class问题 。那什么是原型？原型是如何在语法层实现的？会涉及到哪些概念？

constructor

js原型概念通俗讲有点像Java中的类概念，多个实例是基于共同的类型定义，就像tom、lucy这些真实的人（占据空间）基于Person概念（不占空间，只是定义）。java中类是基于class关键字的，但js中没有class关键字，有的是function。而java类定义中都有个构造函数，实例化对象时会执行该构造函数，所以 js作者简化把构造函数constructor作为原型（代替class）的定义 。同时规定构造函数需要满足以下条件：

首字母大写
内部使用this
搭配使用new生成实例

// java定义类
class Person {
  // java类中都有构造函数
  constructor(name) {
    this.name = name
  }

  public void sleep() {
    ....
  }
}
复制代码

// js使用构造函数代替类的作用
function Person(name) {
  this.name = name
  this.sleep = function() { ... }
}
复制代码

new

以上通过构造函数定义了Person这个类。但如何区分一个function定义是构造函数还是普通函数？难道是看定义的函数里面是否有this来判断？

当然不是， js作者引入new关键字来解决该问题 。因为构造函数只是定义原型（不占据内存），最终还是需要产生实例（占据内存）来处理流程，所以使用new关键字来产生实例。同时规定new后面跟的是构造函数，而不是普通函数。这样就区分出定义的function，是构造函数还是普通函数。

// new 关键字后跟上构造函数，生成实例
// 语法层面上也和Java实例类一致
var tom = new Person('tom')
var lucy = new Person('lucy')
复制代码

你肯定注意到 构造函数中this的疑问 ，它到底是在哪定义的？this又代表什么？其实在执行new的过程中，它会发生以下一些事：

新的对象tom被创建，占据内存。
把this指向tom实例，任何this上的引用最终都是指向tom
添加__proto__属性到tom实例上，并且把tom.__proto__指向Person.prototype（后续会讲的原型链）
执行构造函数，最终返回tom对象

// 模拟new的实现
function objectFactory() {
    var obj = new Object(),
    Constructor = [].shift.call(arguments); // 取出第一个参数,即构造函数
    obj.__proto__ = Constructor.prototype;
    var ret = Constructor.apply(obj, arguments);
    return typeof ret === 'object' ? ret : obj;

};

var tom = objectFactory(Person, 'tom')
// 赋值的this === tom
console.log(tom.name) // tom
console.log(tom.sleep) // Function
复制代码

prototype

new 和 constructor 解决了模拟class类的概念，使得产生的多个实例对象有共同的原型，同类型对象内在有了一些联系。看上去很完美，但还有个问题：每个实例对象本质上还是拷贝了构造函数对象里的属性和方法。tom和lucy实例的sleep方法依然创建了两个内存空间进行存储，而不是一个。这样不仅无法数据共享，对内存的浪费也是极大的（想象下再生成10000个tom）。那js作者是如何解决这个问题的？

Brendan Eich为构造函数设置一个prototype属性来保存这些公用的方法或属性 。prototype属性是一个对象，你可以扩展该对象，也可以覆写该对象。当你通过new constructor() 生成实例时，这些实例的公用方法（如：tom.sleep方法）并不会在内存中创建多份，而是通过指针都指向构造函数的prototype属性（如：Person.prototype）。

注意： Person构造函数和Person.prototype都是对象 ，拥有诸多属性。并且对象的属性依然可以是对象，万物皆对象核心。

function Person(name) {
  this.name = name
}

// 构造函数都有一个非空的prototype对象
// 可以扩展该对象，也可以覆写该对象，以下在原型上扩展sleep方法
Person.prototype.sleep = function() { ... }

var tom = new Person('tom')
var lucy = new Person('lucy')
tom.sleep === lucy.sleep // true
复制代码

由于所有实例对象共享同一个prototype对象(构造函数的prototype属性)，那么从外界看起来，prototype对象就好像是实例对象的原型，而实例对象则好像"继承"了prototype对象一样。 这就是我们通俗讲的:js面向对象编程是基于原型 。

Javascript规定， 每一个构造函数都有一个prototype属性 ，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

原型链

我们再深入思考下，js是如何把各个实例跟构造函数的prototype对象（以下称原型对象）联系起来的？它们之间的通道是如何建立起来的？答案是使用new关键字。在上面我们模拟new关键字流程中，有个步骤是: 添加__proto__属性到tom实例上，并且把tom.__proto__指向Person.prototype。所以可以得到结论： 实例与原型对象间关联起来是通过__proto__属性 。

__proto__属性有什么用？当访问实例对象的属性或方法时，如果没有在实例上找到，js会顺着__proto__去查找它的原型，如果找到就返回。由于原型对象（如Person.prototype）也是一个对象，它也可以有自己的原型对象（比如覆写它），这样层层上溯，就形成了一个类似链表的结构，这就是 原型链（prototype chain） 。而通过覆写子类原型对象，再根据js原型链机制，可以让子类拥有父类的内容，就像继承一样，所以 原型链是js继承的基础 。

tom.__proto__ === lucy.__proto__ === Person.prototype // true
tom.sleep() // sleep方法是在原型链上找到的
复制代码

注意new关键字以及原型链查找都是js语言内置的

原文 https://juejin.im/post/5ca49239f265da30916595b4

正文到此结束

所属分类： Java 编程技术

本文标签： java 空间文章代码 ACE 数据 http 本质 Java类万物 js 参数 id https 实例 IO struct App JAVA实例 ip CTO JavaScript
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二

详解JavaScript原型

历史

原型

constructor

new

prototype

原型链

热门推荐

相关文章

说给你听

本文目录

随机标签

书籍教程

近期评论

网站信息

其他链接

关于本站

问题交流