javascript 用原型继承来实现对象系统

javascript中,对象没有原型,而构造器有原型
原型的含义:如果构造器有一个原型对象 A,则由该构造器创建的实例都必然复制自A


代码如下:

/*申明2个构造器*/
var flower=function(){
this.name="nokia";
}
var flower2=function(){
this.age=22;
}
/*原型链*/
flower2.prototype=new flower();
/*根据刚才原型的定义,实例obj必然复制自new flower();*/
obj=new flowe2();
/*从父类继承的属性*/
alert(obj.name); //==>"nokia"
alert(obj.age); //==>22

一个构造器产生的实例，其constructor属性默认总是指向该构造器
alert(obj.constructor);//==>flower
构造器原型的constructor属性 指向构造器本身
alert(flower.prototype.constructor==flower);//==>true
constructor会与原型继承发生的冲突


代码如下:

function flower(){}
function flower2(){}
flower2.prototype=new flower();
var obj1=new flower();
var obj2=new flower2();
/*问题出现了,2个实例的constructor属性都指向flower*/
alert(obj1.constructor==obj2.constructor);
/*obj1和obj2是不同的构造器产生的实例,缺指向相同的构造器,显然出了问题*/

解决的方法


代码如下:

flower2.prototype=new flower();
/*重置原型后,修改原型的constructor属性*/
flower2.prototype.constructor=flower2
或每次构造实例时都重写constructor属性
function flower2(){
this.constructor=arguments.callee;
}
flower2.prototype=new flower();

此外原型继承没有提供调用父类的方法
然而我们基于原型继承,通过静态变量记录父类来弥补这一缺陷


代码如下:

var Class={
create:function()
{
var _class=function()
{
this.init.apply(this,arguments);
}
_class.prototype.init=Function.prototype.init;
try{
return _class;
}finally{
_class=null;
}
}
};
//默认构造函数
Function.prototype.init=function(){}
//方法扩展
Function.prototype.extend=function(list)
{
for(var i in list)this.prototype[i]=list[i];
return this;
}
//多级继承
Function.prototype.inherits=function(parent)
{
//继承的深度级别
var _depth=0;
//方法属性移植
this.extend(new parent());
//初始化构造函数 类的继承通常不继承构造函数
this.prototype.init=Function.prototype.init;
//类的静态父类
this.parent=parent;
//执行父类函数
this.prototype.parent=function(name)
{
//若没有参数则执行构造函数
if(!name)name='init';
//即将执行的父类
var _parent=parent;
//若当前已经在父类中执行则继续向上寻找超类
if(_depth)
{
for(var i=0;i<_depth;i++)
{
_parent=_parent.parent;
}
}
//设置好级别
_depth++;
try{
//执行函数并返回值
return _parent.prototype[name].apply(this,Array.prototype.slice.apply(arguments,[1]));
}catch(e){
throw(e);
}finally{
//恢复级别
_depth--;
}
}
return this;
}

例子:


代码如下:

//创建名为class1的构造器
var class1=Class.create().extend({
b:function()
{
alert('clas');
alert(this.c);
},
c:100
});
//创建"对象"(构造器)的实例
var s=new class1();
s.b();// ==>"clas",100

继承父类，并调用父类的方法:


代码如下:

var test=Class.create().inherits(class1).extend({
b:function()
{
alert('test');
this.parent('b')
},
c:110
});

赞 (0)

相关推荐

  • javascript 面向对象封装与继承

    整理一下js面向对象中的封装和继承. 1.封装 js中封装有很多种实现方式,这里列出常用的几种. 1.1 原始模式生成对象 直接将我们的成员写入对象中,用函数返回. 缺点:很难看出是一个模式出来的实例. 代码: 复制代码 代码如下: function Stu(name, score) {             return {                 name: name,                 score: score             }         }    

  • js对象的复制继承实例

    本文实例讲述了js对象的复制继承.分享给大家供大家参考.具体如下: 复制代码 代码如下: <script type="text/javascript"> Object.prototype.extend = function(obj){  //在函数里,把obj属性复制到自身  for(var k in obj){   if(obj.hasOwnProperty(k)){    if(this[k] == undefined){     this[k] = obj[k];  

  • js对象的构造和继承实现代码

    复制代码 代码如下: <script> //定义js的user对象 function User(name,age){ this.name=name, this.age=age, this.getName=function(){ return this.name; }, this.getAge=function(){ return this.age; } } //实例化一个对象 var use=new User("aa",21); alert(use.name); alert

  • JavaScript中创建对象和继承示例解读

    对象创建: 当一个函数对象被创建时候,Function构造器产生的函数对象会运行类似这样的代码: 复制代码 代码如下: this.prototype={constructor:this}; 假设函数F F用new方式构造对象时,对象的constructor被设置成这个F.prototype.constructor 如果函数在创建对象前修改了函数的prototype,会影响创建出来对象的construtor属性 如: 复制代码 代码如下: function F(){}; F.prototype={

  • javascript的函数、创建对象、封装、属性和方法、继承

    一,function 从一开始接触到js就感觉好灵活,每个人的写法都不一样,比如一个function就有N种写法 如:function showMsg(){},var showMsg=function(){},showMsg=function(){} 似乎没有什么区别,都是一样的嘛,真的是一样的吗,大家看看下面的例子 复制代码 代码如下: ///----------------------------------------------------------------------------

  • js对象继承之原型链继承实例

    本文实例讲述了js对象继承之原型链继承的用法.分享给大家供大家参考.具体分析如下: 复制代码 代码如下: <script type="text/javascript"> //定义猫的对象 var kitty  = {color:'yellow',bark:function(){alert('喵喵');},climb:function(){alert('我会爬树')}}; //老虎对象的构造函数 function tiger(){  this.color = "ye

  • 使用apply方法实现javascript中的对象继承

    复制代码 代码如下: <script type="text/javascript"> //使用apply方法实现对象继承 function Parent(username) { this.username = username; this.sayHello = function() { alert(this.username); } } function Child(username, password) { Parent.apply(this, new Array(use

  • JavaScript中的对象继承关系

    我们今天就来看一下继承中的类继承以及类继承和原型继承的混用,所谓类继承,就是使用call或者apply方法来进行冒充继承: function Desk(size,height){ this.size=size; this.height=height; } function MJDesk(size,height){ Desk.call(this,size,height);//这种就叫类继承. } var mj = new MJDesk(10,123); 像上面这种就是我们要使用的类继承,用这种继承

  • javascript 用原型继承来实现对象系统

    javascript中,对象没有原型,而构造器有原型 原型的含义:如果构造器有一个原型对象 A,则由该构造器创建的实例都必然复制自A 复制代码 代码如下: /*申明2个构造器*/ var flower=function(){ this.name="nokia"; } var flower2=function(){ this.age=22; } /*原型链*/ flower2.prototype=new flower(); /*根据刚才原型的定义,实例obj必然复制自new flower

  • JavaScript的原型继承详解

    JavaScript的原型继承详解

    JavaScript是一门面向对象的语言.在JavaScript中有一句很经典的话,万物皆对象.既然是面向对象的,那就有面向对象的三大特征:封装.继承.多态.这里讲的是JavaScript的继承,其他两个容后再讲. JavaScript的继承和C++的继承不大一样,C++的继承是基于类的,而JavaScript的继承是基于原型的. 现在问题来了. 原型是什么?原型我们可以参照C++里的类,同样的保存了对象的属性和方法.例如我们写一个简单的对象 复制代码 代码如下: function Animal

  • 关于JavaScript中原型继承中的一点思考

    关于JavaScript中原型继承中的一点思考

    我们先看一段传统的继承代码: 复制代码 代码如下: //定义超类 function Father(){ this.name = "父亲"; } Father.prototype.theSuperValue = ["NO1","NO2"]; //定义子类 function Child(){ } //实现继承 Child.prototype = new Father(); //修改共享数组 Child.prototype.theSuperValue.

  • 浅谈javascript的原型继承

    请看源码: 复制代码 代码如下: function clone(o) { var F = function(){}; F.prototype = o; return new F(); } 首先看ext(4.1的1896行开始)的原型式继承. 复制代码 代码如下: var TemplateClass = function(){}; var ExtObject = Ext.Object = { chain: function (object) { TemplateClass.prototype =

  • JavaScript原型继承_动力节点Java学院整理

    JavaScript原型继承_动力节点Java学院整理

    在传统的基于Class的语言如Java.C++中,继承的本质是扩展一个已有的Class,并生成新的Subclass. 由于这类语言严格区分类和实例,继承实际上是类型的扩展.但是,JavaScript由于采用原型继承,我们无法直接扩展一个Class,因为根本不存在Class这种类型. 但是办法还是有的.我们先回顾Student构造函数: function Student(props) { this.name = props.name || 'Unnamed'; } Student.prototyp

  • javascript原型继承工作原理和实例详解

    先为大家分享JS原型继承实例,供大家参考,具体内容如下 一.JS原型继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS原型继承</title> </head> <body> <!--原型继承--> <script type="text/javascript"> //cl

  • JavaScript之class继承_动力节点Java学院整理

    JavaScript的对象模型是基于原型实现的,特点是简单,缺点是理解起来比传统的类-实例模型要困难,最大的缺点是继承的实现需要编写大量代码,并且需要正确实现原型链. 有没有更简单的写法?有! 新的关键字class从ES6开始正式被引入到JavaScript中.class的目的就是让定义类更简单. 我们先回顾用函数实现Student的方法: function Student(name) { this.name = name; } Student.prototype.hello = functio

  • Javascript中类式继承和原型式继承的实现方法和区别之处

    在所有面向对象的编程中,继承是一个重要的话题.一般说来,在设计类的时候,我们希望能减少重复性的代码,并且尽量弱化对象间的耦合(让一个类继承另一个类可能会导致二者产生强耦合).关于"解耦"是程序设计中另一个重要的话题,本篇重点来看看在javascript如何实现继承. 其它的面向对象程序设计语言都是通过关键字来解决继承的问题(比如extend或inherit等方式).但是javascript中并没有定义这种实现的机制,如果一个类需要继承另一个类,这个继承过程需要程序员自己通过编码来实现.

  • JavaScript使用原型和原型链实现对象继承的方法详解

    JavaScript使用原型和原型链实现对象继承的方法详解

    本文实例讲述了JavaScript使用原型和原型链实现对象继承的方法.分享给大家供大家参考,具体如下: 实际上JavaScript并不是一门面向对象的语言,不过JavaScript基于原型链的继承方式.函数式语法,使得编程相当灵活,所以可以利用原型链来实现面向对象的编程. 之前对JavaScript一直都是一知半解,这两天看了一下原型链这一块知识,综合练习了一下JavaScript的对象继承方式. 以下就是原型链和原型的关系,引用网上的一张图 在Javascript中,每个函数都有一个原型属性p

  • JavaScript 基于原型的对象（创建、调用）

    JavaScript中的对象有三种 1,内部对象 如Array,Boolean,Data,Math,Number,Object,RegExp,String对象等 这些对象系统给我们提供了各自的属性与方法供调用. 2,基于类的对象 用类的方式实现对象的引用,这些类需要我们自己定义 3,基于原型的对象 提供有关如何使用 JavaScript 基于原型的对象模型的指南,并且提供指向特定信息的链接,这些信息描述基于原型的对象的自定义构造函数和继承. 在我们写js代码的时候,内部对象是不可避免的要引用,但

随机推荐