JavaScript 继承与原型链

当谈到继承时，JavaScript 只有一种结构：对象。

每个实例对象都有一个私有属性（__proto__）指向它的构造函数的原型对象（prototype）。

该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。

根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

基于原型链的继承

继承属性

JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，一次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。

遵循 ECMAScript 的标准，obj.[[Prototype]] 符号用于指向 obj 的原型。

[[Prototype]] 可以通过 Object.getPrototypeOf() 和 Object.setPrototypeOf() 来访问。等同于 JavaScript 的非标准但许多浏览器实现的属性 __proto__。

Object.prototype 属性表示 Object 的原型对象。

function fn() {
  this.a = 'A';
  this.b = 'B';
}

/* 这么写也一样
let fn = function () {
  this.a = 'A';
  this.b = 'B';
};
*/

let _fn = new fn(); // { a: 'A', b: 'B' };

// 在 fn 函数的原型上定义属性
fn.prototype.b = 'b';
fn.prototype.c = 'c';

/*
不要直接定义 fn.prototype = { b: 'b', c: 'c' }，这样会打破原型链。
_fn.[[Prototype]] 有属性 b 和 c（其实就是 _fn.__proto__ 或 _fn.constructor.prototype）
_fn.[[Prototype]].[[Prototype]] 是 Object.prototype
_fn.[[Prototype]].[[Prototype]].[[Prototype]] 是 null
这就是原型链的末尾，null
根据定义，null 没有 [[Prototype]]

综上，整个原型链如下：
{ a: 'A', b: 'B' } ---> { b: 'b', c: 'c' } ---> Object.prototype ---> null
*/

console.log(_fn.a); // A
// a 是 _fn 的自身属性吗？是的，属性值为 A

console.log(_fn.b); // B
// b 是 _fn 的自身属性吗？是的，属性值为 B
// 原型上也有一个 b 属性，但是不会被访问到
// 这种情况叫属性屏蔽（property shadowing）

console.log(_fn.c); // c
// c 是 _fn 的自身属性吗？不是，那看看它的原型上有没有
// c 是 _fn.[[Prototype]] 的属性吗？是的，属性值为 c

console.log(_fn.d); // undefined
// d 是 _fn 的自身属性吗？不是，那看看它的原型上有没有
// d 是 _fn.[[Prototype]] 的属性吗？不是，那看看它的原型上有没有
// _fn.[[Prototype]].[[Prototype]] 为 null，停止搜索
// 找不到 d 属性，返回 undefined

继承方法

JavaScript 没有其他基于类的语言所定义的“方法”。在 JavaScript 里，任何函数都可以添加到对象上，作为对象的属性。函数的继承和其他属性的继承没有差别，包括上面的属性屏蔽（这种情况相当于其它语言的方法重写）。

当继承的函数被调用时，this 指向的是当前继承的对象，而不是继承的函数所在的原型对象。

var _fn = {
  a: 1,
  m: function () {
    return this.a + 1;
  },
};

console.log(_fn.m()); // 2
// 当调用 _fn.m 时，this 指向了 _fn

var __fn = Object.create(_fn);
// __fn 是继承自 _fn 的对象

__fn.a = 10;
console.log(__fn.m()); // 11
// 当调用 __fn.m 时，this 指向了 __fn
// 又因为 __fn 继承了 _fn 的 m 函数
// 所以此时的 this.a 即 __fn.a，就是 __fn 的自身属性 a

在 JavaScript 中使用原型

在 JavaScript 中，函数是允许拥有属性的。所有的函数会有一个特别的属性：prototype。

function fn() {}
console.log(fn.prototype);
// 与声明函数无关
// JavaScript 中的函数永远有一个默认原型属性
const fn = function () {};
console.log(fn.prototype);

// fn.prototype
/*
{
  constructor: f fn(),
  __proto__: {
    constructor: f Object(),
    hasOwnProperty: f hasOwnProperty(),
    isPrototypeOf: f isPrototypeOf(),
    ...
  },
};
*/

给 fn 的原型对象添加新属性：

function fn() {}
fn.prototype.foo = 'bar';
console.log(fn.prototype);

// fn.prototype
/*
{
  foo: 'bar',
  constructor: f fn(),
  __proto__: {
    constructor: f Object(),
    hasOwnProperty: f hasOwnProperty(),
    isPrototypeOf: f isPrototypeOf(),
    ...
  },
};
*/

通过 new 操作符来创建基于这个原型对象的 fn 实例：

function fn() {}
fn.prototype.foo = 'bar';
var _fn = new fn();
_fn.name = '_fn';
console.log(_fn);

// _fn
/*
{
  name: '_fn',
  __proto__: {
    foo: 'bar',
    constructor: f fn(),
    __proto__: {
      constructor: f Object(),
      hasOwnProperty: f hasOwnProperty(),
      isPrototypeOf: f isPrototypeOf(),
    },
  },
};
*/

如上所示，_fn 中的 __proto__ 是 fn.prototype。当你访问 _fn 中的一个属性，浏览器首先会查看 _fn 中是否存在这个属性。

如果 _fn 中不包含属性信息，那么浏览器会在 _fn 的 __proto__ 中（同 fn.prototype）进行查找。如果找到，则使用。

如果 _fn 的 __proto__ 中不具有该属性，则检查 _fn 的 __proto__ 的 __proto__ 是否具有该属性。默认情况下，任何函数的原型属性 __proto__ 都是 window.Object.prototype。如果找到，则使用。

如果 _fn 的 __proto__ 的 __proto__ 不具有该属性，那么就会在 _fn 的 __proto__ 的 __proto__ 的 __proto__ 中查找。然而，_fn 的 __proto__ 的 __proto__ 的 __proto__ 其实不存在。因此，在 __proto__ 的整个原型链都被查看后，没有更多的 __proto__，浏览器断言该属性不存在，返回属性值 undefined。

console.log(_fn.name); // _fn
console.log(_fn.foo); // bar
console.log(fn.name); // fn
console.log(fn.foo); // undefined
console.log(fn.prototype.name); // undefined
console.log(fn.prototype.foo); // bar

使用不同的方法来创建对象和生成原型链

使用语法结构创建的对象

var _o = { name: '_o' };

/*
_o 继承了 Object.prototype 上的所有属性
_o 自身没有 hasOwnProperty 属性
hasOwnProperty 是 Object.prototype 的属性
因此 _o 继承了 Object.prototype 的 hasOwnProperty 属性

_o ---> Object.prototype ---> null
*/

function _fn() {
  return '_fn';
}

/*
函数都继承于 Function.prototype
Function.prototype 中包含 call，map 等方法

_fn ---> Function.prototype ---> Object.prototype ---> null
*/

使用构造器创建的对象

在 JavaScript 中，构造器其实就是一个普通的函数。当使用 new 操作符来作用这个函数时，它就可以被称为构造方法（构造函数）。

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

fn.prototype = {
  say: function () {
    console.log(this.name);
  },
};

var _fn = new Fn('_fn');

/*
_fn 是生成的对象，自身属性有 name
在 _fn 被实例化时，_fn.[[Prototype]] 指向了 Fn.prototype
*/

使用 Object.create 创建的对象

Object.create 可以用来创建新对象。新对象的原型就是调用 create 方法的第一个参数。

var a = { a: 1 };
// a ---> Object.prototype ---> null

var b = Object.create(a);
// b ---> a ---> Object.prototype ---> null
console.log(b.a); // 1

var c = Object.create(b);
// c ---> b ---> a ---> Object.prototype ---> null

var d = Object.create(null);
// d ---> null
console.log(d.hasOwnProperty); // undefined，因为 d 没有继承 Object.prototype

使用 class 关键字创建的对象

ECMAScript 6 引入了一套新的关键字来实现 class，但它仍然基于原型。这些新的关键字包括 class，constructor，static，extends 和 super。

class Polygon {
  constructor(width, height) {
    this.width = width;
    this.height = height;
  }
}

class Square extends Polygon {
  constructor(v) {
    super(v, v);
  }

  get area() {
    return this.width * this.height;
  }

  set sideLength(v) {
    this.width = v;
    this.height = v;
  }
}

var _square = new Square(2);

性能

在原型链上查找属性比较耗时，对性能有副作用，这在性能要求苛刻的情况下很重要。另外，试图访问不存在的属性时会遍历整个原型链。

遍历对象的属性时，原型链上的每个可枚举属性都会被枚举出来。要检查对象是否具有自己定义的属性，而不是其原型链上的某个属性，需要使用所有对象从 Object.prototype 继承的 hasOwnProperty 方法。

console.log(a.hasOwnProperty('a')); // true
console.log(b.hasOwnProperty('a')); // false

hasOwnProperty 曾经是 JavaScript 中唯一一个处理属性不会遍历原型链的方法。

Object.keys 返回一个数组，成员参数是对象自身（不包含继承的）可遍历属性的键名。

错误实践：扩展原生对象的原型

扩展 Object.prototype 或其他内置原型是一个错误实践。

扩展原型的唯一理由是支持 JavaScript 引擎新特性，如 Array.forEach。

prototype 和 Object.getPrototypeOf

构造函数有一个叫做 prototype 的特殊属性。该特殊属性可与 new 操作符一起使用。对原型对象的引用被复制到新实例的内部 [[Prototype]] 属性。例如，当执行 var _fn = new Fn(); 时，JavaScript（在内存中创建对象之后，和在运行把函数 Fn 指向对象之前）设置 fn.[[Prototype]] = Fn.prototype;。然后当你访问属性时，JavaScript 首先会检查是否在该对象上，如果不存在，则会在 [[Prototype]] 中查找。这意味着你在 prototype 上定义的内容可以由所有实例有效地共享，你甚至可以稍后更改部分 prototype，并在所有现有实例中显示更改（如果有必要）。

如果你执行 var _fn1 = new Fn(); var _fn2 = new Fn();，那么 _fn1.m 事实上会指向 Object.getPrototypeOf(_fn1).m，它就是你在 Fn.prototype.m 中定义的内容。也就是说：

Object.getPrototypeOf(_fn1).m === Object.getPrototypeOf(_fn2).m === Fn.prototype.m

简而言之，prototype 是用于类的，Object.getPrototypeOf() 是用于实例的，两者功能一致。

当你执行：

var _fn = new Fn();

JavaScript 实际上执行的是：

var _fn = new Object();
_fn.__proto__ = Fn.prototype;
Fn.call(_fn);

结论

在使用原型继承编写复杂代码之前，理解原型继承模型是至关重要的。注意代码中原型链的长度，并在必要时将其分解，以避免可能的性能问题。此外，原型对象不应该被扩展，除非它是为了与新的 JavaScript 特性兼容。

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