方式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. C++归并算法

    #include <iostream> using namespace std; void DealWhat(int ar[],int start,int end,int b[]) { i ...

  2. Android带索引联系人列表

    网上Android联系人列表的样例也非常多,都和微信的联系人差点儿相同,因为项目用到了联系人列表索引功能(产品把字母item给去掉了),只是也还是好实现.这里我也来分享分享我的实现,免得以后忘了.那先 ...

  3. Bloxorz I （poj 3322 水bfs）

    Language: Default Bloxorz I Time Limit: 2000MS   Memory Limit: 65536K Total Submissions: 5443   Acce ...

  4. Deferred Rendering（三）反锯齿和半透明问题

    Deferred 框架下的AA 前面说过Deferred 框架下无法使用硬件AA.这句话不严谨: Deferred Shading在G-Buffer之后,物体几何信息全被抛弃了,导致兴许每一个像素都独 ...

  5. Visual Code中的智能提示

    https://code.visualstudio.com/docs/editor/intellisense C# https://marketplace.visualstudio.com/items ...

  6. libsvm 的使用

    1. libsvm 支持的SVM模型 官网地址:LIBSVM – A Library for Support Vector Machines libsvm 支持的 SVM 模型如下(C:classif ...

  7. C# DevExpress GridControl使用方法

    一.如何解决单击记录整行选中的问题 View->OptionsBehavior->EditorShowMode 设置为:Click 二.如何新增一条记录 ().gridView.AddNe ...

  8. JAVA 获取访问者IP

    * 获取访问者IP * * 在一般情况下使用Request.getRemoteAddr()即可,但是经过nginx等反向代理软件后,这个方法会失效. * * 本方法先从Header中获取X-Real- ...

  9. Python 爬取单个网页所需要加载的地址和CSS、JS文件地址

    Python 爬取单个网页所需要加载的URL地址和CSS.JS文件地址 通过学习Python爬虫,知道根据正式表达式匹配查找到所需要的内容(标题.图片.文章等等).而我从测试的角度去使用Python爬 ...

  10. Netty In Action中文版 - 第七章：编解码器Codec

    http://blog.csdn.net/abc_key/article/details/38041143 本章介绍 Codec,编解码器 Decoder,解码器 Encoder,编码器 Netty提 ...