07.javascript中的面向对象编程二

1、北风网项目培训第7讲：JavaScript中的面向对象编程(二)讲师：风舞烟JavaScript-JQuery系列全程精通+图书馆管理系统实战Javascript面向对象编程1、javascript的继承2、javascript的多态JavaScript中的继承JavaScript中的继承特点：1、ECMAScript中并没有像其他语言那样严格地定义抽象类.2、所有类的方法都是public的作用域3、继承的方式不止一种,支持多重继承严格讲，javascript的继承机制并不是明确规定的，而是通过模仿实现的。对象冒充 其原理如下：构造函数使用this关键字给所有属性和方法赋值.因为构造函数只是一

2、个函数，所以可使用ClassA的构造函数成为ClassB的方法，然后调用它.ClassB就会收到ClassA的构造函数中定义的属性和方法.eg1:function ClassA(sColor) this.color = sColor; this.sayColor = function() alert(this.color); function ClassB(sColor) this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod;注意:所有的新属性和新方法都必须在删除了新方法的代码行后定义.否则,可能会覆盖超类

3、的相关属性和方法.function ClassA(sColor) this.color = sColor; this.sayColor = function() alert(this.color); function ClassB(sColor,sName) this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; = sName; this.sayName = function() alert(); /callVar objA = new ClassA(“red”);

4、Var objB = new ClassB(“blue”,”zhang”); objA.sayColor(); /output “red”;objB.sayColor(); /output “blue”;objB.sayName(); /output “zhang”;模仿多重继承eg:function ClassA(sColor) this.color = sColor; this.sayColor=function() alert(this.color); function ClassB(sName) = sName; this.sayName=function() al

5、ert(); function ClassC(sColor,sName,sModel) this.newMethod = ClassA; this.newMethod(sColor); delete this.newMethod; this.newMethod =ClassB; this.newMethod(sName); delete this.newMethod; this.model=sModel; this.sayModel = function() alert(this.model); /callvar cObj = new ClassC(red,zhang,T40

6、);cObj.sayColor(); /output “red”cObj.sayName(); /output “zhang”;cObj.sayModel(); /output “T40”;注意：多重继承防止出现父类同名问题由于这种方式的流行，ECMAScript的第三版为Function对象加入了两个新方法 Call()和apply()2、Call()方法 call方法是与经典的对象冒充方法最相似的方法.它的第一个参数用作this的对象,其他参数都直接传递给函数自身.eg:function sayColor(sprev,snext) alert(sprev+this.color+snext)

7、;var obj = new Object();obj.color = “red”;sayColor.call(obj,”The color is ”,”a very nice color”);/output “The color is red ,a very nice color”利用call关键字实现继承function ClassA(sColor) this.color = sColor; this.sayColor=function() alert(this.color); function ClassB(sColor,sName) / this.newMethod=ClassA; /

8、 this.newMethod(sColor); / delete this.newMethod; ClassA.call(this,sColor); = sName; this.sayName= function() alert(); /callvar objB = new ClassB(“red”,”zhang”);objB.sayColor(); /output “red” objB.sayName(); /output “zhang”apply()方法apply()方法有两个参数,用作this的对象和要传递给函数的参数的数组.eg:function

9、 sayColor(sprev,snext) alert(sprev+this.color+snext);var obj = new Object();obj.color =“red”;sayColor.apply(obj,new Array(“The Color is “,” a very nice color”);/output “The color is red ,a very nice color”利用apply关键字实现继承function ClassA(sColor) this.color = sColor; this.sayColor=function() alert(this.

10、color); function ClassB(sColor,sName) / this.newMethod=ClassA; / this.newMethod(sColor); / delete this.newMethod; ClassA.apply(this,new Array(sColor); = sName; this.sayName= function() alert(); /callvar objB = new ClassB(“red”,”zhang”);objB.sayColor(); /output “red” objB.sayName()

11、; /output “zhang”原型链利用prototype对象来实现.function ClassA()ClassA.prototype.color = “red”;ClassA.prototype.sayColor = function() alert(this.color);function ClassB()ClassB.prototype = new ClassA注意,调用ClassA的构造函数时,没有给它传递参数.这在原型链中是标准做法,要确保构造函数没有任何参数.另:与对象冒充相似,子类的所有属性和方法都必须出现在prototype属性补赋值后,因为在它之前赋值的所有方法都会被删

12、除.eg:function ClassB()ClassB.prototype = new ClassA();ClassB. = “”;ClassB.prototype.sayName = function() alert(); /callvar objA = new ClassA();var objB = new ClassB();objA.color = blue;objB.color = yellow;objB.name = zhang;objA.sayColor(); /output “blue”objB.sayColor(); /outpu

13、t “yellow”;objB.sayName(); /output “zhang”原型链的弊端在不支持多重继承.记住,原型链会用另一类型的对象重写类的prototype属性混合模式用构造函数方式定义属性,用原型方式定义方法.这种方式同样适用于继承机制.eg:/ClassAfunction ClassA(sColor) this.color = sColor;ClassA.prototype.sayColor = function() alert(this.color);/ClassBfunction ClassB(sColor,sName) ClassA.call(this,sColor);

14、 = sName;ClassB.prototype = new ClassA();ClassB.prototype.sayName = function() alert();/callvar objA = new ClassA(“red”); var objB = new ClassB(“blue”,”zhang”); objA.sayColor(); /output “red”objB.sayColor(); /output “blue”objB.sayName(); /output “zhang”一个更实际的例子 /创建基类(多边形)function

15、Polygon(iSides) this.sides = iSides;Ptotype.getArea=function() return 0;/创建子类(三角形)function Triangle(iBase,iHeight) Polygon.call(this,3);this.base = iBase;this.height = iHeight;Ttotype = new Polygon();Ttotype.getArea = function() return this.base*this.height/2;/创建子类(四边

16、形)function Rectangle(iLength,iWidth) Polygon.call(this,4);this.length = iLength;this.width = iWidth;Rtotype = new Polygon();Rtotype.getArea = function() return this.length*this.width;/调用var triangle = new Triangle(12,4);var rectangle = new Rectangle(22,10);alert(triangle.side

17、s); /output “3”alert(triangle.getArea(); /output “24”alert(rectangle.sides); /output “4”;alert(rectangle.getArea(); /output “220”多态/Class Parent function Person(skin,language) this.skin = skin; this.language = language; Ptotype.SayHellow = function() /中国人-子类 function China(skin,language,name) Person.call(this,skin,language); = name; this.SayName = function() alert(); Ctotype = new Person(); Ctotype.S