关于 ES 5 中的类、继承 小记

ES 5 ---- 类

// 构造函数里定义属性 & 方法
function Person() {
    this.name = 'zhangsan';
    this.age = 18;
    this.run = function() {
        console.log(`${this.name}在跑步。`);
    }
}

// 原型链上定义属性 & 方法
Person.prototype.sex = '男';
Person.prototype.work = function() {
    console.log(`${this.name}在工作。`);
}

// 静态属性
Person.location = '深圳';

// 静态方法
Person.getInfo = function() {
    console.log('这是静态方法执行的。');
}

// 实例化
var p = new Person();
// 实例方法是通过实例化来调用的
p.run();
p.work();

// 静态方法是通过 类名.方法 直接调用
Person.getInfo();

ES 5 ---- 继承

1. 对象冒充继承 ，可以继承构造函数里的属性 & 方法，不能继承原型链上面的属性 & 方法。
2. 原型链继承 ，可以继承构造函数里面以及原型链上面的属性 & 方法。
3. 原型链 + 对象冒充 组合继承 ，可以继承构造函数里面以及原型链上面的属性 & 方法，且可以解决实例化子类的时候没法给父类传参的问题。

//  1. 对象冒充继承
function Web() {
    // 对象冒充继承
    Person.call(this);
}

var w = new Web();

w.run();  // zhangsan在跑步。

// w.work();  // Uncaught TypeError: w.work is not a function

// 2. 原型链继承
function Web2() {

}
// 原型链继承
Web2.prototype = new Person();

var w2 = new Web2();
w2.run();  // zhangsan在跑步。
w2.work();  // zhangsan在工作。

原型链继承存在问题：实例化子类的时候没法给父类传参。

function Person2(name, age) {
    this.name = name;
    this.age = age;
    this.run = function() {
        console.log(`${this.name}在跑步。`);
    }
}
Person2.prototype.sex = '男';
Person2.prototype.work = function() {
    console.log(`${this.name}在工作。`);
}

function Web3(name, age) {

}
Web3.prototype = new Person2();

var w3 = new Web3('李四', 20);
w3.run();  // undefined在跑步。
w3.work();  // undefined在工作。

解决方法：采用 原型链 + 对象冒充 组合继承方式。

function Web4(name, age) {
    Person2.call(this, name, age);
}
Web4.prototype = new Person2();
// 因为对象冒充继承已经可以实现继承构造函数里的属性 & 方法，因此再实现继承原型链上的属性 & 方法就可以了
// 所以上面的写法等价于下面这行
// Web4.prototype = Person2.prototype;
var w4 = new Web4('李四', 20);
w4.run();  // 李四在跑步。
w4.work();  // 李四在工作。

ES 5 中的类 和 继承先写到这里，后面有时间会记录下 ES 6 中的。

与君共勉～