在JavaScript中实现继承的方法

最新推荐文章于 2025-03-20 22:14:41 发布

转载最新推荐文章于 2025-03-20 22:14:41 发布 · 183 阅读

本文详细介绍了JavaScript中实现继承的四种主要方法：原型链、call/apply方法、混合使用prototype和call/apply以及对象冒充。通过具体实例展示了每种继承方式的实现过程。

1.原型链（prototype chaining）
2.call()/apply()
3.混合方式（prototype和call()/apply()结合）
4.对象冒充

1. 原型链（prototype chaining）

function teacher(name){
    this.name = name;
}
teacher.prototype.sayName = function(){
    console.log("name is " + this.name);
}
var teacher1 = new teacher("leilei");
teacher1.sayName();

function student(name){
    this.name = name;
}
student.prototype = new teacher();
var student1 = new student("xiaolei");
student1.sayName();
//name is leilei
//name is xiaolei

2. call()/apply()方法

function teacher(name, age){
    this.name = name;
    this.age = age;
    this.sayHi = function(){
        alert("name: " + this.name + ", age: " + this.age);
    }
}
function student(){
    var args = arguments;
    teacher.apply(this, arguments);
    //teacher.call(this, args[0], args[1]);
}
var teacher1 = new teacher('leilei',21);
teacher1.sayHi();
var student1 = new student('xiaolei', 22);
student1.sayHi();

3. 混合方法prototype+call/apply

function teacher(name, age){
    this.name = name;
    this.age = age;
}
teacher.prototype.sayHello = function(){
    alert("name: " + this.name + ", age: " + this.age);
}
function student(){
    var args = arguments;
    teacher.call(this, args[0], args[1]);
}
student.prototype = new teacher();
var student1 = new student("xiaolei", 22);
student1.sayHello();

4. 对象冒充

function teacher(name, age){
    this.name = name;
    this.age = age;
    this.showInfo = function(){
        alert("name: " + this.name + ", age: " +this.age);
    }
}
function student(name, age){
    this.student = teacher;
    this.student(name, age);
    delete this.student;
}
var student1 = new student("xiaolei", 22);
student1.showInfo();