1、ES5 中基于原型的构造函数
function Point(x, y) {
this.x = x;
this.y = y;
}
Point.prototype.toString = function() {
return `${this.x}, ${this.y}`;
}
// 创建实例
var p = new Point(1, 2);
2、ES6 的 class关键字
ES6 引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。
ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
toString() {
return `${this.x}, ${this.y}`;
}
}
// 创建实例
var p = new Point(1, 2);
ES6 的类，完全可以看作构造函数的另一种写法。类的数据类型就是函数，类本身就指向构造函数。
typeof Point; // 'function'
Point === Point.prototype.constructor; // true
事实上，类的所有方法都定义在类的prototype属性上面。
由于类的方法都定义在prototype对象上面，所以类的新方法可以添加在prototype对象上面。Object.assign方法可以很方便地一次向类添加多个方法。
Object.assign(Point.prototype, {
fn1(){},
fn2(){},
fn3(){}
});
类的内部所有定义的方法，都是不可枚举的（non-enumerable）。
Object.keys(Point.prototype); // []
Object.getOwnPropertyNames(Point.prototype); // ["constructor", "toString"]
类的属性名，可以采用表达式。
let methodName = 'getArea';
class Square {
constructor(length) {
// ...
}
[methodName]() {
// ...
}
}
3、严格模式
类和模块的内部，默认就是严格模式，所以不需要显示地使用use strict指定运行模式。只要你的代码写在类或模块之中，就只有严格模式可用。
考虑到未来所有的代码，其实都是运行在模块之中，所以 ES6 实际上把整个语言升级到了严格模式。
4、constructor 方法
constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。一个类必须有constructor方法，如果没有显式定义，一个空的constructor方法会被默认添加。
constructor方法默认返回实例对象（即this），完全可以指定返回另外一个对象。
class Foo {
constructor() {
// 自定义返回值
return Object.create(null);
}
}
new Foo() instanceof Foo; // false
类必须使用new调用，否则会报错。这是它跟普通构造函数的一个主要区别，后者不用new也可以执行。
5、类的实例对象
与 ES5 一样，实例的属性除非显式定义在其本身（即定义在this对象上），否则都是定义在原型上（即定义在class上）。
class Point {
constructor(x, y) {
this.x = x; // 实例属性
this.y = y;
}
toString() {} // 类属性
}
var p = new Point(1, 2);
p.hasOwnProperty('x'); // true
p.hasOwnProperty('y'); // true
p.hasOwnProperty('toString'); // false
p.__proto__.hasOwnProperty('toString'); // true
与 ES5 一样，类的所有实例共享一个原型对象。
var p2 = new Point(4, 5);
p.__proto__ === p2.__proto__ === Point.prototype; // true
// 可以通过实例的__proto__属性为“类”添加方法。
p.__proto__.print = function() {
console.log('打印');
}
p2.print();
proto 并不是语言本身的特性，这是各大厂商具体实现时添加的私有属性，虽然目前很多现代浏览器的 JS 引擎中都提供了这个私有属性，但依旧不建议在生产中使用该属性，避免对环境产生依赖。生产环境中，我们可以使用 Object.getPrototypeOf 方法来获取实例对象的原型，然后再来为原型添加方法/属性。
6、class 表达式
const MyClass = class Me {
getClassName() {
return Me.name;
}
};
需要注意的是，这个类的名字是MyClass而不是Me，Me只在 Class 的内部代码可用，指代当前类。
如果类的内部没用到的话，可以省略Me，也就是可以写成下面的形式。
const MyClass = class { };
采用 Class 表达式，可以写出立即执行的 Class。
let person = new Class {
constructor(name) {
this.name = name;
}
sayName() {
console.log(this.name);
}
}('张三');
person.sayName(); // '张三'
7、class类 不存在变量提升
类不存在变量提升（hoist），这一点与 ES5 完全不同。
new Bar(); // 报错
class Bar { };
类 使用在前，定义在后，这样会报错，因为 ES6 不会把类的声明提升到代码头部。这种规定的原因与下文要提到的继承有关，必须保证子类在父类之后定义。
let 、 const 也不存在变量提升
8、类的公有方法和私有方法
class Widget {
// 公有方法
foo() {}
}
公有方法，在类的外部可以被调用
// 实现类私有方法的方案一
// 将私有方法移出模块，因为模块内部的所有方法都是对外可见的。
function bar(x) {
return this.x = x;
}
class Widget {
foo(x) {
// bar变成了类的私有方法
bar.call(this, x);
}
}
// 实现类私有方法的方案二
// 利用Symbol值的唯一性，将私有方法的名字命名为一个Symbol值。
const bar = Symbol('bar');
const snaf = Symbol('snaf');
export default class Widget {
// 公有方法
foo(x) {
this[bar](x);
}
// 私有方法
[bar](x) {
return this[snaf] = x;
}
}
上面代码中，bar和snaf都是Symbol值，导致第三方无法获取到它们，因此达到了私有方法和私有属性的效果。
与私有方法一样，ES6 不支持私有属性。
9、this 的指向
类的方法内部如果含有this，它默认指向类的实例。
// this 绑定当前类的实例 方案一
// 在构造方法中绑定this
class Log {
constructor() {
this.print.bind(this);
}
print() {}
}
// this 绑定当前类的实例 方案二
// 使用箭头函数。
class Log {
constructor() {
this.print = () => {};
}
}
// this 绑定当前类的实例 方案三
// 使用Proxy，获取方法的时候，自动绑定this。
function selfish (target) {
const cache = new WeakMap();
return proxy = new Proxy(target, {
get (target, key) {
const value = Reflect.get(target, key);
if (typeof value !== 'function') {
return value;
}
if (!cache.has(value)) {
// 绑定当前对象target
cache.set(value, value.bind(target));
}
return cache.get(value);
}
});
}
class Log { print() {} };
const log = selfish(new Log());
10、name 属性
由于本质上，ES6 的类只是 ES5 的构造函数的一层包装，所以函数的许多特性都被Class继承，包括name属性。
class Point {};
Point.name; // 'Point'
name属性总是返回紧跟在class关键字后面的类名。
11、Class 的取值函数（getter）和存值函数（setter）
与 ES5 一样，在“类”的内部可以使用get和set关键字，对某个属性设置存值函数和取值函数，拦截该属性的存取行为。
class MyClass {
constructor() {}
get age() {
console.log('发生了 age 取值操作');
}
set age() {
console.log('发生了 age 赋值操作');
}
}
let inst = new MyClass();
inst.age = 20; // '发生了 age 赋值操作'
inst.age; // '发生了 age 取值操作'
存值函数和取值函数是设置在属性的 Descriptor 对象上的。
var descriptor = Object.getOwnPropertyDescriptor(MyClass.prototype, 'age');
'get' in descriptor; // true
'set' in descriptor; // true
12、Class类中的 Generator 方法
如果某个方法之前加上星号（*），就表示该方法是一个 Generator 函数。
class Foo {
constructor(...args) {
this.args = args;
}
* [Symbol.iterator]() {
for (let arg of this.args) {
yield arg;
}
}
}
for (let x of new Foo('a', 'b')) {
console.log(x);
}
// 'a'
// 'b'
Foo类的Symbol.iterator方法前有一个星号，表示该方法是一个 Generator 函数。Symbol.iterator方法返回一个Foo类的默认遍历器，for...of循环会自动调用这个遍历器。
13、class中的 静态方法和实例方法
类相当于实例的原型，所有在类中定义的方法，都会被实例继承。如果在一个方法前，加上static关键字，就表示该方法不会被实例继承，而是直接通过类来调用，这就称为“静态方法”。
class Foo {
// 实例方法，this指定类的实例
fn1() {
console.log(this);
}
// 静态方法，this指向类
static fn2() {
console.log(this);
}
}
Foo.fn2();
var f = new Foo();
f.fn1();
注意，如果静态方法包含this关键字，这个this指的是类，而不是实例。
静态方法可以与非静态方法重名。
父类的静态方法，可以被子类继承。
class Foo {
static fn() {}
}
class Bar extends Foo { }
Bar.fn();
静态方法也是可以从super对象上调用的。
super指向父类。
class Doo extends Foo {
static fn2() {
super.fn();
}
}
14、class中 的静态属性和实例属性
静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。
class Foo {
constructor() {
this.prop = 0; // 实例属性
}
};
Foo.prop = 1; // 类的静态属性
类的静态属性只有上述这种写法，因为 ES6 明确规定，Class 内部只有静态方法，没有静态属性。
实例属性，只能写在类的constructor方法里面。
15、new.target
在 Class 内部调用new.target，返回当前 Class。
子类继承父类时，new.target会返回子类。
class Foo {
constructor() {
console.log(new.target === Foo); // true
}
}
在构造函数之中，new命令作用于的那个构造函数。如果构造函数不是通过new命令调用的，new.target会返回undefined
function Person() {
if (new.target === Person) {
console.log('使用了 new 创建实例');
}
if (new.target === undefined) {
console.log('未使用 new 创建实例');
}
}
16、extends 继承
Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。
class Point {};
class ColorPoint extends Point {
constructor(x, y, color) {
super(x, y); // 调用父类的 constructor(x, y)
this.color = color;
}
toString() {
return this.color + ' ' + super.toString(); // 调用父类的toString()方法
}
}
子类必须在constructor方法中调用super方法，否则新建实例时会报错。这是因为子类自己的this对象，必须先通过父类的构造函数完成塑造，得到与父类同样的实例属性和方法，然后再对其进行加工，加上子类自己的实例属性和方法。如果不调用super方法，子类就得不到this对象。
如果子类没有定义constructor方法，这个方法会被默认添加，代码如下。也就是说，不管有没有显式定义，任何一个子类都有constructor方法。
class ColorPoint extends Point {};
// 等同于
class ColorPoint extends Point {
constructor(...args) {
super(...args);
}
}
在子类的构造函数中，只有调用super之后，才可以使用this关键字，否则会报错。这是因为子类实例的构建，是基于对父类实例加工，只有super方法才能返回父类实例。
子类实例，同时是子类和父类的实例：
var cp = new ColorPoint();
cp instanceof ColorPoint; // true
cp instanceof Point; // true
父类的静态方法，会被子类继承。
class A {
static hello() {}
}
class B extends A {};
B.hello(); // 类 B，继承了类 A 的静态方法。
17、Object.getPrototypeOf()
Object.getPrototypeOf方法可以用来从子类上获取父类。可以使用这个方法判断，一个类是否继承了另一个类。
Object.getPrototypeOf(ColorPoint) === Point; // true
18、super 关键字
super这个关键字，既可以当作函数使用，也可以当作对象使用。在这两种情况下，它的用法完全不同。
第一种情况，super作为函数调用时，代表父类的构造函数。ES6 要求，子类的构造函数必须执行一次super函数。
super虽然代表了父类A的构造函数，但是返回的是子类B的实例，即super内部的this指的是B，因此super()在这里相当于A.prototype.constructor.call(this)。
class A {
constructor() {
console.log(new.target.name);
}
}
class B extends A {
constructor() {
super();
}
}
new A(); // A
new B(); // B
new.target指向当前正在执行的函数
作为函数时，super()只能用在子类的构造函数之中，用在其他地方就会报错。
第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。
class A {
p() {}
}
class B extends A {
constructor() {
super(); // super作为函数，执行父类的构造函数，返回子类实例
super.p(); // super作为对象，指向父类的原型A.prototype 或者 父类A
}
}
这里需要注意，由于super指向父类的原型对象或父类，所以定义在父类实例上的方法或属性，是无法通过super调用的。
如果super作为对象，用在静态方法之中，这时super将指向父类，而不是父类的原型对象。
19、super小结
1、在子类的构造器中调用super()时，执行的是父类的构造器，并返回子类实例。
2、在子类的非静态方法中使用super对象时，super指向父类的原型，即 super = A.prototype ，此时 this 指向子类实例。
3、在子类的静态方法中使用super对象时，super指向父类，即 super = A ，此时 this 指向子类。
由于对象总是继承其他对象的，所以可以在任意一个对象中，使用super关键字。
var obj = {
toString() {
super.toString(); // 在普通对象中使用 super
}
}
20、类的 prototype 属性 和 proto 属性
大多数浏览器的 ES5 实现之中，每一个对象都有proto属性，指向对应的构造函数的prototype属性。Class 作为构造函数的语法糖，同时有prototype属性和proto属性。
（1）子类的proto属性，表示构造函数的继承，总是指向父类。
（2）子类prototype属性的proto属性，表示方法的继承，总是指向父类的prototype属性。
class A {};
class B extends A {};
B.__proto__ === A; // true
B.prototype.__proto__ === A.prototype; // true
这两条继承链，可以这样理解：作为一个对象，子类（B）的原型（proto属性）是父类（A）；作为一个构造函数，子类（B）的原型对象（prototype属性）是父类的原型对象（prototype属性）的实例。
手动实现继承：
class M {};
class N {};
Object.setPrototypeOf(N.prototype, M.prototype);
Object.setPrototypeOf(N, M);
Object.setPrototypeOf = function(obj, proto) {
obj.__proto__ = proto;
return obj;
}
21、extends 的继承目标
extends关键字后面可以跟多种类型的值。
第一种特殊情况，子类继承Object类。
class C extends Object {};
C.__proto__ === Object; // true
C.prototype.__proto__ === Object.prototype; // true
A 其实就是构造函数 Object 的复制，A 的实例就是 Object 的实例。
第二种特殊情况，不存在任何继承。
class C {};
C.__proto__ === Function.prototype; // true
C.prototype.__proto__ === Object.prototype; // true
第三种特殊情况，子类继承null。
class C extends null {};
C.__proto__ === Function.prototype; // true
C.prototype.__proto__ === undefined; // true
22、实例的 proto 属性
子类实例的proto属性的proto属性，指向父类实例的proto属性。也就是说，子类的原型的原型，是父类的原型。
var a = new A();
var b = new B();
b.__proto__.__proto__ = a.__proto__; // true
23、js 原生构造函数的继承
原生构造函数是指语言内置的构造函数，通常用来生成数据结构。ECMAScript 的原生构造函数大致有下面这些。
Boolean()
Number()
String()
Array()
Date()
Function()
RegExp()
Error()
Object()
在 ES5 中，这些原生构造函数是无法被继承的。
ES6 允许继承原生构造函数 定义子类，因为 ES6 是先新建父类的实例对象this，然后再用子类的构造函数修饰this，使得父类的所有行为都可以继承。
class MyArray extends Array {
constructor(...args) {
super(...args);
}
}
这意味着，ES6 可以自定义原生构造函数（比如Array、String等）的子类，这是 ES5 无法做到的。
上面这个例子也说明，extends关键字不仅可以用来继承类，还可以用来继承原生的构造函数。
class ExtendableError extends Error {
constructor(msg) {
super();
this.msg = msg;
this.stack = (new Error()).stack;
this.name = this.constructor.name;
}
}
class MyError extends ExtendableError {
constructor(args) {
super(args);
}
}
var myerror = new MyError('geek');
myerror.msg; // 'geek'
myerror instanceof Error; // true
myerror.name; // 'MyError'
myerror.stack;
24、Mixin 模式的实现
Mixin 指的是多个对象合成一个新的对象，新对象具有全部成员的接口。
Mixin 简单实现如下：
const a = { a: 1 };
const b = { b: 2 };
const c = { ...a, ...b };
// c对象是a对象和b对象的合成，具有两者的接口。
Mixin 混合生成一个新类，实现如下：
function mix(...mixins) {
class Mix {};
for (let mixin of mixins) {
copyProperties(Mix, mixin); // 拷贝实例属性
copyProperties(Mix.prototype, mixin.prototype); // 拷贝原型属性
}
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);
}
}
}
上面代码的mix函数，可以将多个对象合成为一个类。使用的时候，只要继承这个类即可。
class MyClass extends mix(Loggable, Serializable) {};
完！！！
网友评论