`
zhyt710
  • 浏览: 206509 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

javascript对象的继承

阅读更多

该篇文章的代码采摘自http://www.cnblogs.com/jingtao/archive/2008/04/29/1175668.html

自己只经过了微小的改动

 

代码主要说明了三种继承javascript对象的方法:apply,复制,prototype

<html>
<head>
    <title>JavaScript面向对象编程</title>
    <script language="javascript" type="text/javascript">
    //基类
    function Person()
    {
        //定义属性
        this.Name="Person";
        this.Sex="NONE";
        this.Age="?";
        //定义方法
        this.SayName=function(){alert(this.Name);};
        this.SaySex=function(){alert(this.Sex);};
        this.SayAge=function(){alert(this.Age);};
    }
    //子类
    function ManPerson()
    {   
        this.Name="ManPerson";
        this.Sex="Man";
        this.Age="20";
        //执行该语句时会调用Person中的构造器,先前赋值的ManPerson,Man,20就失去作用了,所以这句话
        //要放在this.Name="ManPerson";之前才能即继承Person的方法,又不会覆盖我们的赋值操作。
        Person.apply(this);
    }
    
    //第一种方法
    function first(){
	    var p = new Person();
	    //执行结果为Name:Person  Sex:NONE  Age:?
	    alert("Name:"+p.Name+"  Sex:"+p.Sex+"  Age:"+p.Age);
	    //执行结果Person
	    p.SayName();
	    var mp=new ManPerson();
	    //apply在赋值后结果为:Name:Person  Sex:NONE  Age:?
	    //在赋值前结果为:Name:ManPerson  Sex:Man  Age:20
	    alert("Name:"+mp.Name+"  Sex:"+mp.Sex+"  Age:"+mp.Age);
	    //执行结果Man
	    //可以看到ManPerson很好的继承了Person
	    mp.SaySex();
    }
    
    //第二种方法
    function second(){
	    for(pro in Person)
	    {
	        ManPerson[pro]=Person[pro];
	    }
	    var p=new Person();
	    //执行结果为Name:Person  Sex:NONE  Age:?
	    alert("Name:"+p.Name+"  Sex:"+p.Sex+"  Age:"+p.Age);
	    //执行结果Person
	    p.SayName();
	    var mp=new ManPerson();
	    //执行结果为Name:Person  Sex:NONE  Age:?
	    alert("Name:"+mp.Name+"  Sex:"+mp.Sex+"  Age:"+mp.Age);
	    //执行结果NONE
	    mp.SaySex();
	    mp.Name="ManPerson";
	    //执行结果:ManPerson
	    //可以看到ManPerson继承了Person的SayName
	    mp.SayName();
	    
    }

    //第三种方法
    function third(){
	    //第三种方法
	    ManPerson.prototype=Person.prototype;
	    var mmp=new ManPerson();
	    //执行结果:Person
	    mmp.SayName();
	    mmp.Name="ManPerson";
	    //执行结果:ManPerson、
	    //ManPerson继承了Person的方法
	    mmp.SayName();
    }
    </script>
</head>
<body>
    <form id="form1" runat="server">
	    <div>
	    <button value="FirstMethod" onclick="first()">FirstMethod</button><br />
	    <button validationgroup="SecondMethod" onclick="second()">SecondMethod</button><br />
	    <button value="ThirdMethod" onclick="third()">ThirdMethod</button>
	    </div>
    </form>
</body>
</html>

 

分享到:
评论

相关推荐

    js javascript zInherit 对象 继承

    总的来说,`zInherit`是JavaScript对象继承的一种实现,它利用原型链实现继承关系,使得子类可以继承和扩展父类的属性和方法。理解并熟练掌握这种继承方式,对于深入理解JavaScript的OOP特性以及编写高效的代码至关...

    理解javascript对象继承

    JavaScript对象继承是面向对象编程中的核心概念,它允许一个对象(子对象)获取另一个对象(父对象或基对象)的属性和方法。这种方式使得代码复用和组织更加有效。本文将详细探讨JavaScript对象继承的不同实现方式...

    Javascript中对象继承的实现小例

    JavaScript对象继承的实现机制是该语言灵活特性的核心部分之一。了解如何在JavaScript中实现对象的继承,可以帮助开发者构建更为丰富和具有层次性的代码结构。接下来,我们将详细探讨文档中提供的JavaScript对象继承...

    JavaScript面向对象继承详解

    每个JavaScript对象都有一个内部的[[Prototype]]属性,通常可以通过`__proto__`或`Object.getPrototypeOf`访问。当试图访问对象的一个属性时,如果该属性不存在于当前对象,JavaScript会向上搜索原型链,直到找到该...

    理解js对象继承的N种模式

    本文将深入探讨JavaScript对象继承的三种主要模式:原型链继承、借用构造函数(伪造对象,经典继承)以及组合继承(伪经典继承)。 一、原型链继承 在JavaScript中,每个对象都有一个prototype属性,指向它的构造...

    学习javascript面向对象 javascript实现继承的方式

    继承是面向对象编程的核心概念之一,它允许我们创建一个新对象,该对象继承现有对象的属性和方法。在JavaScript中,实现继承有多种方式,每种方式都有其特点、优势和不足。本文将详细介绍六种实现JavaScript继承的...

    举例说明JavaScript中的实例对象与原型对象_.docx

    在JavaScript中,实例对象与原型对象是两种关键的概念,它们构成了JavaScript对象继承的基础。每当你创建一个新的对象实例,它都会有一个内部链接到它的构造函数的原型。这个原型对象包含了可以通过实例对象访问的...

    uberproto:JavaScript对象继承糖

    Uberproto是一个简单的基础对象,它为JavaScript中的ECMAScript 5样式对象继承添加了一些糖。 简而言之,这是它的作用: 轻松扩展对象 初始化方法 超级方法 混合蛋白 方法代理 占用空间小(最小约0.5Kb)并且仅...

    JavaScript学习之三 — JavaScript实现继承的7种方式

    在JavaScript中,面向对象编程是实现复杂功能和代码复用的关键。继承是面向对象的核心特性之一,它允许一个对象(子类)获取另一个对象(父类)的属性和方法。本篇文章将深入探讨JavaScript实现继承的七种常见方式,...

    JavaScript实现继承的几种方式

    在JavaScript中,面向对象编程是实现复杂功能和代码复用的关键。继承是面向对象的核心特性之一,它允许一个对象(子类)从另一个对象(父类)获取属性和方法,从而形成类之间的层次结构。本篇文章将深入探讨...

    javascript对象参考手册

    3. **原型链**:JavaScript的对象继承是基于原型的,每个对象都有一个`__proto__`属性,指向其构造函数的原型对象。这形成了原型链,使得对象可以访问其构造函数原型上的属性和方法。 4. **闭包与作用域**:...

    Javascript面向对象编程.

    面向对象编程(Object-Oriented Programming,OOP)是编程的一种重要范式,JavaScript也完全支持这一特性,尽管它并非一种传统的静态类型语言。这篇博客文章可能详细讨论了如何在JavaScript中实现面向对象编程。 在...

    浅谈JavaScript对象与继承_.docx

    关于对象继承,JavaScript采用的是原型链机制。每个对象都有一个`__proto__`属性,指向它的原型。当试图访问对象的一个属性时,如果对象本身没有该属性,JavaScript会查找`__proto__`,如果`__proto__`也没有,就会...

    JavaScript继承

    JavaScript中的继承是一个核心概念,它在面向对象编程中扮演着至关重要的角色。与其他面向对象语言相比,JavaScript的继承机制更为复杂。在Java或C++等语言中,继承通常只需要一个关键字,如`extends`,但在...

    JavaScript权威指南第四版(中文版)

    原型和原型链是JavaScript对象继承的核心机制。每个JavaScript对象都有一个内部的[[Prototype]]属性,通常通过`__proto__`或`Object.getPrototypeOf`访问。通过原型链,对象能够继承和共享其原型上的属性和方法。ES6...

    JavaScript必知必会(七)js对象继承

    本篇将深入探讨JavaScript对象继承的原理、方法以及如何正确地访问和使用继承的属性。 首先,我们要理解JavaScript的原型链。每个JavaScript对象都有一个内置的`__proto__`属性,指向其构造函数的`prototype`对象。...

    面向对象JavaScript精要(英文原版pdf)

    ### 面向对象JavaScript精要 #### 一、书籍概览 本书《面向对象JavaScript精要》由Nicholas C. Zakas编写,是面向对象编程领域中的权威指南之一,尤其针对JavaScript这门语言。作者深入浅出地介绍了面向对象编程的...

    javascript创建对象、对象继承的有用方式详解_.docx

    ### JavaScript 创建对象与对象继承的有效方法 #### 一、引言 JavaScript 是一种基于原型的语言,这使得其处理对象和继承的方式与传统的面向对象编程语言有所不同。本文将深入探讨 JavaScript 中创建对象及对象继承...

Global site tag (gtag.js) - Google Analytics