本文主要是介绍Javascript 原型链，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

原型链

定义

每个实例对象（object）都有一个私有属性（称之为 __proto__ ）指向它的构造函数的原型对象（prototype）。该原型对象也有一个自己的原型对象（__proto__），层层向上直到一个对象的原型对象为 null。根据定义，null 没有原型，并作为这个原型链中的最后一个环节。

特性

1.遵循ECMAScript标准，someObject.[[Prototype]] 符号是用于指向 someObject 的原型。从 ECMAScript 6 开始，[[Prototype]] 可以通过 Object.getPrototypeOf() 和 Object.setPrototypeOf() 访问器来访问。这个等同于 JavaScript 的非标准但许多浏览器实现的属性 __proto__。

// 让我们从一个函数里创建一个对象o，它自身拥有属性a和b的：
let f = function () {
   this.a = 1;
   this.b = 2;
}
/* 这么写也一样
function f() {
  this.a = 1;
  this.b = 2;
}
*/
let o = new f(); // {a: 1, b: 2}

// 在f函数的原型上定义属性

f.prototype.b = 3;

f.prototype.c = 4;

// 不要在 f 函数的原型上直接定义 f.prototype = {b:3,c:4};这样会直接打破原型链

// o.[[Prototype]] 有属性 b 和 c

//  (其实就是 o.__proto__ 或者 o.constructor.prototype)

// o.[[Prototype]].[[Prototype]] 是 Object.prototype.

// 最后o.[[Prototype]].[[Prototype]].[[Prototype]]是null

// 这就是原型链的末尾，即 null，

// 根据定义，null 就是没有 [[Prototype]]。

// 综上，整个原型链如下:

// {a:1, b:2} ---> {b:3, c:4} ---> Object.prototype---> null

console.log(o.a); // 1

// a是o的自身属性吗？是的，该属性的值为 1

console.log(o.b); // 2

// b是o的自身属性吗？是的，该属性的值为 2

// 原型上也有一个'b'属性，但是它不会被访问到。

// 这种情况被称为"属性遮蔽 (property shadowing)"

console.log(o.c); // 4

// c是o的自身属性吗？不是，那看看它的原型上有没有

// c是o.[[Prototype]]的属性吗？是的，该属性的值为 4

console.log(o.d); // undefined

// d 是 o 的自身属性吗？不是，那看看它的原型上有没有

// d 是 o.[[Prototype]] 的属性吗？不是，那看看它的原型上有没有

// o.[[Prototype]].[[Prototype]] 为 null，停止搜索

// 找不到 d 属性，返回 undefined使用不同的方法来创建对象和生成原型链使用语法结构创建的对象

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

var o = {a: 1};

// o 这个对象继承了 Object.prototype 上面的所有属性
// o 自身没有名为 hasOwnProperty 的属性
// hasOwnProperty 是 Object.prototype 的属性
// 因此 o 继承了 Object.prototype 的 hasOwnProperty
// Object.prototype 的原型为 null
// 原型链如下:
// o ---> Object.prototype ---> null

var a = ["yo", "whadup", "?"];

// 数组都继承于 Array.prototype
// (Array.prototype 中包含 indexOf, forEach 等方法)
// 原型链如下:
// a ---> Array.prototype ---> Object.prototype ---> null

function f(){
  return 2;
}

// 函数都继承于 Function.prototype
// (Function.prototype 中包含 call, bind等方法)
// 原型链如下:
// f ---> Function.prototype ---> Object.prototype ---> null

使用构造器创建的对象

使用new 关键字时：

（1） 创建一个空的简单JavaScript对象（即{}）；

（2）为新创建的对象添加属性__proto__，将该属性链接至构造函数的原型对象
（构造函数的原型对象的constructor属性指向构造函数）；

（3）将新创建的对象作为this的上下文 ；

（4）如果该函数没有返回对象，则返回this。

使用 Object.create 创建的对象

ECMAScript 5 中引入了一个新方法：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 关键字创建的对象

ECMAScript6 引入了一套新的关键字用来实现 class。使用基于类语言的开发人员会对这些结构感到熟悉，但它们是不同的。JavaScript 仍然基于原型。

"use strict";

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

class Square extends Polygon {
  constructor(sideLength) {
    super(sideLength, sideLength);
  }
  get area() {
    return this.height * this.width;
  }
  set sideLength(newLength) {
    this.height = newLength;
    this.width = newLength;
  }
}

var square = new Square(2);

继承的实现方法

参考JS实现继承的几种方式 - 幻天芒 - 博客园

参考

[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain)
[MDN](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/new)
[博客园](https://www.cnblogs.com/humin/p/4556820.html)

这篇关于Javascript 原型链的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！