您好,欢迎访问一九零五行业门户网

详解JavaScript继承方式(一)

面向对象的语言多数都支持继承,继承最重要的优点就是代码复用,从而构建大型软件系统。如果一个类能够重用另一个类的属性和或方法,就称之为继承。从这个角度来看看js的继承方式。js中继承方式与写类方式息息相关。不同的写类方式造成不同的继承方式。各种流行js库继承方式也各不相同。从最简单的复用开始。
1、构造函数方式写类,通过方法调用复制父类属性/字段到子类 实现继承
这里父类,子类都采用构造函数方式写,不用原型。子类调用父类函数来复制父类的属性。
/** * 父类polygon:多边形 * @param {object} sides */ function polygon(sides) { this.sides = sides; this.setsides = function(s) {this.sides=s;} } /** * 子类triangle:三角形 */function triangle() {this.tempfun = polygon;//父类引用赋值给子类的一个属性 tempfunthis.tempfun(3);//调用 delete this.tempfun;//删除该属性 this.getarea = function(){};}//new个对象 var tri = new triangle();console.log(tri.sides);//继承的属性 console.log(tri.setsides);//继承的方法 console.log(tri.getarea);//自有的方法 //缺点是对于triangle的实例对象用instanceof为父类polygon时是false console.log(tri instanceof triangle);//trueconsole.log(tri instanceof polygon);//false 因为 javascript中具名函数的多种调用方式 ,子类还可以有以下的多种实现方式。只是在子类中调用父类方法不同而已。 function triangle() { polygon.call(this,3); //call方式调用父类 this.getarea = function(){}; } function triangle() { polygon.apply(this,[3]); //apply方式调用父类this.getarea = function(){}; } function triangle() { var temp = new polygon(3); //new方式调用父类 for(atr in temp) { //全部复制给子类this[atr] = temp[atr]; } this.getarea = function(){}; }
这种方式的缺点是子类的实例对象用instanceof检查父类时总是false。这与java中继承"is a "的关系是违背的。
2、原型方式写类,原型方式继承
core js自身的对象系统就是采用原型方式(prototype based)继承的。或者说core js没有采用常见的类继承(class based)系统,而是使用原型继承来实现自己的对象系统。工作中我们也可以用原型方式来实现继承,代码复用以构建自己的功能模块。
/** * 父类polygon:多边形 * */ function polygon() {} polygon.prototype.sides = 0; polygon.prototype.setsides = function(s) {this.sides=s;} /** * 子类triangle:三角形 */ function triangle() {} triangle.prototype = new polygon(); //这是原型继承关键的一句 triangle.prototype.getarea = function(){} //new个对象 var tri = new triangle(); console.log(tri.sides);//继承的属性 console.log(tri.setsides);//继承的方法 console.log(tri.getarea);//自有方法 //instanceof测试 console.log(tri instanceof triangle);//true,表明该对象是三角形 console.log(tri instanceof polygon);//true,表明三角形也是多边形
虽然从输出可以看出子类继承了父类polygon的属性sides和方法setsides,但sides是0,怎么会是三角形呢。还得调用下tri.setsides(3)使之成为三角形。这样似乎很不方便。不能传参数,即是原型方式的缺点。优点是正确的维护了"is a"的关系。
3、组合构造函数/原型方式写类,采用前面种方式继承
这种方式父类,子类的属性都挂在构造函数里,方法都挂在原型上。
/** * 父类polygon:多边形 */ function polygon(sides) { this.sides = sides; } polygon.prototype.setsides = function(s) {this.sides=s;} /** * triangle 三角形 * @param {object} base 底 * @param {object} height 高 */ function triangle(base,height) { polygon.call(this,3);//复制父类属性给自己 this.base = base; this.height = height; } triangle.prototype = new polygon();//复制父类方法给自己 triangle.prototype.getarea = function(){ //最后定义自己的方法 return this.base*this.height/2; } //new个对象 var tri = new triangle(12,4); console.log(tri.sides);//继承的属性 console.log(tri.setsides);//继承的方法 console.log(tri.base);//自有属性 console.log(tri.height);//自有属性 console.log(tri.getarea);//自有方法 //instanceof测试,表明正确的维护了"is a"的关系 console.log(tri instanceof triangle);//true,表明该对象是三角形 console.log(tri instanceof polygon);//true,表明三角形也是多边形
以上就是详解javascript继承方式(一)的详细内容。
其它类似信息

推荐信息