阅读 236

对象、原型链、类、继承【下】

概述

上篇文章中,我们使用ES5通过构造函数和原型对象实现了「类」,通过原型链实现了「类」的继承。在ES6中,新增classextend实现了类和继承,提供了更接近传统语言的写法。

class

和大多数面向对象的语言不同,JavaScript 在诞生之初并不支持类,也没有把类继承作为创建相似或关联的对象的主要的定义方式。所以从ES1ES5这段时期,很多库都创建了一些工具,让JavaScript看起来也能支持类。尽管一些JavaScript开发者仍强烈主张该语言不需要类,但在流行库中实现类已成趋势,ES6也顺势将其引入。但ES6 中的类和其他语言相比并不是完全等同的,目的是为了和JavaScript的动态特性相配合。

定义

通过class关键字,可以定义类。可以把class看做一个语法糖,一个在ES5中必须非常复杂才能完成的实现的封装。它使得定义一个类更加清晰明了,更符合面向对象编程的语法。

对比ES5

我们来对比一下:

// es5
function Person5 (name) {
    this.age = 12
    this.name = name
    this.sayAge = function () {
        return this.age
    }
}
Person5.prototype.sayName = function () {
    return this.name
}
let p1 = new Person5('zhu')
p1.age // 12
p1.sayName() // 'zhu'

// es6
class Person6 {
    constructor (name) {
        this.age = 12
        this.name = name
        this.sayAge = function () {
            return this.age
        }
    }
    sayName () {
        return this.name
    }
}

let p2 = new Person6('zhu')
p2.age // 12
p2.sayName() // 'zhu'
复制代码

类的原型对象的方法(sayName),直接定义在类上即可。类的实例属性(name)在constructor方法里面定义。

两者相比,ES5更能说请ECMAScript通过prototype实现类的原理,ES6写法更加清晰规范。 而生成实例的方法还是一致的:通过new命令。因为,class只是定义类的语法糖。

原型对象的属性

至于类原型对象的属性的定义,目前还在提案阶段

// es5
function Person5 () {}
Person5.prototype.shareSex = 'man'
let p1 = new Person5()
p1.shareSex // 'man'
// es6
class Person6 {
    shareSex = 'man'
}
let p2 = new Person6()
p2.shareSex // 'man'
复制代码

constructor

类的constructor方法的行为模式完全与ES5的构造函数一样(关于构造函数可以参考{% post_link JavaScript高级程序设计第三版 %} 第6.2.2章节)。如果未定义,会默认添加。以下两个定义是等效的。

class Person {}
class Person {
    constructor () {
        return this
    }
}
复制代码

表达式

上面的例子中,类的定义方式是声明式定义。与函数相似,类也有表达式定义的形式。

let Person = class {}
复制代码

虽然使用了声明变量,但是类表达式并不会提升。所以,声明式声明和表达式式声明除了写法不同,完全等价。

如果两种形式同时使用,声明式定义的名称可作为内部名称使用,指向类本身。但不能在外部使用,会报错。

let PersonMe = class Me {
    constructor () {
        Me.age = 12 
    }
    sayAge () {
        return Me.age
    }
}
let p2 = new PersonMe()
p2.age // undefined
PersonMe.age // 12
p2.sayAge() // 12
Me.name // Uncaught ReferenceError: Me is not defined
PersonMe.name // Me
复制代码

我们看到PersonMe.name的值是Me,而不是PersonMe。由此可知,变量PersonMe只是存储了一个执行Me这个类的指针。

而类名之所以可以在内部使用,是因为具名表达式实际是这样的:

let PersonMe = (function() {
    const Me = function() {
        Me.age = 12
    }
    Me.prototype.sayAge = function () {
        return Me.age
    }
    return Me
})()
复制代码

也可以使用类表达式立即调用,以创建单例。

let p1 = new class {
    constructor (name) {
        this.name = name
    }
    sayName () {
        return this.name
    }
}('zhu')
复制代码

一级公民

在编程中,能被当做值来使用的就称为一级公民(first-class citizen)。这意味着它能做函数的参数、返回值、给变量赋值等。在ECMAScript中,函数是一级公民;在ES6中,类同样也是一级公民。

不可在内部重写类名

在类的内部,类名是使用const声明的,所以不能在类的内部重写类名。但是在类的外部可以,因为无论是声明还是表达式的形式,在定义类的上下文中,函数名都只是存储指向类对象的指针。

区别

虽然我们说class是语法糖,但是其某些地方表现与ES5中也是有些区别的。

new.target

new是从构造函数生成实例对象的命令。类必须使用new调用,否则会报错,这点与ES5中的构造函数不同。

// es5
function Person5 (name) {
    return name
}
Person5('zhu') // zhu
// es6
class Person6 {
    constructor (name) {
        return name
    }
}
Person6('zhu') // Uncaught TypeError: Class constructor Person6 cannot be invoked without 'new'
复制代码

而这正是通过new命令在ES6中新增的target属性实现的。该属性一般用在构造函数之中,返回new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的,new.target会返回undefined,反之会返回作用的类。

class Person6 {
    constructor () {
        console.log(new.target)
    }
}

Person6() // undefined
new Person6() // Person6
复制代码

值得注意的是,子类继承父类时,new.target会返回子类。

class Father {
    constructor () {
        console.log(new.target)
    }
}
class Son extends Father {}
new Son() // Son
复制代码

最后,我们使用new.targetES5中模拟一下ES6class的行为。

function Person5 () {
    if(new.target === undefined) {
        throw new TypeError("Class constructor Person6 cannot be invoked without 'new'")
    }
    console.log('success,', new.target === Person5)
}

Person5() // Uncaught TypeError: Class constructor Person6 cannot be invoked without 'new'
new Person5() // success, true
复制代码

类的方法不可枚举

ES6中,在类上定义的方法,都是不可枚举的(non-enumerable)。在ES5中是可以的。

// es5
function Person5 (name) {
    this.age = 12
    this.name = name
}
Person5.prototype.sayName = function () {
    return this.name
}

// es6
class Person6 {
    constructor (name) {
        this.age = 12
        this.name = name
    }
    sayName () {
        return this.name
    }
}

Object.getOwnPropertyDescriptor(Person5.prototype, 'sayName').enumerable // true
Object.getOwnPropertyDescriptor(Person6.prototype, 'sayName').enumerable // false
Object.keys(Person5.prototype) // ['sayName']
Object.keys(Person6.prototype) // []
Object.getOwnPropertyNames(Person5.prototype) // ["constructor", "sayName"]
Object.getOwnPropertyNames(Person6.prototype) // ["constructor", "sayName"]
复制代码

不存在变量提升

函数可以在当前作用域的任意位置定义,在任意位置调用。类不是函数,不存在变量提升。

// es5
new Person5()
function Person5 () {}
// es6
new Person6() // Uncaught ReferenceError: Person6 is not defined
class Person6 {}
复制代码

内部方法不是构造函数

类的静态方法、实例的方法内部都没有[[Construct]]属性,也没有原型对象(没有prototype属性)。因此使用new来调用它们会抛出错误。

class Person6 {
    sayHi () {
        return 'hi'
    }
}
new Person6.sayHi // Uncaught TypeError: Person6.sayHi is not a constructor

Person6.prototype.sayHi.prototype // undefined
复制代码

同样的,箭头函数(() => {}})也一样。

let Foo = () => {}
new Foo // Uncaught TypeError: Person6.sayHi is not a constructor
复制代码

这种不是构造函数的函数,在ES5中,只有内置对象的方法属于这种情况。

Array.prototype.concat.prototype // undefined
复制代码

改进

除了区别,class命令也有一些对ES5构造函数的改进。比如,写法的改变,更加灵活、规范等等。

严格模式

在类和模块的内部,默认开启了严格模式,也就是默认使用了use strict

动态方法名

ES6中,方法名可以动态命名。访问器属性也可以使用动态命名。

let methodName1 = 'sayName'
let methodName2 = 'sayAge'
class Person {
    constructor (name) {
        this.name = name 
    }
    [methodName1] () {
        return this.name
    }
    get [methodName2] () {
        return 24
    }
}
let p1 = new Person('zhu')
p1.sayName() // zhu
复制代码

访问器属性

ES5中,如果要将构造函数的实例属性设置成访问器属性,你要这样做:

function Person5 () {
    this._age = 12
    Object.defineProperty(this, 'age', {
        get: function () {
            console.log('get')
            return this._age
        },
        set: function (val) {
            console.log('set')
            this._age = val
        }
    })
}
let p1 = new Person5()
p1.age // get 12
p1.age = 15 // set
p1.age // get 15
复制代码

ES6中我们有了更方便的写法:

class Person6 {
    constructor () {
        this._age = 12
    }
    get age () {
        console.log('get')
        return this._age
    }
    set age (val) {
        console.log('set')
        this._age = val
    }
}
let p2 = new Person6()
p2.age // get 12
p2.age = 15 // set
p2.age // get 15
复制代码

静态属性和静态方法

类的静态属性和静态方法是定义在类上的,也可以说是定义在构造函数的。它们不能被实例对象继承,但是可以被子类继承。需要注意的是,静态属性如果是引用类型,子类继承的是指针。 在ES6中,除了constructor方法,在类的其他方法名前面加上static关键字,就表示这是一个静态方法。

// es5
function Person5 () {}
Person5.age = 12
Person5.sayAge = function () {
    return this.age
} 
Person5.age // 12
Person5.sayAge() // 12
let p1 = new Person5()
p1.age // undefined
p1.sayAge // undefined
// 继承
Sub5.__proto__ = Person5
Sub5.age // 12
Sub5.sayAge() // 12
// es6 
class Person6 {
    static sayAge () {
        return this.age
    }
}
Person6.age = 12
Person6.age // 12
Person6.sayAge() // 12
let p2 = new Person5()
p2.age // undefined
p2.sayAge // undefined
// 继承
class Sub6 extends Person6 {}
Sub6.age // 12
Sub6.sayAge() // 12
复制代码

需要注意的是,静态方法里面的this关键字,指向的是类,而不是实例。所以为了避免混淆,建议在静态方法中,直接使用类名。

class Person1 {
    constructor (name) {
        this.name = name
    }
    static getName () {
        return this.name
    }
    getName () {
        return this.name
    }
}

let p1 = new Person1('zhu')
p1.getName() // 'zhu'
Person1.getName() // 'Person1'
class Person2 {
    constructor (name) {
        this.name = name
    }
    static getName () {
        return Person2.name
    }
    getName () {
        return this.name
    }
}
let p2 = new Person2('zhu')
p2.getName() // 'zhu'
Person2.getName() // 'Person2'
复制代码

从上面的实例中我们可以看到,静态方法与非静态方法是可以重名的。

ES6 明确规定,Class 内部只有静态方法,没有静态属性。所以,目前只能在Class外部定义(Person6.age = 12)。 但是,现在已经有了相应的提案

class Person6 {
   static age = 12
   static sayAge () {
       return this.age
   }
}
复制代码

私有方法和私有属性

私有属性其实就在类中提前声明的,只能在类内部使用的属性。如下示例:


class PersonNext {
    static x; // 静态属性;定义在类上,会被子类继承
    public y; // 实例属性。一般简写为 [y;],忽略public关键字,定义在实例上。
    #z; // 私有属性。类似于其他语言中的private。只能在类内部使用
}

复制代码

由于此写法还在提案阶段,本文暂不详细说明,有兴趣可以关注提案的进度

其他

this 的指向

Class上实例方法中的this,默认指向实例本身。但是使用解构赋值后,在函数指向时,作用域指向发生了改变,就有可能引起报错。虽说有解决的方法,但是还是尽量避免使用这种方式吧。

class Person6 {
    constructor () {
        this.name = 'zhu'
    }
    sayName () {
        return this.name
    }
}
let p1 = new Person6()
p1.sayName() // zhu
let { sayName } = p1
sayName() // Uncaught TypeError: Cannot read property 'name' of undefined
sayName.call(p1) // zhu
复制代码

babel

最后,我们看一下classbabel中如何转换成ES6的

let methodName = 'sayName'
class Person {
  	constructor (name) {
    	this.name = name
      	this.age = 46
    }
	static create (name) {
    	return new Person(name)
    }
  	sayAge () {
    	return this.age
    }
  	[methodName] () {
    	return this.name
    }
}
复制代码
"use strict";

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var methodName = "sayName";
var Person = (function() {
  function Person(name) {
    _classCallCheck(this, Person);
    this.name = name;
    this.age = 46;
  }
  Person.create = function create(name) {
    return new Person(name);
  };
  Person.prototype.sayAge = function sayAge() {
    return this.age;
  };
  Person.prototype[methodName] = function() {
    return this.name;
  };
  return Person;
})();
复制代码

_classCallCheck方法算是new.target的polyfill。

继承

class继承主要就是添加了extends关键字,相比与class,extends不仅仅是语法糖,还实现了许多ES5无法实现的功能。也就是说,extends是无法完全降级到ES5的。比如,内置对象的继承

extends

class 可以通过extends关键字实现继承,这比ES5的通过修改原型链实现继承,要清晰和方便很多。 我们先来回顾下ES5的实现:

function Father5 (name) {
    this.name = name
    this.age = 46
}
Father5.prototype.sayName = function () {
    return this.name
}
Father5.prototype.sayAge = function () {
    return this.age
}

Father5.create = function (name) {
    return new this(name)
}

function Son5 (name) {
    Father5.call(this, name)
}
Son5.prototype = Object.create(Father5.prototype, {
    constructor: {
        value: Son5,
        enumerable: true,
        writable: true,
        configurable: true
    }
})
Son5.__proto__ = Father5

Son5.prototype.setAge = function (age) {
    this.age = age
}

var s1 = Son5.create('zhu')
s1.constructor // Son5
s1.sayName() // 'zhu'
s1.sayAge() // 46
s1.setAge(12)
s1.sayAge() // 12
复制代码

然后,我们看下classextends 如何实现:

let Father6 = class Me {
    constructor (name) {
        this.name = name
        this.age = 46
    }
    static create (name) {
    	return new Me(name)
    }
    sayName () {
        return this.name
    }
    sayAge () {
        return this.age
    }
}

let Son6 = class Me extends Father6 {
    constructor (name) {
        super(name)
    }
    setAge (age) {
        this.age = age
    }
}

let s2 = Son6.create('sang')
s2.constructor // Son6
s2.sayName() // 'sang'
s2.sayAge() // 46
s2.setAge(13)
s2.sayAge() // 13
复制代码

我们看到extendssuper(name)做了三件事:实例属性继承,原型对象继承,静态属性继承。接下来,我们就来说说super

super

在子类中,如果定义了constructor,则必须在第一行调用super。因为super对子类的this进行了封装,使之继承了父类的属性和方法。 如果在super调用之前使用this,会报错。

class Son extends Father {
    constructor (name) {
        this.name = name // Uncaught ReferenceError: Must call super constructor in derived class before accessing 'this' or returning from derived constructor
        super(name)
        this.name = name // 正常执行
    }
}
复制代码

如果没有定义constructor,则会默认添加。

class Son extends Father {}
// 等同于
class Son extends Father {
    constructor (..arg) {
        super(..arg)
    }
}
复制代码

super关键字必须作为一个函数或者一个对象使用,如果作为值使用会报错。

class Son extends Father{
    constructor (name) {
        super(name)
		console.log(super) // Uncaught SyntaxError: 'super' keyword unexpected here
    }
}
复制代码

作为函数调用时,只能在子类的constructor函数中,否则也会报错。

作为对象使用时,在普通方法中,指向的是原父类的原型对象;在静态方法中,指向的是父类本身。

最后,由于对象总是继承其他对象的,所以可以在任意一个对象中,使用super关键字

var obj = {
  toString() {
    return "MyObject: " + super.toString();
  }
};

obj.toString(); // MyObject: [object Object]
复制代码

唯一在constructor中可以不调用super的情况是,constructor显式的返回了一个对象。 不过,这种写法好像没什么意义。

没有继承

ECMAScript中,我们会经常使用字面量去「构造」一个基本类型数据。这其实是使用new命令构造一个实例的语法糖。这往往让我们误以为在ECMAScript中,一切函数都是构造函数,而一切对象都是这些构造函数的实例,而ECMAScript也是一门面向对象的语言。

// 引用类型
var obj = {} // var obj = new Object()
var arr = [] // var arr = new Array()
// 值类型
var str = "" // var strObj = new String();var str = strObj.valueOf()  
复制代码

ECMAScript并不是纯粹的面向对象语言,它里面也有函数式编程的东西。所以,并不是每个函数都有原型对象,都有constructor

比如原生构造函数的原型对象上面的方法(如Array.prototype.concatNumber.prototype.toFixed)都是没有prototype属性的。还有,箭头函数也是没有prototype属性的。所以,这些函数是不能是用new命令的,如果用了会抛错。

new Array.prototype.concat() // Uncaught TypeError: Array.prototype.concat is not a constructor
复制代码

这些没有prototype属性的方法,是函数式编程的实现,看起来也更纯粹。使用这些方法时,也建议使用lambda的链式语法。

表达式继承

extends后面能接受任意类型的表达式,这带来了巨大的可能性。例如,动态的决定父类。

class FatherA {}
class FatherB {}
const type = 'A'
function select (type) {
    return type === 'A' ? FatherA : FatehrB 
}
class Son extends select('A')  {
    constructor () {
        super()
    }
}
Object.getPrototypeOf(Son) === FatherA // true
复制代码

如果,想要一个子类同时继承多个对象的方法呢?我们也可以使用mixin

Mixin

Mixin 指的是多个对象合成一个新的对象,新对象具有各个组成成员的接口。下面示例,mixin的返回对象的原型对象,是传入的几个对象的原型对象的合成。

const objA = {
    sayA() {
        return 'A'
    }
}
const objB = {
    sayB() {
        return 'B'
    }
}
const objC = {
    sayC() {
        return 'C'
    }
}
function mixin (...args) {
    const base = function () {}
    Object.assign(base.prototype, ...args)
    return base
}
class Son extends mixin(objA, objB, objC) {}
let s1 = new Son()
s1.sayA() // 'A'
s1.sayB() // 'B'
s1.sayC() // 'C'
复制代码

我们更进一步,将实例对象也合成进去。

function mix(...mixins) {
  class Mix {}

  for (let mixin of mixins) {
    copyProperties(Mix.prototype, mixin); // 拷贝实例属性
    copyProperties(Mix.prototype, Reflect.getPrototypeOf(mixin)); // 拷贝原型属性
  }

  return Mix;
}

function copyProperties(target, source) {
  for (let key of Reflect.ownKeys(source)) {
    if ( key !== "constructor"
      && key !== "prototype"
      && key !== "name"
    ) {
      let desc = Object.getOwnPropertyDescriptor(source, key);
      Object.defineProperty(target, key, desc);
    }
  }
}
复制代码

内置对象的继承

ES5及之前,无法通过继承机制来继承内置对象的某些特性。我们以试图创建一个特殊数组为例:

// es5
// Array 的特性
var colors = []
colors[0] = 'red'
// length 跟着改变
colors.length // 1
// 改变数组的length
colors.length = 0
colors[0] // undefined

// 试图使用ES5的方式继承
function MyArray () {
    Array.apply(this)
}
MyArray.prototype = Object.create(Array.prototype, {
    constructor: {
        value: MyArray,
        writable: true,
        configurable: true,
        enumerable: true
    }
})

var colors = new MyArray()
colors[0] = 'red'
// length 没有跟着改变
colors.length // 0
// 改变数组的length
colors.length = 0
colors[0] // 'red'
复制代码

结果并不尽如人意,我们继续使用ES6的继承:

class MyArray extends Array {}
let colors = new MyArray()
colors[0] = 'red'
colors.length // 1
colors.length = 0
colors[0] // undefined
复制代码

与我们的预期完全一致。所以,ES5ES6中对内置对象的继承还是有区别的。

ES5中,this的值是被MyArray函数创建的,也就是说this的值其实是MyArray的实例,然后Array.apply(this)被调用,this上面又被添加了Array上面一些附加的方法和属性,而内置的属性和方法并没有被添加到this上。

而在ES6中,this的值会先被Array创建(super()),然后才会把MyArray的上面的附加属性和方法添加上去。

基于此,我们可以通过继承内置对象实现更多更利于我们自己使用的「超级内置对象」。

Symbol.species

类的Symbol.species属性,指向一个构造函数。创建衍生对象时,会使用该属性。

下面示例中,aMyArray的实例,而bc即是所谓的衍生对象。

class MyArray extends Array {
}

const a = new MyArray(1, 2, 3);
const b = a.map(x => x);
const c = a.filter(x => x > 1);

a.constructor // MyArray
b.constructor // MyArray
c.constructor // MyArray
复制代码

默认的Symbol.species的值如下:

static get [Symbol.species]() {
  return this;
}
复制代码

我们可以试着改变它。

class MyArray extends Array {
  static get [Symbol.species]() { return Array; }
}

const a = new MyArray();
const b = a.map(x => x);

a.constructor // MyArray
b.constructor // Array
复制代码

我们看到衍生对象的构造函数执行发生了变化。

注意

继承Object的子类,有一个行为差异

class NewObj extends Object{
  constructor(){
    super(...arguments);
  }
}
var o = new NewObj({attr: true});
o.attr  // undefined
复制代码

上面代码中,NewObj继承了Object,但是无法通过super方法向父类Object传参。这是因为 ES6 改变了Object构造函数的行为,一旦发现Object方法不是通过new Object()这种形式调用,ES6 规定Object构造函数会忽略参数。

babel

我们将以下ES6的代码,在babel中转换为ES5的代码。

let Father6 = class Me {
    constructor (name) {
        this.name = name
        this.age = 46
    }
    static create (name) {
    	return new Me(name)
    }
    sayName () {
        return this.name
    }
    sayAge () {
        return this.age
    }
}
let Son6 = class Me extends Father6 {
    constructor (name) {
        super(name)
    }
    setAge (age) {
        this.age = age
    }
}
复制代码

转换后的代码:

"use strict";

function _possibleConstructorReturn(self, call) {
  if (!self) {
    throw new ReferenceError(
      "this hasn't been initialised - super() hasn't been called"
    );
  }
  return call && (typeof call === "object" || typeof call === "function")
    ? call
    : self;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError(
      "Super expression must either be null or a function, not " +
        typeof superClass
    );
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      enumerable: false,
      writable: true,
      configurable: true
    }
  });
  if (superClass)
    Object.setPrototypeOf
      ? Object.setPrototypeOf(subClass, superClass)
      : (subClass.__proto__ = superClass);
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

var Father6 = (function() {
  function Me(name) {
    _classCallCheck(this, Me);

    this.name = name;
    this.age = 46;
  }

  Me.create = function create(name) {
    return new Me(name);
  };

  Me.prototype.sayName = function sayName() {
    return this.name;
  };

  Me.prototype.sayAge = function sayAge() {
    return this.age;
  };

  return Me;
})();

var Son6 = (function(_Father) {
  _inherits(Me, _Father);

  function Me(name) {
    _classCallCheck(this, Me);

    return _possibleConstructorReturn(this, _Father.call(this, name));
  }

  Me.prototype.setAge = function setAge(age) {
    this.age = age;
  };

  return Me;
})(Father6);
复制代码

babel定义了三个有趣的方法:

  1. _classCallCheck用于判断类是否被new命令符调用,是new.target的polyfill;
  2. _inherits用于子类继承父类的原型对象和静态方法,
  3. _possibleConstructorReturn用于继承实例属性。这个方法里面有个很有意思的判断,如果构造函数的返回是object或者function,就把这个返回值作为子类的实例,反之,返回子类的实例。这是为了降级解决ES5中无法继承内置对象的问题,因为内置对象默认都会返回对应的实例,而我们自定义的构造函数一般是不会写返回值的。 这样我们在ES5中如果要继承内置对象,就不能给子类添加自定义的方法和属性了,因为返回的是内置对象的实例。

常见问题

__proto__的指向

class Father extends Function {}
class Son extends Father {}
let s1 = new Son()
复制代码

先说几个定义:

  1. 实例对象的__proto__属性指向类的原型对象。
  2. 类的__proto__属性指向它的父类, prototype指向它的原型对象。
  3. 子类的原型对象的__proto__指向父类的原型对象。
  4. 对象一定是实例,实例不一定是对象。

我们开始验证:

  • s1Son 的实例对象。
  • SonFather 的子类。
s1.__proto__ === Son.prototype // true
Son.__proto__ === Father  // ture
Son.prototype.__proto__ === Father.prototype // true 
复制代码

第1,2,3条都得到了验证。

我们继续顺着原型链往下走:

  • FatherFunction 的子类
Father.__proto__ === Function // true
Father.prototype.__proto__ === Function.prototype // true
复制代码

第2,3条都得到了验证。

我们知道所有的函数或者类都是原先构造函数Function的实例。所以:

Function.__proto__ === Function.prototype // true
typeof Function.prototype // 'function'
复制代码

第1,4条得到了印证。同时,Function.prototype是函数,我们也可以说Function.prototype是所有函数的父类。

我们知道所有对象都是原先构造函数Object的实例,所以:

Function.prototype.__proto__ === Object.prototype // true
复制代码

所有的原型对象都继承自Object.prototype。所以:

Object.prototype.__proto__ === null // true
复制代码

鸡生蛋,蛋生鸡

Object instanceof Function // true
Function instanceof Object // true
复制代码

我们看一下instanceof的定义:instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

Object本身是构造函数,继承了Function.prototype;

Object.__proto__ === Function.prototype
复制代码

Function也是对象,继承了Object.prototype

Function.__proto__.__proto__ === Object.prototype
复制代码

所以谁先存在的呢?

// 确定Object.prototype是原型链的顶端
Object.prototype.__proto__ === null // true
// 确定Function.prototype继承自Object.prototype
Function.prototype.__proto__ === Object.prototype // true
// 确定所有的原生构造函数继承自Function.prototype
Function.__proto__ === Function.prototype // true
Object.__proto__ === Function.prototype // true
Array.__proto__ === Function.prototype // true
String.__proto__ === Function.prototype // true
Number.__proto__ === Function.prototype // true
Boolean.__proto__ === Function.prototype // true
复制代码

Object.prototype只是一个指针,它指向一个对象(就叫它protoObj吧)。protoObj是浏览器最先创建的对象,这个时候Object.prototype还没有指向它,因为Object还没有被创建。然后根据protoObj创建了另一个即使函数又是对象的funProConstructor,也就是Function.prototype指向的内存地址(是的,Function.prototype也是一个指针),但是现在它们还没有建立关系,Function.prototype还没有指向funProConstructor。再然后,浏览器使用funProConstructor构造函数,创建出了我们熟悉的原生构造函数ObjectFunction等等,所以这些原生构造函数的__proto__属性指向了它们的父类Function.prototype,而这时候,创建出来的ObjectFunction上面的Object.prototypeFunction.prototype也分别指向了protoObjfunProConstructor。自此,浏览器内部原型相关的内容初始化完毕。

我们将上面的描述整理如下:

浏览器内部实现

解开所有疑惑的关键都在这么一句话:Function.prototype是个不同于一般函数(对象)的函数(对象)。

gettersetter

因为__proto__并不是标准的一部分,所以不建议使用。如果要在ES6中读取和修改原型,推荐使用:Object.getPrototypeOfObject.setPrototypeOf

总结

ES6的类让JS中的继承变得更简单,因此对于你已从其他语言学习到的类知识,你无须将其丢弃。ES6的类起初是作为ES5传统继承模型的语法糖,但添加了许多特性来減少错误。

ES6的类配合原型继承来工作,在类的原型上定义了非静态的方法,而静态的方法最终则被绑定在类构造器自身上。类的所有方法初始都是不可枚举的,这更契合了内置对象的行为, 后者的方法默认情况下通常都不可枚举。此外,类构造器被调用时不能缺少new ,确保了不能意外地将类作为函数来调用。

基于类的继承允许你从另一个类、函数或表达式上派生新的类。这种能力意味着你可以调用一个函数来判断需要继承的正确基类,也允许你使用混入或其他不同的组合模式来创建一个新类。新的继承方式让继承内置对象(例如数组)也变为可能,并且其工作符合预期。

你可以在类构造器内部使用new.target ,以便根据类如何被调用来做出不同的行为。最常用的就是创建一个抽象基类,直接实例化它会抛出错误,但它仍然允许被其他类所继承。

总之,类是JS的一项新特性,它提供了更简洁的语法与更好的功能,通过安全一致的方式来自定义一个对象类型。

参考

  1. Class 的基本语法
  2. Class 的继承
  3. understandinges6
  4. 从__proto__和prototype来深入理解JS对象和原型链
  5. javascript-functions-without-prototype
关注下面的标签,发现更多相似文章
评论