javascript面向對象中繼承實現？

javascript面向對象中繼承實現？

面向對象的基本特徵有：封閉、繼承、多態。

在JavaScript中實現繼承的方法：

1. 原型鏈（prototype chaining）

2. call()/apply()

3. 混合方式(prototype和call()/apply()結合)

4. 對象冒充

繼承的方法以下：

一、prototype原型鏈方式：

function teacher(name){  

    this.name = name;  

}  

teacher.prototype.sayName = function(){  

    console.log("name is "+this.name);  

}  

var teacher1 = new teacher("xiaoming");  

teacher1.sayName();  

  

function student(name){  

    this.name = name;  

}  

student.prototype = new teacher()  

var student1 = new student("xiaolan");  

student1.sayName();  

//  name is xiaoming  

//  name is xiaolan  

 

二、call()/apply()方法

function teacher(name,age){

this.name = name;

this.age = age;

this.sayhi = function(){

alert('name:'+name+", age:"+age);

}

}

function student(){

var args = arguments;

teacher.call(this,args[0],args[1]);

// teacher.apply(this,arguments);

}

var teacher1 = new teacher('xiaoming',23);

teacher1.sayhi();

 

var student1 = new student('xiaolan',12);

student1.sayhi();

 

// alert: name:xiaoming, age:23

// alert: name:xiaolan, age:12

 

三、混合方法【prototype,call/apply】

 

function teacher(name,age){

this.name = name;

this.age = age;

}

teacher.prototype.sayName = function(){

console.log('name:'+this.name);

}

teacher.prototype.sayAge = function(){

console.log('age:'+this.age);

}

 

function student(){

var args = arguments;

teacher.call(this,args[0],args[1]);

}

student.prototype = new teacher();

 

var student1 = new student('xiaolin',23);

student1.sayName();

student1.sayAge();

// name:xiaolin

// age:23

四、對象冒充

 

function Person(name,age){

this.name = name;

this.age = age;

this.show = function(){

console.log(this.name+", "+this.age);

}

}

 

function Student(name,age){

this.student = Person; //將Person類的構造函數賦值給this.student

this.student(name,age); //js中其實是經過對象冒充來實現繼承的

delete this.student; //移除對Person的引用

}

 

var s = new Student("小明",17);

s.show();

 

var p = new Person("小花",18);

p.show();

// 小明, 17

// 小花, 18