JavaScript继承

继承是面向对象的一种概念,指子类拥有父类开放的属性及方法。JavaScript默认不支持继承,但JavaScript可以模拟继承体系,在很多框架中被使用。

基础父类Person
function Person(name, sex) {
    this.name = name;
    this.sex = sex;
    this.move = function() {
        alert(this.name);
    };
}


对象冒充
function Man(name, sex, address, phone) {
    this.pe = Person;
    this.pe(name, sex);
    delete this.pe;
    this.address = address;
    this.phone = phone;
}

function Woman(name, sex, birthday) {
    this.pe = Person;
    this.pe(name, sex);
    delete this.pe;
    this.birthday = birthday;
}


执行上述代码

Man具有属性name, sex, address, phone 和 方法move
Woman具有属性name, sex, birthday 和 方法move
弄清楚对象冒充的实现,关键是理解this对象,JavaScript是一个解析执行的脚本语言,this永远指向当前对象,如执行 new Man(“myname”, “male”, “hongkong”, “13800″); 时,当前的对象Man实例,即使this.pe(name, sex)方法代码,中的this仍是当前的Man实例。

call 方法实现继承
function Man2(name, sex, address, phone) {
    Person.call(this, name, sex);
    this.address = address;
    this.phone = phone;
}


call方法将this及Person中的参数传递到调用方中,this代表Man2对象,调用Person构造方法时,this.name相当于设置Man2的name属性,所以man对象包含Person的所有属性和方法。

apply 方法实现继承
function Man3(name, sex, address, phone) {
    Person.apply(this, new Array(name, sex));
    this.address = address;
    this.phone = phone;
}

apply方法和call方法相近,只是 apply 第2个 参数为 Array数组类型。

原型链继承
若父类通过prototype定义方法或属性,上述三种方法无法实现继承。
原型链的缺点是不支持多继承。
原型prototype链如下:

function Person2() {

}

Person2.prototype.name = "";
Person2.prototype.sex = "";
Person2.prototype.move = function() {
    alert(this.name);
};

function Man4() {

}

Man4.prototype = new Person2();


混合方式
通过混合方式,可以达到最大的重用

function Person3(name, sex) {
    this.name = name;
    this.sex = sex;
}

Person3.prototype.login = function() {
    alert("prototype constructual");
};

function Man5(name, sex, birthday) {
    Person3.call(this, name, sex);
    this.birthday = birthday;
}

Man5.prototype = new Person3();

Man5.prototype.say = function() {
    alert("say hello!");
};


prototype 作为对象的一个属性,它可以是一个对象Person3,Person3的所有方法作为 prototype 宿主的方法,实现了继承,此时 prototype 也包括链式访问的问题,因为Person3也是一个独立的对象,里面也有prototype方法,prototype中的方法也可以在Man5里面访问到,所以它的调用方式是链式的,调用越深,则花费的时间就会越多。

你可能感兴趣的:(JavaScript,继承,prototype)