JavaScript面向对象编程(7)只继承prototype

上一讲我们学会了通过原型来继承父类实例的属性,即用prototype指向一个父类实例。

这样做我们需要人为地实例化一个父类对象,而且如果父类中有一些特别的属性和行为子类有可能是用不到。

由此我们自然会想,有没有一种办法只将一些公共属性和行为公开,让子类来继承呢?

做法很简单,就是将这些公共的属性和行为全部定义到父类的prototype中。

function Shape(){

}
Shape.prototype.name = 'shape';
Shape.prototype.toString = function() {return this.name;};

有一个2d形状的类,只需复用Shape的prototype(也是一个对象)的属性,就可以这样做

function TwoDShape(){

}
//先继承
TwoDShape.prototype = Shape.prototype;//与之前不同
TwoDShape.prototype.constructor = TwoDShape;
//重写
TwoDShape.prototype.name = '2D shape';

同理,三角形Triangle是一种典型的2d形状,它可以有自己的属性和行为,同时又需要继承TwoDShape的属性:

function Triangle(side, height) {
	this.side = side;
	this.height = height;
	this.getArea = function(){return this.side * this.height / 2;};
}
Triangle.prototype = TwoDShape.prototype;
Triangle.prototype.constructor = Triangle;
//重写
Triangle.prototype.name="Triangle";

测试一下效果:

var my = new Triangle(5, 10);
/**/
alert(my.getArea());
alert(my.toString());//自己没有toString方法,继承而来
alert(my.constructor);
alert(my instanceof TwoDShape);//有继承的特性
alert(my instanceof Shape);

但是问题也出现了:

var shape = new Shape();
alert(shape.name);//坏了,重写变成了改写。。。

打印shape.name弹出的是Triangle

这是因为Triangle.prototype  TwoDShape.prototype  Shape.prototype指向的都是同一个对象,使用前最后一次修改决定了使用时的状态。

既然我们想到了用prototype来封装共性的供子类复用的属性和行为,那么我们可以坚持这种做法,但是目前这种写法带来的问题又该如何解决呢?请看下回分解!!

时间: 2024-10-07 05:51:02

JavaScript面向对象编程(7)只继承prototype的相关文章

我对javascript面向对象编程的理解---------继承

要了解javascript继承首先我们了解什么是继承 继承:继承是指一个对象直接使用另一对象的属性和方法. 所及这是我们要达到的效果 先写一个父类 function Person(name,sex){ this.name = name; this.sex = sex; } Person.prototype.showName(){ alert(this.name); } Person.prototype.showSex(){ alert(this.sex); }

JavaScript面向对象编程(4)prototype使用案例:内置对象增强

接上一讲,prototype可以用于动态增强对象,那么有些js的原生类,没有提供我们想要的功能的时候,我们就可以用prototype对其增强. 下面是一些具体的案例,希望大家能举一反三: <pre name="code" class="javascript">//检测指定元素是否在数组中 Array.prototype.contains=function(e){ for(i in this){ if(this[i]===e) return true; }

JavaScript面向对象编程(3)prototype简介

prototype--原型,用于给对象动态地新增属性和行为 先定义个构造函数 //小配件 function Gadget(name, color) { this.name = name; this.color = color; this.whatAreYou = function(){ return '我是 ' + this.color + '的' + this.name; } this.get = function(what){ return this[what];//对象与数组有类似之处,j

Javascript面向对象编程(二):构造函数的继承

这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function Cat(name,color){ this.name = name; this.color = col

Javascript面向对象编程(二):构造函数的继承 作者:yuan一峰

Javascript面向对象编程(二):构造函数的继承 作者: 阮一峰 日期: 2010年5月23日 这个系列的第一部分,主要介绍了如何"封装"数据和方法,以及如何从原型对象生成实例. 今天要介绍的是,对象之间的"继承"的五种方法. 比如,现在有一个"动物"对象的构造函数. function Animal(){ this.species = "动物"; } 还有一个"猫"对象的构造函数. function

Javascript 面向对象编程(一):封装

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. 下面就是我的学习笔记,希望对大家学习这个部分有所帮助.我主要参考了以下两本书籍: <面向对象的Javascript>(Object-Oriented JavaScript) <Javascript高级程序设计(第二版)>(Professional JavaScript for Web Developers, 2nd

再谈javascript面向对象编程

前言:虽有陈皓<Javascript 面向对象编程>珠玉在前,但是我还是忍不住再画蛇添足的补上一篇文章,主要是因为javascript这门语言魅力.另外这篇文章是一篇入门文章,我也是才开始学习Javascript,有一点心得,才想写一篇这样文章,文章中难免有错误的地方,还请各位不吝吐槽指正 吐槽Javascript 初次接触Javascript,这门语言的确会让很多正规军感到诸多的不适,这种不适来自于Javascript的语法的简练和不严谨,这种不适也 来自Javascript这个悲催的名称,

【转】Javascript 面向对象编程(一):封装

原文链接:http://www.ruanyifeng.com/blog/2010/05/object-oriented_javascript_encapsulation.html Javascript 面向对象编程(一):封装 作者:阮一峰 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"(property)和"

[Javascript] 面向对象编程思想

1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1.2{} 用{}创建对象,如: var user = { 'name':'ajun, 'age':12 } 这里同时候为user添加了两个属性分别为:name,age 在以上代码稍加改造,你还可以为一个对象添加一个方法,如: var user = { 'name':'ajun', 'age':12 '

Javascript 面向对象编程:封装

学习Javascript,最难的地方是什么? 我觉得,Object(对象)最难.因为Javascript的Object模型很独特,和其他语言都不一样,初学者不容易掌握. ============================ Javascript 面向对象编程(一):封装 Javascript是一种基于对象(object-based)的语言,你遇到的所有东西几乎都是对象.但是,它又不是一种真正的面向对象编程(OOP)语言,因为它的语法中没有class(类). 那么,如果我们要把"属性"