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)
上一篇:在js中使用原型链封装类


下一篇:php简单浏览目录内容