重温 ES 5 的继承

重温 ES 5 的继承

1. es5 创建类

function Person () {
  this.name = '张三';
  this.age = 20;
}
var p = new Person();
console.log(p.name); // 张三
console.log(p.age); // 20

2. 构造函数和原型链里面增加方法

function Person () {
  this.name = '张三';
  this.age = 20;
  this.run = function () {
    return `${this.name}正在跑步`;
  }
}
// 原型链上的属性可以被多个实例共享, 构造函数则不会
Person.prototype.sex = '男'; // 在原型链上添加属性
// 在原型链上添加方法
Person.prototype.work = function () {
  return `${this.name}正在工作`;
}
var p = new Person();
console.log(p.run()); // 张三正在跑步
console.log(p.sex); // 男
console.log(p.work()); // 张三正在工作

3. 静态方法

function Person () {
  this.name = '张三';
  this.age = 20;
  this.run = function () {
    return `${this.name}正在跑步`;
  }
}
// 静态方法
Person.eat = function () {
  return '吃东西';
}
console.log(Person.eat()); // 吃东西
var p = new Person()
// console.log(p.eat()); // 报错 - 实例不能访问静态方法

4. es5 对象冒充实现继承

function Person () {
  this.name = '张三';
  this.age = 20;
  this.run = function () {
    return `${this.name}正在运动`;
  }
}
Person.prototype.sex = '男';
Person.prototype.work = function () {
  return `${this.name}正在工作`;
}
function Programmer () {
  Person.call(this); // 对象冒充继承
}
var p = new Programmer();
// 对象冒充继承可以继承构造函数里面的属性和方法
console.log(p.run()); // 张三正在运动
console.log(p.name); // 张三
// console.log(p.work()); // 报错 - 对象冒充继承不能继承原型链上的属性和方法
console.log(p.sex); // undefined - 对象冒充继承不能继承原型链上的属性和方法

• 【1】对象冒充继承可以继承构造函数里面的属性和方法

5. es5 原型链继承

function Person () {
  this.name = '张三';
  this.age = 20;
  this.run = function () {
    return `${this.name}正在运动`;
  }
}
Person.prototype.sex = '男';
Person.prototype.work = function () {
  return `${this.name}正在工作`;
}
function Programmer () {}
// 原型链实现继承
Programmer.prototype = new Person();
var p = new Programmer();
// 原型链继承可以实现继承构造函数内的属性和方法, 也可以实现继承构造函数原型链上的属性和方法
console.log(p.name); // 张三
console.log(p.run()); // 张三正在运动
console.log(p.sex); // 男
console.log(p.work()); // 张三正在工作

• 【1】原型链继承可以实现继承构造函数内的属性和方法
• 【2】原型链继承可以实现继承构造函数原型链上的属性和方法

6. 原型链继承有什么问题?

function Person (name, age) {
  this.name = name;
  this.age = age;
  this.run = function () {
    return `${this.name}正在运动`;
  }
}
Person.prototype.sex = '男';
Person.prototype.work = function () {
  return `${this.name}正在工作`;
}
var p = new Person('张三', 20);
console.log(p.name); // 张三
console.log(p.sex); // 男
console.log(p.run()); // 张三正在运动
console.log(p.work()); // 张三正在工作
function Programmer (name, age) {};
Programmer.prototype = new Person();
var p2 = new Programmer('李四', 22);
// 原型链继承在实例化子类的时候没法给父类传参
console.log(p2.name); // undefined
console.log(p2.sex); // 男
console.log(p2.run()); // undefined正在运动
console.log(p2.work()); // undefined正在工作

• 【1】原型链继承在实例化子类的时候没法给父类传参

7. 对象冒充继承再发现

function Person (name) {
  this.name = name;
  this.run = function () {
    return `${this.name}正在运动`;
  }
}
function Programmer (name) {
  Person.call(this, name);
}
var p = new Programmer('张三');
// 对象冒充继承在实例化子类的时候可以向父类传参
console.log(p.name); // 张三
console.log(p.run()); // 张三正在运动

• 【1】对象冒充继承在实例化子类的时候可以向父类传参

8. 原型链 + 对象冒充实现继承

function Person (name) {
  this.name = name;
  this.run = function () {
    return `${this.name}正在运动`;
  }
}
Person.prototype.sex = '男';
Person.prototype.work = function () {
  return `${this.name}正在工作`;
}
function Programmer (name) {
  Person.call(this, name);
}
Programmer.prototype = new Person();
var p = new Programmer('张三');
console.log(p.name); // 张三
console.log(p.sex); // 男
console.log(p.run()); // 张三正在运动
console.log(p.work()); // 张三正在工作

9. 原型链 + 对象冒充实现继承的另一种方式

function Person (name) {
  this.name = name;
  this.run = function () {
    return `${this.name}正在运动`;
  }
}
Person.prototype.sex = '男';
Person.prototype.work = function () {
  return `${this.name}正在工作`;
}
function Programmer (name) {
  Person.call(this, name);
}
Programmer.prototype = Person.prototype;
var p = new Programmer('张三');
console.log(p.name); // 张三
console.log(p.sex); // 男
console.log(p.run()); // 张三正在运动
console.log(p.work()); // 张三正在工作