imshengli blog
Go back

JavaScript 面向对象：构造函数、原型链与四种继承

JavaScript OOP 核心：构造函数、原型链、new 原理、四种继承方式（原型链/组合/寄生组合）详解。

· 10 min

总结

JavaScript 语言具有很强的面向对象编程能力。

JavaScript中的对象体系是怎么样的？ 构造函数的相关细节？ 创建对象的相关细节？

概述

面向对象编程（Object Oriented Programming，缩写为 OOP）；

对象是什么

1）对象是单个实物的抽象。 2）对象是一个容器，封装了属性（property）和方法（method）。

构造函数

JavaScript 语言的对象体系，不是基于“类”的， 而是基于构造函数（constructor）和原型链（prototype）。

JavaScript 语言使用构造函数（constructor）作为对象的模板。 所谓”构造函数”，就是专门用来生成对象的函数。 它提供模板，描述对象的基本结构。 一个构造函数，可以生成多个对象，这些对象都有相同的结构。

// 函数体内部使用了this关键字，代表了所要生成的对象实例。
// 生成对象的时候，必须用new命令，调用Vehicle函数。
var Vehicle = function () {
  this.price = 1000;
};
var v = new Vehicle();
// 对象从构造函数Vehicle继承了price属性
v.price; // 1000
// new命令本身就可以执行构造函数，
// 所以后面的构造函数可以不带括号
var v = new Vehicle;
// 函数被当成普通函数，函数中 this 代表了全局对象
var v = Vehicle();
// 如何保证只能使用 new 调用？
// 一种保证方式是：使用严格模式，
// 在严格模式中，函数内部的this不能指向全局对象，
// 默认等于undefined，
var Vehicle = function () {
  'use strict';
  this.price = 1000;
};
// 另一种解决方式是在构造函数内部判断是否使用new命令
var Vehicle = function () {
  if (!(this instanceof Vehicle)) {
    return new Vehicle();
  }
  this.price = 1000;
};

new 命令

new 命令的原理

使用new命令时，它后面的函数调用就不是正常的调用，而是依次执行下面的步骤。

创建一个空对象，作为将要返回的对象实例； 将这个空对象的原型，指向构造函数的prototype属性； 将这个空对象赋值给函数内部的this关键字； 开始执行构造函数内部的代码；

构造函数之所以叫“构造函数”， 就是说这个函数的目的，就是操作一个空对象（即this对象）， 将其“构造”为需要的样子。

如果构造函数内部有return语句， 而且return后面跟着一个对象， new命令会返回return语句指定的对象； 否则，就会不管return语句，返回this对象。

var Vehicle = function () {
  this.price = 1000;
  return 1000;
};
(new Vehicle()) === 1000
// false

如果对普通函数（内部没有this关键字的函数）使用new命令， 则会返回一个空对象。

function getMessage() {
  // 被 new 忽略
  return 'this is a message';
}
var msg = new getMessage();
msg // {}
typeof msg // "object"

new命令简化的内部流程，可以用下面的代码表示。

function _new(/* 构造函数 */ constructor, /* 构造函数参数 */ param1) {
  // 将 arguments 对象转为数组
  var args = [].slice.call(arguments);
  // 取出构造函数
  var constructor = args.shift();
  // 创建一个空对象，继承构造函数的 prototype 属性
  var context = Object.create(constructor.prototype);
  // 执行构造函数
  var result = constructor.apply(context, args);
  // 如果返回结果是对象，就直接返回，否则返回 context 对象
  return (typeof result === 'object' && result != null) ? result : context;
}
// 实例
var actor = _new(Person, '张三', 28);

new.target

函数内部可以使用new.target属性。 如果当前函数是new命令调用，new.target指向当前函数， 否则为undefined。

function f() {
  // 使用这个属性，可以判断函数调用的时候，是否使用new命令。
  if (!new.target) {
    throw new Error('请使用 new 命令调用！');
  }
  console.log(new.target === f);
}
f() // false
new f() // true

使用 Object.create() 创建实例对象

如何以实例对象作为模板，来生成新的实例？

var person1 = {
  name: '张三',
  age: 38,
  greeting: function() {
    console.log('Hi! I\'m ' + this.name + '.');
  }
};
var person2 = Object.create(person1);
person2.name // 张三
person2.greeting() // Hi! I'm 张三.

对象与继承

对象属性：自身属性和继承属性；

Object.getOwnPropertyNames()

参数：对象； 返回：数组，对象本身属性的键名，不包含继承的属性；

Object.getOwnPropertyNames(Date);

Object.keys

参数：对象； 返回：数组，只获取那些可以枚举的属性；

Object.keys(Date) // []

Object.prototype.hasOwnProperty()

对象实例的hasOwnProperty方法返回一个布尔值， 用于判断某个属性定义在对象自身，还是定义在原型链上。

Date.hasOwnProperty('length')
// true
Date.hasOwnProperty('toString')
// false

in 运算符和 for…in 循环

in运算符返回一个布尔值，表示一个对象是否具有某个属性。 属性包括：自身的、继承的。

'length' in Date // true
'toString' in Date // true

获得对象的所有可枚举属性（不管是自身的还是继承的）， 可以使用for...in循环。

var o1 = {p1: 123};
var o2 = Object.create(o1, {
  p2: { value: "abc", enumerable: true }
});
for (p in o2) {console.info(p);}
// p2
// p1

对象的拷贝

如果要拷贝一个对象，需要做到下面两件事情。

prototype 对象

prototype 对象作用： 为了解决对象的属性和方法共享问题，引入了”原型对象”。 定义所有实例对象共享的属性和方法。

function Person(name) {
  this.name = name;
}

// 所有实例共享的方法定义在 prototype 上
Person.prototype.sayHello = function() {
  console.log('Hello, I am ' + this.name);
};

var p1 = new Person('张三');
var p2 = new Person('李四');

p1.sayHello(); // Hello, I am 张三
p2.sayHello(); // Hello, I am 李四

// 共享同一个方法引用
p1.sayHello === p2.sayHello; // true

原型链

当访问对象的某个属性时，如果对象本身没有该属性， JavaScript 会沿着 __proto__ 链向上查找，直到 null 为止。 这条查找路径就是原型链。

function Animal(type) {
  this.type = type;
}
Animal.prototype.eat = function() {
  console.log(this.type + ' is eating');
};

var cat = new Animal('Cat');

// 原型链关系
cat.__proto__ === Animal.prototype; // true
Animal.prototype.__proto__ === Object.prototype; // true
Object.prototype.__proto__ === null; // true

// 属性查找顺序：cat 自身 -> Animal.prototype -> Object.prototype -> null
cat.eat(); // 'Cat is eating'（在 Animal.prototype 上找到）
cat.toString(); // '[object Object]'（在 Object.prototype 上找到）

instanceof

instanceof 运算符判断对象的原型链中是否存在构造函数的 prototype。

function Foo() {}
var f = new Foo();

f instanceof Foo; // true
f instanceof Object; // true

// 原理：沿着原型链查找
// f.__proto__ === Foo.prototype -> true

// 手动实现 instanceof
function myInstanceof(obj, Constructor) {
  var proto = Object.getPrototypeOf(obj);
  while (proto !== null) {
    if (proto === Constructor.prototype) {
      return true;
    }
    proto = Object.getPrototypeOf(proto);
  }
  return false;
}

myInstanceof(f, Foo); // true
myInstanceof(f, Array); // false

继承

原型链继承

将子类的 prototype 指向父类的实例。

function Parent() {
  this.colors = ['red', 'blue'];
}
Parent.prototype.getColors = function() {
  return this.colors;
};

function Child() {}
Child.prototype = new Parent();

var c1 = new Child();
var c2 = new Child();

// 缺点1：引用类型属性被所有实例共享
c1.colors.push('green');
c2.colors; // ['red', 'blue', 'green'] —— 被污染了

// 缺点2：无法向父类构造函数传参

借用构造函数继承

在子类构造函数中调用父类构造函数。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 借用父类构造函数
  this.age = age;
}

var c1 = new Child('张三', 20);
var c2 = new Child('李四', 22);

c1.colors.push('green');
c2.colors; // ['red', 'blue'] —— 实例独立，不会互相影响

// 缺点：无法继承父类原型上的方法
c1.sayName; // undefined

组合继承

结合原型链继承和借用构造函数继承。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 第二次调用 Parent
  this.age = age;
}
Child.prototype = new Parent(); // 第一次调用 Parent
Child.prototype.constructor = Child;

var c = new Child('张三', 20);
c.sayName(); // '张三'
c.colors.push('green');

var c2 = new Child('李四', 22);
c2.colors; // ['red', 'blue'] —— 不受影响

// 缺点：Parent 构造函数被调用了两次
// Child.prototype 上会有多余的父类实例属性

寄生组合继承（最佳方案）

通过 Object.create 避免多余的父类构造函数调用。

function Parent(name) {
  this.name = name;
  this.colors = ['red', 'blue'];
}
Parent.prototype.sayName = function() {
  console.log(this.name);
};

function Child(name, age) {
  Parent.call(this, name); // 只调用一次 Parent
  this.age = age;
}

// 核心：用 Object.create 创建中间原型，而非 new Parent()
Child.prototype = Object.create(Parent.prototype);
Child.prototype.constructor = Child;

Child.prototype.sayAge = function() {
  console.log(this.age);
};

var c = new Child('张三', 20);
c.sayName(); // '张三'
c.sayAge(); // 20
c instanceof Child; // true
c instanceof Parent; // true

封装为通用函数：

function inheritPrototype(Child, Parent) {
  var prototype = Object.create(Parent.prototype);
  prototype.constructor = Child;
  Child.prototype = prototype;
}

// 使用
function Child(name, age) {
  Parent.call(this, name);
  this.age = age;
}
inheritPrototype(Child, Parent);

ES6 Class（语法糖）

ES6 的 class 本质上是寄生组合继承的语法糖。

class Parent {
  constructor(name) {
    this.name = name;
  }
  sayName() {
    console.log(this.name);
  }
}

class Child extends Parent {
  constructor(name, age) {
    super(name); // 相当于 Parent.call(this, name)
    this.age = age;
  }
  sayAge() {
    console.log(this.age);
  }
}

var c = new Child('张三', 20);
c.sayName(); // '张三'
c.sayAge(); // 20
c instanceof Child; // true
c instanceof Parent; // true

参考链接

Share this post on:
Share this post via WhatsApp Share this post on Facebook Share this post on X Share this post via Telegram Share this post on Pinterest Share this post via email
Previous Post
JavaScript Object：创建方式、原型链与深浅拷贝
Next Post
JavaScript 函数式编程：纯函数、柯里化与组合