一、es5里面的类

  • ES5中没有专门来定义类的方法

1、最简单的类
  1. function Person() {
  2.     this.name = '张三'; // 实例化属性
  3.     this.age = 20;
  4.     this.run = function () { // 实例化方法，必须new才能调用
  5.         alert(this.name + '在运动');
  6.     }
  7. }
  8. var p = new Person(); // 实例化构造函数
  9. alert(p.name);

2、构造函数和原型链里面增加方法
  1. 注：原型链上面的属性会被多个实例共享，构造函数不会
  2. Person.prototype.sex = "男";
  3. Person.prototype.work = function () {
  4.     alert(this.name + '在工作');
  5. }
  6. var p = new Person();
  7. p.work();

3、类里面的静态方法
  1. function Person() {
  2.     this.name = '张三'; // 实例化属性
  3.     this.age = 20;
  4.     this.run = function () { // 实例化方法，必须new才能调用
  5.         alert(this.name + '在运动');
  6.     }
  7. }
  8. Person.getInfo = function () {
  9.     alert('我是静态方法');
  10. }
  11. Person.getInfo(); // 调用静态方法

4、es5里面的继承，对象冒充实现继承
  1. function Person() {
  2.     this.name = '张三'; // 实例化属性
  3.     this.age = 20;
  4.     this.run = function () { // 实例化方法，必须new才能调用
  5.         alert(this.name + '在运动');
  6.     }
  7. }
  8. Person.prototype.sex = "男";
  9. Person.prototype.work = function () {
  10.     alert(this.name + '在工作');
  11. }
  12. 注：Web类继承Person类，原型链+对象冒充的组合继承模式
  13. function Web() {
  14.     Person.call(this); /* 对象冒充实现继承 */
  15. }
  16. var w = new Web();
  17. w.run(); // 对象冒充可以继承构造函数里面的属性和方法，但是没法继承原型链上面的属性和方法

5、es5里面的继承，原型链实现继承
  1. function Person() {
  2.     this.name = '张三'; // 实例化属性
  3.     this.age = 20;
  4.     this.run = function () { // 实例化方法，必须new才能调用
  5.         alert(this.name + '在运动');
  6.     }
  7. }
  8. Person.prototype.sex = "男";
  9. Person.prototype.work = function () {
  10.     alert(this.name + '在工作');
  11. }
  13. // Web类继承Person类，原型链+对象冒充的组合继承模式
  14. function Web() {}
  15. Web.prototype = new Person(); //原型链实现继承
  16. var w = new Web();
  17. // 原型链实现继承:可以继承构造函数里面的属性和方法 也可以继承原型链上面的属性和方法
  18. var w = new Web();
  19. w.run();

6、原型链实现继承的问题
  1. function Person(name, age) {
  2.     this.name = name;
  3.     this.age = age;
  4.     this.run = function () {
  5.         alert(this.name + '在运动');
  6.     }
  7. }
  8. Person.prototype.sex = "男";
  9. Person.prototype.work = function () {
  10.     alert(this.name + '在工作');
  11. }
  12. var p = new Person('李四', 20);
  13. p.run();
  15. // 问题来了
  16. function Web(name, age) {}
  17. Web.prototype = new Person();
  18. var w = new Web('赵四', 20); // 实例化子类的时候没法给父类传参
  19. w.run(); // this.name 是undefined

7、原型链+对象冒充的组合继承模式（常用）
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        alert(this.name + '在运动');
    }
}
Person.prototype.sex = "男";
Person.prototype.work = function () {
    alert(this.name + '在工作');
}

// 重点在这里
function Web(name, age) {
    Person.call(this, name, age); // 对象冒充继承，实例化子类可以给父类传参
}
Web.prototype = new Person();
var w = new Web('赵四', 20); //实例化子类的时候没法给父类传参
w.run();

8、原型链+对象冒充继承的另一种方式
function Person(name, age) {
    this.name = name;
    this.age = age;
    this.run = function () {
        alert(this.name + '在运动');
    }

}
Person.prototype.sex = "男";
Person.prototype.work = function () {
    alert(this.name + '在工作');
}

function Web(name, age) {
    Person.call(this, name, age); //对象冒充继承  可以继承构造函数里面的属性和方法、实例化子类可以给父类传参
}

// 这里直接继承原型链
Web.prototype = Person.prototype;
var w = new Web('赵四', 20); //实例化子类的时候没法给父类传参
w.run();