早在学习java的时候,就已经接触了继承,在java中因为有extends关键字,因此继承就比较简单。但是在JavaScript中,只能通过灵活的办法实现类的继承。
下面是我昨天在学习过程中,了解到的实现继承的一些方法,包括有具体的代码以及该方法的优缺点:
1.组合继承方式
原理:在子类的构造函数中,调用父类的构造函数,在子类原型上实例化父类,所以称为组合模式。
优点:融合了类式继承和构造函数继承的优点
缺点:父类构造函数调用了两次。第一次是使用构造函数时调用了父类的构造函数,第二次是实现子类原型的类式继承时又调用了一次。
/*
1.组合继承方式
缺点:在初始化时会调用两次构造函数
*/
var SuperClass = function(id,name){
this.id = id;
this.name = name;
this.books = ['javascript','html','css']; }
SuperClass.prototype.getName = function(){
return this.name; }
SuperClass.prototype.getId = function(){
return this.id; }
var SubClass = function(id,name,price){
SuperClass.call(this,id,name);
this.price = price; }
SubClass.prototype = new SuperClass();
SubClass.prototype.getPrice = function(){
return this.price; } //测试用例
var sub = new SubClass('001','css',25);
sub.books.push('internet');
console.log(sub.books);//["javascript", "html", "css", "internet"]
var father = new SuperClass('002','html');
console.log(father.books);// ["javascript", "html", "css"]
2、寄生式组合继承
原理:原型继承和构造函数继承组合,此方法是Douglas Crockford对寄生式继承的一个改造。
/**
*2.寄生式组合继承法
**/
function inheritObject(o){
function F(){};
F.prototype = o;
return new F();
}
/**
*1、继承设置
*传递参数:subclass子类
*传递参数:superclass父类
**/
function inheritPrototype(subClass,superClass){
//先将父类原型副本保持一份在变量中
var p = inheritObject(superClass.prototype);
p.constructor = subClass;
subClass.prototype = p; } var SuperClass = function(id,name){
this.id = id;
this.name = name;
this.books = ['javascript','html','css']; }
SuperClass.prototype.getName = function(){
return this.name; }
SuperClass.prototype.getId = function(){
return this.id; }
var SubClass = function(id,name,price){
SuperClass.call(this,id,name);
this.price = price; }
inheritPrototype(SubClass,SuperClass);
SubClass.prototype.getPrice = function(){
return this.price; } //测试用例
var sub = new SubClass('001','css',25);
sub.books.push('internet');
console.log(sub.books);//["javascript", "html", "css", "internet"]
var father = new SuperClass('002','html');
console.log(father.books);// ["javascript", "html", "css"]
console.log(SubClass.prototype instanceof SuperClass);//SubClass的实例才是SuperClass的一个实例,true
3、多重继承
原理:将所有的目标属性和方法复制,可带多个参数。
Object.prototype.mix = function(){
//复制属性和方法
var len = arguments.length; for(var i = 0; i < len; i++){
var arg = arguments[i];
for(var property in arg){
this[property] = arg[property];
}
} }
var Book = function(id,name){
this.id = id;
this.name = name; }
var Image = function(url,size){
this.url = url;
this.size = size;
}
//测试用例
var book = new Book('001','javascript');
var image = new Image('http://baidu.com',52);
var imageBook = new Object();
var imageBook1 = new Object();
imageBook.mix(book,image);
imageBook1.mix(book,image);
imageBook1.name = "真的很不错";
console.log(imageBook);// Object { id="001", name="javascript", url="http://baidu.com", 更多...}
console.log(imageBook1);// Object { id="001", name="真的很不错", url="http://baidu.com", 更多...}
4、多态
原理:非常类似于java中的函数的重载,只不过加上了一些封装
例子:比如一个add()方法,无参数,返回0;一个参数,返回参数本身值+10;两个参数,返回两个参数值相加
//多态
var add = function(){
function zero(){
return 0;
}
function one(num){
return 10 + num;
}
function two(num1,num2){
return num1 + num2;
}
var arg = arguments;
var len = arg.length;
switch(len){
case 0 : return zero();
case 1 : return one(arg[0]);
case 2 : return two(arg[0],arg[1]);
}
}
console.log(add());//
console.log(add(5));//
console.log(add(2,18));//
到此,第二章的知识也就完毕了,迎来第三章。有错误的话,请大家留言指正哦~~