方式1：子类.prototype = 父类对象

Boy.prototype = new Person();

Sub.prototype = new Sup('张三');   //可以传参数也可以不传

既可以使用父类用this声明的属性、方法。也可以使用原型对象里面的属性、方法。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Untitled Document</title>

        <script type=text/javascript charset=utf-8>

        // js中怎么去实现继承：采用原型链的概念。继承也只是继承父类的原型对象中的属性、方法。子类对象可以使用父类的属性、方法。

        // 3 原型对象.isPrototypeOf(实例对象)  判断实例对象的原型 是不是当前对象

        // 父类构造函数 sup

        function Sup(name){

            this.name = name;

        }

        // 父类的原型对象

        Sup.prototype = {

            constructor : Sup ,

            sayName : function(){

                alert(this.name);

            }

        };

        // 子类构造函数 sub

        function Sub(age){

            this.age = age ;

        }

        Sub.prototype = new Sup('张三');

        alert(Sub.prototype.constructor);//父类function Sup(name){this.name = name;}

        var sub1 = new Sub();

        alert(sub1.name);//张三，子类对象可以使用父类的属性、方法

        sub1.sayName();//张三，子类对象可以使用父类的属性、方法

        // 子类.prototype = 父类对象，就是前面的第二种方式。既可以使用父类的对象属性、方法，又可以使用父类原型对象的属性、方法

        // 父类

        function Person(name, age){

            this.name = name ;

            this.age  = age ;

        }

        // 父类的原型对象属性

        Person.prototype.id = 10 ;

        // 子类

        function Boy(sex){

            this.sex = sex ;

        }

        //继承已经实现了

        Boy.prototype = new Person('z3');

        var b = new Boy();

        alert(b.name);//z3，，子类对象可以使用父类的属性、方法

        alert(b.id);//10，，子类对象可以使用父类的属性、方法

        </script>

    </head>

    <body>

    </body>

</html>

方式2：通过call调用，只能继承父类用this声明的属性、方法。不能继承父类原型对象的属性、方法。

// 通过call调用

        // 父类

        function Person(name, age){

            this.name = name ;

            this.age  = age ;

        }

        // 父类的原型对象属性

        Person.prototype.id = 10 ;

        // 子类

        function Boy(name , age , sex){

            // call apply

            Person.call(this,name,age);

            this.sex = sex ;

        }

        var b = new Boy('张三' , 20 , '男');

        alert(b.name);

        alert(b.age);

        alert(b.sex);

        alert(b.id); //父类的原型对象并没有继承

方式三：上面2种的组合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

        <title>Untitled Document</title>

        <script type=text/javascript charset=utf-8>

        // 父类

        function Person(name, age){

            this.name = name ;

            this.age  = age ;

        }

        // 父类的原型对象属性

        Person.prototype.id = 10 ;

        Person.prototype.sayName = function(){alert(this.name);};

        // 子类

        function Boy(name , age , sex){

            Person.call(this,name,age);//继承函数的this属性、方法

            this.sex = sex ;

        }

        Boy.prototype = new Person(); //继承父类的原型对象，其实这里既可以使用父类用this声明的属性、方法。也可以使用原型对象里面的属性、方法。

        var b = new Boy('李四' , 20 , '男');

        alert(b.name);

        alert(b.sex);

        b.sayName();

        </script>

    </head>

    <body>

    </body>

</html>

js18--继承方式的更多相关文章

  1. js的三种继承方式及其优缺点

    [转] 第一种,prototype的方式: //父类 function person(){ this.hair = 'black'; this.eye = 'black'; this.skin = ' ...

  2. JavaScript继承方式详解[转]

    js继承的概念 js里常用的如下两种继承方式: 原型链继承(对象间的继承) 类式继承(构造函数间的继承) 由于js不像java那样是真正面向对象的语言,js是基于对象的,它没有类的概念.所以,要想实现 ...

  3. 从jQuery中学习来的另一种继承方式（技巧）

    遵从Js的原型链规则,利用js灵活的特性灵活地改造原型,可以实现各种创意地继承方式,昨天研究了jQuery,对作者实现继承的方式感到佩服,他对js原型和原型链的理解比较透彻,运用自如.这里给出jQue ...

  4. 重新理解JS的6种继承方式

    写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这 ...

  5. js两种定义函数、继承方式及区别

    一:js两种定义函数的方式及区别 1:函数声明: function sayA() { alert("i am A"); } 2:函数表达式: var sayB = function ...

  6. 谈谈JavaScript的2种主要继承方式

    今天给自己巩固一下js的继承知识,基础不好,有不对的地方,请尽量拍砖,越重越好. js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式. 1.原型 ...

  7. C++的三种继承方式简述

    C++对父类(也称基类)的继承有三种方式,分别为:public继承.protected继承.private继承.三种继承方式的不同在于继承之后子类的成员函数的"可继承性质". 在说 ...

  8. C++学习15 继承权限和继承方式

    C++继承的一般语法为: class 派生类名:［继承方式］ 基类名{ 派生类新增加的成员 }; 继承方式限定了基类成员在派生类中的访问权限,包括 public(公有的).private(私有的)和 ...

  9. Javascript的四种继承方式

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

  10. JavaScript之四种继承方式讲解

    在Javascript中,所有开发者定义的类都可以作为基类,但出于安全性考虑,本地类和宿主类不能作为基类,这样可以防止公用访问编译过的浏览器级的代码,因为这些代码可以被用于恶意攻击. 选定基类后,就可 ...

随机推荐

  1. python3+opencv+tkinter开发简单的人脸识别小程序

    学校里有门图像处理的课程最终需要提交一个图像处理系统, 正好之前对于opencv有些了解,就简单的写一个人脸识别小程序吧 效果图如下 笔者IDE使用Pycharm,GUI编程直接使用内置的tkinte ...

  2. KM最大匹配 HDU 2255

    KM算法详解+模板 - wenr - 博客园  http://www.cnblogs.com/wenruo/p/5264235.html #include<iostream> #inclu ...

  3. Oracle拾遗

    这次学习Oracle视频.还是学到了不少东西的. 首先,这是一次系统的学习.对自己的知识体系是一次查漏补缺,曾经仅仅是简单的会用,如今看到出的问题,非常easy就能够想到是哪一部分出了问题.尤其是如今 ...

  4. Java编程手冊-Collection框架（下）

    建议先看Java编程手冊-Collection框架(上) 5.  Set<E>接口与实现 Set<E>接口表示一个数学的集合,它不同意元素的反复,仅仅能包括一个null元素. ...

  5. UI_UISegmentedControl 控件

    创建控件 - (void)createSegmentControl { UISegmentedControl *segmentedControl = [[UISegmentedControl allo ...

  6. Eclipse快捷键 10个最实用的快捷键

    Eclipse中10个最实用的快捷键组合  一个Eclipse骨灰级开发人员总结了他觉得最实用但又不太为人所知的快捷键组合.通过这些组合能够更加easy的浏览源代码.使得总体的开发效率和质量得到提升. ...

  7. thinkphp跨模块调用

    thinkphp跨模块调用 跨模块调用模板 return $view->fetch('admin@user/add'); 全路径模板调用: return $view->fetch(APP_ ...

  8. 解决Visual Studio-IIS Express 支持局域网访问

  9. SQL中union union all 和in的查询效率问题

    UNION用的比较多union all是直接连接,取到得是所有值,记录可能有重复 union 是取唯一值,记录没有重复 1.UNION 的语法如下: [SQL 语句 1] UNION [SQL 语句 ...

  10. installp 软件的4种状态

    安装和维护LPP软件     installp 对包提供了如下四种主要的操作: Apply Commit Reject Remove   webes.4.0.0.1 commited webes.4. ...