深入JavaScript学习之路(二)JavaScript中的类

上一节都是基于ES5的特性来模拟实现类似于类class的行为,不难看出这些方法各有各自的问题,实现继承的代码也显得非常冗长和混乱。因此,ES6 中新引入的 class 关键字具备了正式定义类的能力,它实际上是一个语法糖,背后使用的仍然是原型和构造函数的概念。

类定义

类声明与类表达式两种定义方法,都使用 class 关键字

// 类声明
class Person {} 	

// 类表达式
const Animal = class {}

与函数表达式类似,类表达式在它们被求值前也不能引用
但不同之处在于

  • 函数声明可以提升,而类定义不能提升
  • 函数受 函数作用域 限制,类受 块作用域 限制
// 函数声明可以提升,而类定义不能提升*
console.log(FunctionExpression); // undefined 
var FunctionExpression = function() {}; 
console.log(FunctionExpression); // function() {}

console.log(ClassExpression); // undefined 
var ClassExpression = class {}; 
console.log(ClassExpression); // class {} 
// 函数受函数作用域限制,类受块作用域限制
{ 
    function FunctionDeclaration() {} 
    class ClassDeclaration {} 
} 
console.log(FunctionDeclaration); // FunctionDeclaration() {} 
console.log(ClassDeclaration); // ReferenceError: ClassDeclaration is not defined

类构成

类可以包括以下方法,但都不是必须的,空的类定义仍然有效。

  • 构造函数(constructor)
  • 获取函数及设置函数(get和set)
  • 静态类方法(static)
  • 其他实例方法

默认情况下,类定义中的代码都在 严格模式 下执行。
首字母大写这个就不必多说了,可以用于区分通过他创建的实例

类表达式名称可选的。在把类表达式赋值给变量后,可以通过 name 属性取得类表达式的名称字符串。但不能在类表达式作用域外部访问这个标识符。

let Person = class PersonName { 
    identify() { 
        console.log(Person.name, PersonName.name); 
    } 
} 
let p = new Person(); 
p.identify(); // PersonName PersonName 
console.log(Person.name); // PersonName 
console.log(PersonName); // ReferenceError: PersonName is not defined 

类构造函数

constructor 关键字用于在类定义块内部创建类的构造函数

  • constructor 会告诉解释器:使用 new 操作符创建类的新实例时,应该调用这个函数。
  • 构造函数的定义不是必需的,不定义构造函数相当于将构造函数定义为空函数

1、实例化

constructor函数实际上也是个语法糖,他让 JS 解释器知道使用 new 来定义类的一个实例时应使用 constructor 函数进行实例化。

让我们复习一下使用 new 调用构造函数所执行的操作:

  • 在内存中创建一个新对象 let obj = new Object()
  • 将新对象内部的 [[Prototype]] 赋值为构造函数的 prototype obj.__proto__ = constructor.prototype;
  • 构造函数内部的 this 指向这个新对象
  • 执行这个构造函数内部代码
    • 上述两步 相当于 let res = contructor.apply(obj, args)
  • 若构造函数返回 非空对象, 则返回该对象 res;否则,返回刚创建的新对象 obj
    • return typeof res === 'object' ? res: obj;

类实例化时传入的参数会作为构造函数的参数,若不需要参数,则类名后面的括号也是可选的 可以直接 new Person

类构造函数会在执行之后返回一个对象,这个对象会被用作实例化的对象。
注意:若构造函数返回的这个对象 res 是一个非空对象,且这个对象与new中第一步新建的对象obj无关系,则新建的对象会被回收哦,而且通过 instanceof 检测是无法检测出跟该类有关联,因为并没有修改原型指针。

2、类的本质?

class Person {} 
console.log(Person); // class Person {} 
console.log(typeof Person); // function

是函数!前面也说到了,它本质上就是一个语法糖,所以它具有跟函数一样的行为。
可以向其他对象或函数引用一样将其当作参数传递,也可以立即实例化(类似函数表达式的立即执行)

// 类可以像函数一样在任何地方定义,比如在数组中
let classList = [ 
	class { 
		constructor(id) { 
			this.id_ = id; 
			console.log(`instance ${this.id_}`); 
		} 
	} 
]; 
function createInstance(classDefinition, id) { 
	return new classDefinition(id); 
} 
let foo = createInstance(classList[0], 3141); // instance 3141 

// 立即执行
let p = new class Foo { 
	constructor(x) { 
		console.log(x); 
	} 
}('bar'); // bar 
console.log(p); // Foo {} 

实例、原型和类成员

类可以非常方便的定义以下三种成员,跟其它语言相似。

  • 实例上的成员
  • 原型上的成员
  • 类本身的成员(静态类成员)

实例成员

constructor 中可以通过this为新创建的实例添加自有属性,每个实例是不会共享这里的属性的。

  • ps:在类块中直接写的成员也会成为实例属性
class Person { 
	sex = '女'
	age = 21
	constructor() { 
		// 这个例子先使用对象包装类型定义一个字符串
		// 为的是在下面测试两个对象的相等性
		this.name = new String('Jack'); 
		this.sayName = () => console.log(this.name); 
		this.nicknames = ['Jake', 'J-Dog'] 
	} 
} 
let p1 = new Person(), 
 p2 = new Person(); 
p1.sayName(); // Jack 
p2.sayName(); // Jack 
console.log(p1.name === p2.name); // false 
console.log(p1.sayName === p2.sayName); // false 
console.log(p1.nicknames === p2.nicknames); // false 
console.log(p1.sex, p1.age) // 女 21

原型成员

将在类块中定义的方法作为原型方法(在所有实例中共享)

class Person { 
    constructor() { 
        // 添加到 this 的所有内容都会存在于不同的实例上
        this.locate = () => console.log('instance'); 
    } 
    // 在类块中定义的所有内容都会定义在类的原型上
    locate() { 
        console.log('prototype'); 
    } 
} 
let p = new Person(); 
p.locate(); // instance 
Person.prototype.locate(); // prototype 

类定义也支持获取和设置访问器。语法与行为跟普通对象一样:

class Person { 
	sex = '女'
	age = 21
	constructor() { 
		this.sayName = () => console.log(this.name); 
		this.nicknames = ['Jake', 'J-Dog'] 
	}
    set name(newName) { 
        this.name_ = newName; 
    } 
    get name() { 
        return this.name_; 
    } 
} 
let p = new Person(); 
p.name = 'cosine'; 
console.log(p.name); // cosine 

静态类方法

静态类成员在类定义中使用 static 关键字作为前缀。在静态成员中,this 引用类自身。可以通过类名.方法名直接访问

非函数原型和类成员

虽然类定义并不显式支持在原型或类上添加成员数据,但在类定义外部,可以手动添加:

// 在类上定义数据成员
Person.greeting = 'My name is'; 
// 在原型上定义数据成员
Person.prototype.name = 'Jake';
  • 但是不建议这么做,在原型和类上添加可变数据成员是一种反模式。一般来说,对象实例应该独自拥有通过 this 引用的数据

迭代器与生成器方法

类定义语法支持在原型和类本身上定义生成器方法:

class Person { 
	// 在原型上定义生成器方法
	*createNicknameIterator() { 
		yield 'cosine1'; 
		yield 'cosine2'; 
		yield 'cosine3'; 
	} 
	// 在类上定义生成器方法
	static *createJobIterator() { 
		yield 'bytedance'; 
		yield 'mydream'; 
		yield 'bytedance mydream!'; 
	} 
} 
let jobIter = Person.createJobIterator(); 
console.log(jobIter.next().value); // bytedance 
console.log(jobIter.next().value); // mydream 
console.log(jobIter.next().value); // bytedance mydream!
let p = new Person(); 
let nicknameIter = p.createNicknameIterator(); 
console.log(nicknameIter.next().value); // cosine1 
console.log(nicknameIter.next().value); // cosine2 
console.log(nicknameIter.next().value); // cosine3

因为支持生成器方法,所以可以通过添加一个默认的迭代器,把类实例变成可迭代对象

class People { 
    constructor() { 
        this.nicknames = ['cosine1', 'cosine2', 'cosine3']; 
    } 
    *[Symbol.iterator]() { 
        yield *this.nicknames.entries(); 
    } 
} 
let workers = new People(); 
for (let [idx, nickname] of workers) { 
    console.log(idx, nickname); 
}
// 0 cosine1
// 1 cosine2
// 2 cosine3

继承

ES 6最出色的一点就是原生支持了类继承机制,是之前原型链的一个语法糖

继承基础

ES6 类支持单继承,使用 extends 关键字,可以继承一个类,也可以继承普通的构造函数(保持向后兼容)

  • 派生类可以通过原型链访问到类和原型上定义的方法
  • this 的值会反映调用相应方法的实例或者类。
  • extends 关键字也可以在类表达式中使用

构造函数、HomeObject 和 super()

  • 派生类的方法可以通过 super 关键字引用它们的原型
    • 只能在派生类中使用
    • 仅限于类构造函数实例方法静态方法内部
    • 在类构造函数中使用 super 可以调用父类构造函数。
  • [[HomeObject]]
    • ES6 给类构造函数静态方法添加了内部特性 [[HomeObject]]
    • 指向定义该方法的对象的指针,这个指针是自动赋值的,而且只能在 JavaScript 引擎内部访问。
  • super 始终会定义为 [[HomeObject]] 的原型。

在使用 super 时要注意几个问题

  • super 只能在 派生类的构造函数和静态方法中使用
  • 不能单独引用 super 关键字,要么用它调用构造函数,要么用它引用静态方法
  • 调用 super() 会调用父类构造函数,并将返回的实例赋值给 this,所以不能在调用 super() 之前引用 this
  • 需要给父类构造函数传参,则需要手动将其传入super
  • 如果没有定义类构造函数,在实例化派生类时会调用 super(),而且会传入所有传给派生类的参数
  • 如果在派生类中显式定义了构造函数,则要么必须在其中调用 super(),要么必须显式的返回一个对象。

抽象基类

抽象基类也就是一种可供其他类继承,但本身不会被实例化的类。在其他语言中也有这种概念。虽然 ECMAScript 没有专门支持这种类的语法 ,但通过 new.target 也很容易实现

  • new.target 保存通过 new 关键字调用的类或函数
  • 通过在实例化时检测 new.target 是不是抽象基类,可以阻止对抽象基类的实例化
// 抽象基类 
class Vehicle { 
    constructor() { 
        console.log(new.target); 
        if (new.target === Vehicle) { 
            throw new Error('Vehicle cannot be directly instantiated'); 
        } 
    } 
} 
// 派生类
class Bus extends Vehicle {} 
new Bus(); // class Bus {} 
new Vehicle(); // class Vehicle {} 
// Error: Vehicle cannot be directly instantiated

通过在抽象基类的构造函数中进行检查,可以要求派生类必须定义某个方法。因为原型方法在调用原型类的构造函数之前就已经存在了,所以可以通过 this 关键字来检查相应的方法是否定义

// 抽象基类
class Vehicle { 
    constructor() { 
        if (new.target === Vehicle) 
            throw new Error('Vehicle cannot be directly instantiated'); 
        if (!this.foo)
            throw new Error('Inheriting class must define foo()'); 
        console.log('success!'); 
    } 
} 
// 派生类
class Bus extends Vehicle { foo() {} } 
// 派生类
class Van extends Vehicle {} 
new Bus(); // success! 
new Van(); // Error: Inheriting class must define foo() 

继承内置类型

ES6 类为继承内置引用类型提供了顺畅的机制,开发者可以方便地扩展内置类型,如下,向Array添加了一个洗牌算法的方法

class SuperArray extends Array { 
    shuffle() { 
        // 加一个洗牌算法
        for (let i = this.length - 1; i > 0; i--) { 
            const j = Math.floor(Math.random() * (i + 1)); //生成[0, i+1)的随机数
            [this[i], this[j]] = [this[j], this[i]];    // 交换两张牌
        } 
    } 
} 
let a = new SuperArray(1, 2, 3, 4, 5); 
console.log(a instanceof Array); // true 
console.log(a instanceof SuperArray); // true
console.log(a); // [1, 2, 3, 4, 5] 
a.shuffle(); 
console.log(a); // 随机的新数组
a.shuffle(); 
console.log(a); // 随机的新数组

有些内置类型的方法会返回新实例。默认情况下,返回实例的类型与原始实例的类型是一致的,但如果想覆盖这个默认行为,则可以覆盖 Symbol.species 访问器,这个访问器决定在创建返回的实例时使用的类

class SuperArray extends Array { 
    static get [Symbol.species]() { 
        return Array; 
    } 
} 
let a1 = new SuperArray(1, 2, 3, 4, 5); 
let a2 = a1.filter(x => !!(x%2)) 
console.log(a1); // [1, 2, 3, 4, 5] 
console.log(a2); // [1, 3, 5] 
console.log(a1 instanceof SuperArray, a1 instanceof Array); // true true
console.log(a2 instanceof SuperArray, a2 instanceof Array); // false true

类混入(多继承的模拟实现)

将不同类的行为集中到一个类是一种常见的 JavaScript 模式。虽然 ES6 没有显式支持多类继承,但通过现有特性可以轻松地模拟这种行为。

首先要注意以下两点:

  • 如果只是需要混入多个对象的属性,那么使用 Object.assign() 就可以了。
    • Object.assign() 方法是为了专门为了混入对象行为而设计的。只有在需要混入类的行为时才有必要自己实现混入表达式
  • 很多 JavaScript 框架(特别是 React)已经抛弃混入模式,转向了组合模式
    • 组合即是把方法提取到独立的类和辅助对象中,然后把它们组合起来,不使用继承。
    • 众所周知的软件设计原则:“组合胜过继承(composition over inheritance)。”

extends 关键字后面可以是一个 JavaScript 表达式。任何可以解析为一个类或一个构造函数的表达式都是有效的。这个表达式会在求值类定义时被求值,这就是类混入的原理

如 Person 类需要组合类A、B、C,则需要某种机制实现 B 继承 A,C 继承 B,而 Person再继承C从而实现将A、B、C组合至这个超类中:

class Vehicle {} 
let AMixin = (Superclass) => class extends Superclass { 
    afunc() { console.log('A Mixin'); } 
}; 
let BMixin = (Superclass) => class extends Superclass { 
    bfunc() { console.log('B Mixin'); } 
}; 
let CMixin = (Superclass) => class extends Superclass { 
    cfunc() { console.log('C Mixin'); } 
}; 
function mixin(BaseClass, ...Mixins) { 
    return Mixins.reduce((accumulator, current) => current(accumulator), BaseClass); 
} 
class Bus extends mixin(Vehicle, AMixin, BMixin, CMixin) {} 
let b = new Bus(); 
b.afunc(); // A Mixin 
b.bfunc(); // B Mixin 
b.cfunc(); // C Mixin 

小结

  • ECMAScript 6 新增的类很大程度上是基于既有原型机制的语法糖
  • 类的语法让开发者可以优雅地定义向后兼容的类
  • 类既可以继承内置类型,也可以继承自定义类型
  • 类有效地跨越了对象实例对象原型对象类之间的鸿沟
  • 通过 类混入 可以巧妙地实现类似多继承的效果,但不建议这么做,因为“组合胜过继承”

你可能感兴趣的:(前端,笔记,javascript,学习,前端)