方式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. CF546E Soldier and Traveling（网络流，最大流）

    CF546E Soldier and Traveling 题目描述 In the country there are \(n\) cities and \(m\) bidirectional road ...

  2. BNUOJ 4049 四叉树

    四叉树 Time Limit: 1000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java class name: Ma ...

  3. 【转】 Java 进行 RSA 加解密时不得不考虑到的那些事儿

    [转] Java 进行 RSA 加解密时不得不考虑到的那些事儿 1. 加密的系统不要具备解密的功能,否则 RSA 可能不太合适 公钥加密,私钥解密.加密的系统和解密的系统分开部署,加密的系统不应该同时 ...

  4. 【转】 基于C#.NET的高端智能化网络爬虫

    [转] 基于C#.NET的高端智能化网络爬虫 前两天朋友发给我了一篇文章,是携程网反爬虫组的技术经理写的,大概讲的是如何用他的超高智商通过(挑衅.怜悯.嘲讽.猥琐)的方式来完美碾压爬虫开发者.今天我就 ...

  5. 【转】[译]理解HTTP/304响应

    [转][译]理解HTTP/304响应 原文:http://www.telerik.com/automated-testing-tools/blog/eric-lawrence/12-11-06/und ...

  6. 【Cocos2d-x 3.0】游戏开发之win32配置环境搭建project

    作者:Senlern 转载请注明,原文链接:http://blog.csdn.net/zhang429350061/article/details/37958275 非常久没有写教程了.如今认为还是要 ...

  7. 第五章，AsyncTask和ProgressBar的练习（Android）

    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools=&q ...

  8. JSP编程技术5-购物车的实现-session会话对象

    首先十分感谢大家对我的文章的支持,我是个刚刚才找到自己方向的在校大学生,当然我的知识和能力有限,眼下正在努力恶补学习中.当我看到自己首次发表到CSDN首页的文章才几个小时阅读量就超过了100时,对我来 ...

  9. vue2.0-elementUI

    main.js import Vue from 'vue' import App from './App.vue' import ElementUI from 'element-ui' import ...

  10. Oracle 导入导出 创建用户等

    localhost:1158/emD:\app\Administrator\product\11.2.0\dbhome_1\bin\imp.exe log  path  E:\app\Administ ...