es5构造函数与继承

• 构造函数

// 构造函数
function Person() {
    this.name = '张三';
    this.age = 18;

    this.run = function () {
            console.log(this.name + '在跑步');
        };
}

// 静态方法
Person.work = function() {
    // this指向构造行数
    console.log('这是静态方法');
}

// 添加原型属性
Person.prototype.sex = '男';
Person.prototype.eat = function() {
    // this指向实例对象
    console.log('这是原型中的方法');
}

Person.work();
var p = new Person();
p.run();
p.eat();

• 继承

  • 对象冒充：可以继承构造函数中的方法，但无法继承原型链中的方法

    function Person() {
        this.name = '张三';
        this.age = 18;
    
        this.run = function () {
                console.log(this.name + '在跑步');
            };
    }
    Person.prototype.work = function() {
        console.log('原型链中的方法');
    }
    
    // Web构造函数继承了Person
    function Web() {
        this.demo = 'Hello World';
    
        Person.call(this);
    }
    
    var w = new Web();
    console.log(w.name);
    

  • 原型链：可以继承原型链中的方法，但实例化的时候，无法给父类传参

    function Person() {
        this.name = '张三';
        this.age = 18;
    
        this.run = function () {
                console.log(this.name + '在跑步');
            };
    }
    
    // Web构造函数继承了Person
    function Web() {
        this.demo = 'Hello World';
    }
    
    Web.prototype = new Person();
    
    var w = new Web();
    console.log(w.name);
    

  • 原型链 + 对象冒充组合继承

    function Person(name, age) {
        this.name = name;
        this.age = age;
    
        this.run = function () {
                console.log(this.name + '在跑步');
            };
    }
    
    Person.prototype.work = function() {
        console.log(this.name + '在工作');
    }
    
    // Web构造函数继承了Person
    function Web(name, age) {
        this.demo = 'Hello World';
        // 使用对象冒充继承父类的属性和方法，并给父类传值
        Person.call(this, name, age);
    }
    // 让子类的prototype指向父类的prototype.即可继承父类的原型链
    Web.prototype = Person.prototype;
    
    var w = new Web('张三', 18);
    w.work();