深刻理解Javascript中的原型系统

在Brendan Eich大神为JavaScript设计面向对象系统时，之所以选择基于原型的面向对象系统，并不是因为时间匆忙，它设计起来相对简单，而是因为从一开始Brendan Eich就没有打算在JavaScript中加入类的概念。

在以类为中心的面向对象编程语言中，类和对象的关系可以想象成铸模和铸件的关系，对象总是从类中创建而来。而在原型编程的思想中，类并不是必需的，对象未必需要从类中创建而来，一个对象是通过克隆另外一个对象所得到的。就像科幻电影中那样，通过克隆可以创造另外一个一模一样的人，而且本体和克隆体看不出任何区别。

原型模式不单是一种设计模式，也被称为一种编程泛型。

虽然在新版本也就是ES6中增加了class的实现，但是实际上也只是一种语法糖，本质上底层还是函数。

javascript语言有自己的一套基于原型的编程基本规则：

  • 1.所有的数据都是对象。
  • 2.要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它。
  • 3.对象会记住它的原型。
  • 4.如果对象无法响应某一个请求，它会把这个请求委托给它自己的原型。

一、什么叫做所有的数据都是对象？

Javascript在设计的时候模仿java引入了两套类型机制：基本类型和对象类型。

基本类型包括：undefined、number、boolean、null、string、
引用类型包括：function、object

按照Javascript的设计者的本意，除了undefined之外，一切都应该是对象，为了实现这一个目标，number、boolean、string 这几种基本数据类型也可以通过"包装类"的方式变成对象类型进行处理。

我们虽然不能说Javascript中所有的数据都是对象，但是可以说绝大部分的数据都是对象，那么在Javascript中一定会有一个根对象存在，这些对象追根溯源都来自于这个对象。

这个对象还真的存在——他就是 Object.prototype;

这个平时不太被我们关注的对象 Object.prototype是一个空的对象，我们在Javascript中遇到的每一个对象实际上都是从 Object.prototype 对象克隆而来，Object.prototype 对象就是它们的原型比如下面的对象 obj1 和 obj2

var obj1 = new Object();
var obj2 = {};

使用ES5中的 Object.getPrototypeOf 可以查看着两个对象的原型：

console.log(Object.getPrototypeOf(obj1) === Object.prototype); // true;
console.log(Object.getPrototypeOf(obj2) === Object.prototype); // true;

二、要找到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它

在Javascript语言里面，我们并不需要关心克隆的细节，这些细节在引擎内部已经替我们实现了，我们需要做的只是显示地调用：

var obj1 = new Object();
var obj2 = {};
此时引擎内部会从 Object.prototype 上面克隆一个对象出来，我们最终得到的就是这个对象。

我们传统的从构造器中是如何得到一个对象呢？看下面的代码

function Perosn(name)
    this.name = name;
}

Person.prototype.getName = function () {
    return this.name;
}

var p1 = new Perosn('louis');

console.log(p1.name); // louis
console.log(p1.getName()); // louis
console.log(Object.getPrototypeOf(p1) === Person.prototype); // true

在Javascript中没有类的概念，这里却明明调用了new Perosn()。这该如何解释？

其实这里的Perosn并不是类，而是一个函数构造器，Javascript的函数既可以作为普通的函数被调用，也可以作为构造器被调用，当使用new运算符来调用函数时候，此时的函数就是一个构造器，我们平时都叫它构造函数。

实际上使用new运算符来创建对象的过程，也是先克隆 Object.prototype对象 再进行一些其他额外操作的过程。

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

Person.prototype.getName = function () {
  return this.name;
};

var objectFactory = function () {
  // 从Object.prototype上克隆一个空的对象
  var obj = new Object();
  // 取得外部传入的构造器，此例是Person
  var Constructor = [].shift.call(arguments);
  // 指向正确的原型
  obj.__proto__ = Constructor.prototype;
  // 借用外部传入的构造器给obj设置属性
  var ret = Constructor.apply(obj, arguments);

  // 确保构造器总是会返回一个对象
  return typeof ret === 'object' ? ret : obj;
};

var p2 = objectFactory(Person, 'sven');

console.log(p2.name);    // 输出：sven
console.log(p2.getName());     // 输出：sven
console.log(Object.getPrototypeOf(p2) === Person.prototype);    // 输出：true

三、对象会记住它的原型

如果请求可以再一个链条中依次往后面传递，那么每一个节点都必须知道它的下一个节点。同理，要完成Javascript语言中的查找机制，每一个对象都至少记住它自己的原型。

目前我们一直讨论”对象的原型“，实际上这种说法是不准确的，我们只能说，对象的构造器有原型。对于”对象吧请求委托给它自己的原型“这句话，更好的说法是对象把请求委托给它的构造器的原型。那么对象如何把请求顺利的转交给它的构造器的原型呢？

我们深入探究一下就会发现，Javascript给对象提供了一个名为__proto__的隐藏属性，某个对象的__proto__属性
会默认指向它的构造器的原型对象，即{ Constructor }.prototype 在一些浏览器中，__proto__被公开出来，我们
可以在Chrome或者Firefox上用这段代码验证：

    var a = new Object();
    console.log(a.__proto__ === Object.prototype); // true;

现在我们明白了，实际上，__proto__就是对象跟“对象构造器原型联系起来的纽带，正是因为对象需要通过__proto__属性来记住它的构造器的原型，所以在上述演示new的执行过程的代码中我们会使用

obj.__proto__ = Constructor.prototype来手动给obj对象设置正确的proto指向。

通过上面的代码，我们让obj.__proto__指向**Person.prototype**, 而不是原来的Object.prototype。

四、如果对象无法响应某一个请求，它会把这个请求委托给它的构造器的原型

这条规则是原型继承范式的精髓所在，意思是，当一个对象无法响应某一个请求的时候，它会顺着原型链把请求传递下去，指导遇到一个可以处理该请求的对象为止。

而在JavaScript中，每个对象都是从Object.prototype对象克隆而来的，如果是这样的话，我们只能得到单一的继承关系，即每个对象都继承自Object.prototype对象，这样的对象系统显然是非常受限的。

实际上，虽然Javascript的对象最初都是由Object.prototype对象克隆而来，但是构造器的原型并不仅限于Object.prototype上而是可以动态指向其他对象，这样一来，当对象a想要借用对象b的能力的时候可以有选择性的将 对象a的构造器的原型指向对象b从而实现继承的效果。

下面的代码使我们最常使用的原型继承方式：

var obj = { name: 'louis' };
var A = function () { };
A.prototype = obj;
var a = new A();
console.log(a.name); // louis

我们来梳理一下执行这段代码的时候引擎做了哪些事情：

  • 1.首先，尝试遍历对象a中的所有属性，但是没有找到name这个属性。
  • 2.查找name属性的这个请求被委托给a的构造器原型，它被a.proto记录并指向A.prototype,而 A.prototype被设置为对象obj
  • 3.在对象obj中找到了name属性，并返回它的值。

当我们期望得到一个“类”继承自另外一个“类”的效果时，往往会用下面的代码来模拟实现：

var A = function () { };
A.prototype = { name: 'louis' };

var B = function () { };
B.prototype = new A();

var b = new B();
console.log(b.name);  // louis

再看看这段代码执行的时候，引擎做了什么事情：

  • 1.首先，尝试遍历对象b中的所有属性，但是没有找到name这个属性
  • 2.查找name属性的请求被委托到对象b的构造器的原型，它被b.proto记录并指向 B.prototype 而B.prototype被设置为一个通过new A()创建出来的对象。
  • 3.在该对象中依然没有找到name属性，于是请求被继续委托给这个对象构造器的原型 A.prototype。
  • 4.在A.prototype中找到了name属性，并返回它的值。

和把B.prototype直接指向一个字面量对象相比，通过B.prototype = new A()形成的原型链比之前多了一层。但二者之间没有本质上的区别，都是将对象构造器的原型指向另外一个对象，继承总是发生在对象和对象之间。

最后还要留意一点，原型链并不是无限长的。现在我们尝试访问对象a的address属性。而对象b和它构造器的原型上都没有address属性，那么这个请求会被最终传递到哪里呢？

实际上，当请求达到A.prototype，并且在A.prototype中也没有找到address属性的时候，请求会被传递给A.prototype的构造器原型Object.prototype，显然Object.prototype中也没有address属性，但Object.prototype的原型是null，说明这时候原型链的后面已经没有别的节点了。所以该次请求就到此打住，a.address返回undefined。

a.address // 输出：undefined”

五、关于js的探索

ECMAScript6 带来了新的Class用法。这让js看起来更像是一门基于类的语言，但是其实背后仍然是通过原型机制来创建对象。
通过Class创建对象的一段简单的实例如下：

class Animal {
  constructor(name) {
    this.name = name;
  }
  getName() {
    return this.name;
  }
}

class Dog extends Animal {
  constructor(name) {
    super(name);
  }
  speak() {
    return "woof";
  }
}

var dog = new Dog("Scamp");
console.log(dog.getName() + ' says ' + dog.speak());

上面这段代码中，Dog 这个“类” 继承了“父类”Animal，虽然在Dog这个“类”中没有getName()这个方法，但是他继承了来自父亲的能力，同时也拥有自己的能力。有一点语法需要注意：constrcutor 和 后面的跟随的方法不需要加“，“号。
否则会报错。

六、总结：

这篇手记主要从四个方面介绍了js基于原型的一些规则：

  • 1.所有的数据都是对象。
  • 2.要得到一个对象，不是通过实例化类，而是找到一个对象作为原型并克隆它。
  • 3.对象会记住它的原型。
  • 4.如果对象无法响应某一个请求，它会把这个请求委托给它自己的原型。

我们可以把这种基于原型编程规范看成一种编程范式，它构成了js这门语言的根本，
通过原型模式实现面向系统虽然简单，但是同样强大。

以上

©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 203,362评论 5赞 477
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,330评论 2赞 381
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 150,247评论 0赞 337
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,560评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,580评论 5赞 365
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,569评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,929评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,587评论 0赞 258
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,840评论 1赞 297
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,596评论 2赞 321
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,678评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,366评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,945评论 3赞 307
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,929评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,165评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 43,271评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,403评论 2赞 342

推荐阅读更多精彩内容