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>
目录
相关文章
|
8天前
|
JavaScript 前端开发
如何在 JavaScript 中使用 __proto__ 实现对象的继承?
使用`__proto__`实现对象继承时需要注意原型链的完整性和属性方法的正确继承,避免出现意外的行为和错误。同时,在现代JavaScript中,也可以使用`class`和`extends`关键字来实现更简洁和直观的继承语法,但理解基于`__proto__`的继承方式对于深入理解JavaScript的面向对象编程和原型链机制仍然具有重要意义。
|
12天前
|
Web App开发 JavaScript 前端开发
如何确保 Math 对象的方法在不同的 JavaScript 环境中具有一致的精度?
【10月更文挑战第29天】通过遵循标准和最佳实践、采用固定精度计算、进行全面的测试与验证、避免隐式类型转换以及持续关注和更新等方法,可以在很大程度上确保Math对象的方法在不同的JavaScript环境中具有一致的精度,从而提高代码的可靠性和可移植性。
|
17天前
|
JavaScript 前端开发
Javascript如何实现继承?
【10月更文挑战第24天】JavaScript 中实现继承的方式有很多种,每种方式都有其优缺点和适用场景。在实际开发中,我们需要根据具体的需求和情况选择合适的继承方式,以实现代码的复用和扩展。
|
11天前
|
JavaScript 前端开发
如何使用原型链继承实现 JavaScript 继承?
【10月更文挑战第22天】使用原型链继承可以实现JavaScript中的继承关系,但需要注意其共享性、查找效率以及参数传递等问题,根据具体的应用场景合理地选择和使用继承方式,以满足代码的复用性和可维护性要求。
|
11天前
|
JavaScript 前端开发 开发者
js实现继承怎么实现
【10月更文挑战第26天】每种方式都有其优缺点和适用场景,开发者可以根据具体的需求和项目情况选择合适的继承方式来实现代码的复用和扩展。
27 1
|
12天前
|
JavaScript 前端开发 图形学
JavaScript 中 Math 对象常用方法
【10月更文挑战第29天】JavaScript中的Math对象提供了丰富多样的数学方法,涵盖了基本数学运算、幂运算、开方、随机数生成、极值获取以及三角函数等多个方面,为各种数学相关的计算和处理提供了强大的支持,是JavaScript编程中不可或缺的一部分。
|
1月前
|
存储 JavaScript 前端开发
JavaScript 对象的概念
JavaScript 对象的概念
37 4
|
1月前
|
缓存 JavaScript 前端开发
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
JavaScript中数组、对象等循环遍历的常用方法介绍(二)
31 1
|
1月前
|
存储 JavaScript 前端开发
js中函数、方法、对象的区别
js中函数、方法、对象的区别
16 2
|
1月前
|
JavaScript 前端开发 Unix
Node.js 全局对象
10月更文挑战第5天
24 2