当谈到继承时,JavaScript 只有一种结构:对象。每个实例对象(object)都有一个私有属性(称之为 __proto__)指向它的构造函数的原型对象(prototype)。该原型对象也有一个自己的原型对象(__proto__),层层向上直到一个对象的原型对象为 null
。根据定义,null
没有原型,并作为这个原型链中的最后一个环节。
所有的JavaScript对象都是位于原型链顶端的Object()的实例。
基于原型链的继承
继承属性
JavaScript的对象是动态的,JavaScript的对象其实就是动态的变量属性的容器,也就是键值对的容器。每个JavaScript对象都有一个指向一个原型对象的链,当试图访问一个对象的属性时,浏览器会首先在该对象的键值对中寻找该属性,如果没有找到,就会沿着原型链搜寻,依次层层向上,直到找到该属性或者寻找到最顶端的Object()然后返回null。
尝试一下下面这段代码
代码语言:javascript复制let obj = function(){
this.a = 1;
this.b = 2;
}
let emp = new obj()
obj.prototype.b = 3
obj.prototype.c = 4
// a为emp自身的属性
console.log(emp.a);
// b为emp自身的属性
console.log(emp.b);
// c不是emp自身的属性,在原型链上搜寻
console.log(emp.c);
// c不是emp自身的属性,在原型链上搜寻
console.log(emp.d);
运行结果,a和b都是emp自身的属性,因此可以找出。而c和d不是emp自身的属性,因此向上搜索原型链。给原型链上一层的原型设置了b=3
和c=4
,由于emp本身具有b属性,因此b的值依旧是2,然后再上一层的原型中找到了c,但是没有d属性,所以d返回的是undefined
。
可以看看emp的原型链,体会一下
继承方法
JavaScript并没有其他面向对象语言所定义的方法。在JavaScript当中,任何函数都可以作为对象的属性,函数的继承与其他的属性继承没有区别,包括对属性的重写。
看看下面这段代码
代码语言:javascript复制let obj = {
num: 2,
func: function(){
return this.num;
}
}
// 调用obj的func
console.log(obj.func());
// 使用Object.create创建一个继承自obj的对象
let emp = Object.create(obj)
// 修改emp的num为3
emp.num = 3
// 调用emp的func
console.log(emp.func());
运行结果如下,可以看到emp的num被重写了。
看看emp的原型链体会一下。当继承的函数被调用时,this指向的是当前对象,而不是原型对象,这点与一般的面向对象语言一直。
在JavaScript当中使用原型链
因为JavaScript是基于原型的,因此函数是允许拥有属性的,如图。所有的函数都有一个特别的属性——prototype。
我们可以给func0的原型链对象添加新的属性,如下。可以看到上一层的原型多出了一对属性。
那么我们如何给这个函数本身添加属性呢?我们通过新建一个基于func0原型的实例,然后添加一些属性到该原型对象当中。
创建对象和生成原型链
使用语法结构
代码语言: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
使用构造器
代码语言:javascript复制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。
使用Object.create()
代码语言:javascript复制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关键字
CMAScript6引入了一套新的关键字用来实现 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);
性能
大多数情况下,我们只需要对象本身的属性而不需要原型链上的属性。同时,在原型链上查找属性比较耗时,在试图访问不存在的属性时还会遍历整个原型链,对性能有副作用,这在性能要求苛刻的情况下很重要。因此我们需要一种方法来实现检查对象是否具有自己定义的属性,我们可以使用从Object.prototype
继承的hasOwnProperty
(en-US)方法。这是 JavaScript 中唯一一个处理属性并且不会遍历原型链的方法。
下面的实例运行分别为true、true、false、true。
代码语言:javascript复制class person {
constructor() {
this.name = "Jack";
this.age = 20;
}
}
person.prototype.gender = "male"
let emp = new person()
console.log(emp.hasOwnProperty("name"));
console.log(emp.hasOwnProperty("age"));
console.log(emp.hasOwnProperty("gender"));
console.log(emp.__proto__.hasOwnProperty("gender"));
prototype与Object.getPrototypeOf
prototype
是用于类的,而 Object.getPrototypeOf()
是用于实例的(instances),两者功能一致。
尝试下面这一小段代码。输出结果为male、male
。
class person {
constructor() {
this.name = "Jack";
this.age = 20;
}
}
person.prototype.gender = "male"
let emp = new person()
console.log(Object.getPrototypeOf(emp).gender);
console.log(person.prototype.gender);
像上面的例子中,如果你执行 let emp = new person()
那么 emp.gender
事实上会指向 Object.getPrototypeOf(emp).gender
,它就是你在 person.prototype.gender
中定义的内容。也就是说:Object.getPrototypeOf(emp).gender == person.prototype.gender
。
综上,当执行下面代码时
代码语言:javascript复制let emp = new person()
就等同于执行
代码语言:javascript复制let emp = new Object();
emp.__proto__ = person.prototype;
同理,当执行寻找某属性代码时
代码语言:javascript复制emp.gender
首先会查找emp是否有该属性,没有的话查找Object.getPrototypeOf(emp).gender
,如果仍旧没有,它会继续查找 Object.getPrototypeOf(Object.getPrototypeOf(emp)).gender
,直到找到该属性或者溯源到原型链顶端。