一、prototype(原型)
JavaScript 中除了基础类型外的数据类型,都是对象(引用类型)。但是由于其没有类(class,ES6 引入了 class,但其只是语法糖)的概念,如何将所有对象联系起来就成了一个问题,于是就有了原型和原型链的概念。
每个实例对象( object )都有一个私有属性(称之为
__proto__
)指向它的构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象(__proto__
) ,层层向上直到一个对象的原型对象为null
。根据定义,null
没有原型,并作为这个原型链中的最后一个环节。
几乎所有 JavaScript 中的对象都是位于原型链顶端的 Object 的实例。
二、基于原型链的继承
JavaScript 对象是动态的属性“包”(指其自己的属性)。JavaScript 对象有一个指向一个原型对象的链。当试图访问一个对象的属性时,它不仅仅在该对象上搜寻,还会搜寻该对象的原型,以及该对象的原型的原型,依次层层向上搜索,直到找到一个名字匹配的属性或到达原型链的末尾。
遵循ECMAScript标准,
someObject.[[Prototype]]
符号是用于指向 someObject 的原型。从 ECMAScript 6 开始,[[Prototype]] 可以通过Object.getPrototypeOf()
和Object.setPrototypeOf()
访问器来访问。这个等同于 JavaScript 的非标准但许多浏览器实现的属性__proto__
。
但它不应该与构造函数 func 的 prototype 属性相混淆。被构造函数创建的实例对象的[[Prototype]]
指向 func 的 prototype 属性。Object.prototype 属性表示 Object 的原型对象。
三、四种方法创建对象和生成原型链
1. 使用 语法结构 创建的对象
var obj = {a: 1}; var arr = ['abc', 'hello', 233]; function fn() { return 2; }
2. 使用 构造器 创建的对象
在 JavaScript 中,构造器其实就是一个普通的函数。当使用 new 操作符
来作用这个函数时,它就可以被称为构造方法(构造函数)。
function Graph() { this.vertices = []; this.edges = []; } Graph.prototype = { addVertex: function(v){ this.vertices.push(v); } }; var g = new Graph(); // g 是生成的对象,他的自身属性有 'vertices' 和 'edges'。 // 在 g 被实例化时,g.[[Prototype]] 指向了 Graph.prototype。
3. 使用 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
4. 使用 class
关键字创建的对象
ECMAScript6 引入了一套新的关键字用来实现 class
。使用基于类语言的开发人员会对这些结构感到熟悉,但它们是不同的。JavaScript 仍然基于原型。这些新的关键字包括 class
, constructor
,static
,extends
和 super
。
"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);
关于JavaScript实现继承的几种方式请移步以下文章:
JavaScript 继承