JavaScript设计模式学习之路——继承
早在学习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());//0 console.log(add(5));//15 console.log(add(2,18));//20
到此,第二章的知识也就完毕了,迎来第三章。有错误的话,请大家留言指正哦~~