JavaScript继承与原型链

2023-10-21 11:27:18 浏览数 (3)

当谈到继承时,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=3c=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仍然基于原型。这些新的关键字包括 classconstructorstaticextendssuper

代码语言: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);

性能

大多数情况下,我们只需要对象本身的属性而不需要原型链上的属性。同时,在原型链上查找属性比较耗时,在试图访问不存在的属性时还会遍历整个原型链,对性能有副作用,这在性能要求苛刻的情况下很重要。因此我们需要一种方法来实现检查对象是否具有自己定义的属性,我们可以使用从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

代码语言:javascript复制
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,直到找到该属性或者溯源到原型链顶端。

0 人点赞