方式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. 【Henu ACM Round#17 F】Upgrading Array

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 如果我们对某一个位置i操作两次的话. 显然结果就和操作一次一样. 因为第一次操作过后1..i这些数字就变成是互质的了. gcd为1. ...

  2. POJ 3670 Eating Together（LIS)

    Description The cows are so very silly about their dinner partners. They have organized themselves i ...

  3. Lesson 1 Basic Concepts: Part 1

    www.how-to-build-websites.com/basic-concepts/part1.php An introduction to domain names, web servers, ...

  4. 3.AngularJS-过滤器

    转自:https://www.cnblogs.com/best/p/6225621.html 二.过滤器 使用过滤器格式化数据,变换数据格式,在模板中使用一个插值变量.语法格式如下: {{ expre ...

  5. SQL大小写金额转换

    --功能: 用于将小写的数值翻译成大写的字符串(支持到分,即小数点后两位) --入口参数:@decNum------数字型变量 --返回:字符串 --举例:select dbo.fn_ChnMoney ...

  6. 打开文件对话框在xp和win7上的实现文件任意多选

    作者:朱金灿 来源:http://blog.csdn.net/clever101 在xp系统上进行文件多选,实际上其文件字符串数组的缓冲区是有限,并不能支持选择任意多个文件,为此以前我还写过一篇文章: ...

  7. web.config添加identity impersonate="true"导致拒绝访问

    例:<identity impersonate="tr" userName="AD\name" password="word"/> ...

  8. JS的解析与执行过程—全局预处理阶段之全局词法环境对象

    问题:有如下代码 var a = 1; function pop() { alert(a); var a = 5; } pop();//执行结果,弹出undefined 这段代码的执行结果为undef ...

  9. Chrome OS 70 发布：这是安卓的私生子吗？

    谷歌于28日正式宣布推出Chrome OS 70.这个最新的Chrome OS系统在一些设计上具备了更多安卓风味,为配备了触摸屏的Chromebook.平板电脑和二合一设备带来了操作界面改善. 据9t ...

  10. Git学习总结（5）——搭建Git简易高效服务器

    1. mysysgit+gitblit安装流程 1.1资源  需先下载好的资源(公司用的1.6,1.7+请自行匹配对应的mysysgit+gitblit):  jdk1.6  Git-1.8.4-pr ...