javascript 对象继承

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <title>4.2 对象继承</title>

</head>

<body>

    1.对象冒充:<br />

    <script type="text/javascript">

        //实例1:简单继承

        function ClassA(sColor) {

            this.color = sColor;

            this.sayColor = function () { alert("ClassA.sayColor:" + this.color); }

        }

        function ClassB(sColor, name) {

            this.newMethod = ClassA; //传递ClassA引用

            this.newMethod(sColor); //调用ClassA对象,继承ClassA的方法

            delete this.newMethod; //删除对ClassA的引用

            this.name = name;

            this.sayName = function () { alert("ClassB.sayName:" + this.name); }

        }

        var a = new ClassA("red");

        var b = new ClassB("green", "hello");

        a.sayColor();

        b.sayColor();

        b.sayName();

 

        //实例2:多继承

        //这里存在一个弊端,如果ClassA和ClassB具有相同的属性或方法,那么后者将具有更高的优先级。

        function ClassC(sColor, name, age) {

            this.newMethod = ClassA; //传递ClassA引用

            this.newMethod(sColor); //调用ClassA对象,继承ClassA的方法

            delete this.newMethod; //删除对ClassA的引用

            this.newMethod = ClassB; //传递ClassB引用

            this.newMethod(sColor, name); //调用ClassB对象,继承ClassB的方法

            delete this.newMethod; //删除对ClassB的引用

            this.age = age;

            this.sayAge = function () { alert("ClassC.sayAge:" + this.age); }

        }

        var c = new ClassC("green", "hello", 25);

        c.sayColor();

        c.sayName();

        c.sayAge();

    </script>

 

    2.call()方法:<br />

    <script type="text/javascript">

        //实例3:call()方法

        function ClassD(sColor, name) {

            ClassA.call(this, sColor); //类似C#里的扩展方法

            this.name = name;

            this.sayName = function () { alert("ClassD.sayName:" + this.name); }

        }

        var d = new ClassD("blue", "hello");

        d.sayColor();

        d.sayName();

    </script>

 

    3.apply()方法:<br />

    <script type="text/javascript">

        //实例4:apply()方法

        function ClassE(sColor, name) {

            ClassA.apply(this, arguments); //用数组打包参数,也可以是ClassA.apply(this, new Array(sColor));

            this.name = name;

            this.sayName = function () { alert("ClassE.sayName:" + this.name); }

        }

        var e = new ClassD("red", "hello");

        e.sayColor();

        e.sayName();

    </script>

 

    4.原型链方式:<br />

    <script type="text/javascript">

        //实例5:原型链方式

        function ClassF(sColr) {

            this.color = sColor;

        }

        ClassF.prototype.sayColor = function () { alert("ClassF.prototype.sayColor:" + this.sColor); }

        function ClassG(sColor, name) {

            ClassA.call(this, sColor); //属性:用对象冒充继承ClassF的sColor属性

            this.name = name;

        }

        ClassG.prototype = new ClassF(); //方法:用原型链方式继承ClassF类的方法

        ClassG.prototype.sayName = function () { alert("ClassG.prototype.sayName:" + this.name); }

        var g = new ClassD("red", "hello");

        g.sayColor();

        g.sayName();

    </script>

</body>

</html>

时间: 2024-09-27 18:49:21

javascript 对象继承的相关文章

理解javascript对象继承_javascript技巧

先从一个问题进行研究深入,什么是javascript对象继承? 比如我们有一个"动物"对象的构造函数. function animal() { this.type = '动物'; } 还有一个"猫"对象的构造函数. function cat(name,color) { this.name = name; this.color = color; } 我们知道猫也属于动物,如果这个猫对象想要继承动物对象的属性,我们该怎么做呢? 构造函数绑定 使用构造函数绑定是最简单的方

JavaScript对象及继承教程之内置对象(1)

一. 类与对象 在 JavaScript 世界里,关于面向对象第一个要澄清的概念就是类.对象都是有类来定义的,通过类来创建对象就是我们所熟悉的实例化.然而,在 JavaScript 中别没有真正的类,对象的定义就是对象自身.而 ECMA-262 干脆把这种妥协的方式称作为对象的调和剂.为了方便理解,我通常把这个发挥类的作用的调和剂称为类. 二. 内置对象 1. Array类 数组在 js 中是非常常用的一种数据结构,由于其灵活性和易用性,合理的使用数组可以帮助我们更好的实现相应的功能. 让我们先

javascript创建对象、对象继承的实用方式详解_基础知识

本文约定:不特殊声明的情况下,属性代指属性或方法. 创建对象.对象继承实际上是一回事:我们所需要的实例对象通过构造函数获得私有属性.通过原型链获得共享的属性.什么是好的方式?私有属性通过构造函数的方式获得(不考虑实例中自定义私有属性)且不需要重写,共享属性通过原型链找到且不需要重复创建. 普适的方式 组合使用构造函数模式和原型模式创建对象 function HNU_student(name) { this.name = name; this.sayName = function() { retu

JavaScript必知必会(七)js对象继承_基础知识

对象继承inherit var o = { r: }; var c = function f() { }; c.prototype = o; c.r = ; alert(o.r);//被继承的属性值未发生改变.alert(c.r);//c中r覆盖了o中的属性. 如何调用o中的r属性呢. var o = { r: }; var c = function f() { }; c.prototype = o; alert(o.r);// 被继承的属性值未发生改变. alert(c.r);//查询r属性,

JavaScript中的对象继承关系_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); 像上面这种就是我们要使用的类继承,用这种继承

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

本文分享了js对象继承的N种模式,供大家参考. 一.原型链继承 function Person(){}; Person.prototype = { constructor: Person, name: "Oliver" }; function People(){}; People.prototype = new Person(); People.prototype.constructor = People; People.prototype.sayName = function(){

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

javascript中的对象继承的方法有很多,在接下来的文章中为大家介绍下使用apply方法是如何实现的 代码如下: <script type="text/javascript">  //使用apply方法实现对象继承    function Parent(username) {  this.username = username;  this.sayHello = function() {  alert(this.username);  }  }    function

使用apply方法实现javascript中的对象继承_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类继承的一些实验

其实一开始编js没怎么用过对象,一般都用func,func,func···但是用多了,感觉代码一点都不美观,还要这里包一个函数,那里包一个 函数,或者一直都是函数调用,不好看,而且一些重用的都要重写的话就很麻烦(不好意思,对于我这种新手,开始还是一般用func比较高效率···).所以 就决定开始要用object来编程才能更省事,下面就是我看了一些博客文章关于类的见解,有什么不对的希望各位可以多多给些指点: 对于类的编程,声明的方法有如下几种:1.var test = function(){};2