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

Boy.prototype = new Person();

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

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

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Untitled Document</title>
  6.         <script type=text/javascript charset=utf-8>
  7.         // js中怎么去实现继承：采用原型链的概念。继承也只是继承父类的原型对象中的属性、方法。子类对象可以使用父类的属性、方法。
  8.         // 3 原型对象.isPrototypeOf(实例对象)  判断实例对象的原型 是不是当前对象
  9.  
  10.         // 父类构造函数 sup
  11.         function Sup(name){
  12.             this.name = name;
  13.         }
  14.         // 父类的原型对象
  15.         Sup.prototype = {
  16.             constructor : Sup ,
  17.             sayName : function(){
  18.                 alert(this.name);
  19.             }
  20.         };
  21.  
  22.         // 子类构造函数 sub
  23.         function Sub(age){
  24.             this.age = age ;
  25.         }
  26.         Sub.prototype = new Sup('张三');
  27.         alert(Sub.prototype.constructor);//父类function Sup(name){this.name = name;}
  28.         var sub1 = new Sub();
  29.         alert(sub1.name);//张三，子类对象可以使用父类的属性、方法
  30.         sub1.sayName();//张三，子类对象可以使用父类的属性、方法
  31.  
  32.         // 子类.prototype = 父类对象，就是前面的第二种方式。既可以使用父类的对象属性、方法，又可以使用父类原型对象的属性、方法
  33.         // 父类
  34.         function Person(name, age){
  35.             this.name = name ;
  36.             this.age  = age ;
  37.         }
  38.         // 父类的原型对象属性
  39.         Person.prototype.id = 10 ;
  40.         // 子类
  41.         function Boy(sex){
  42.             this.sex = sex ;
  43.         }
  44.         //继承已经实现了
  45.         Boy.prototype = new Person('z3');
  46.         var b = new Boy();
  47.         alert(b.name);//z3，，子类对象可以使用父类的属性、方法
  48.         alert(b.id);//10，，子类对象可以使用父类的属性、方法
  49.         </script>
  50.     </head>
  51.     <body>
  52.     </body>
  53. </html>

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

  1. // 通过call调用
  2.         // 父类
  3.         function Person(name, age){
  4.             this.name = name ;
  5.             this.age  = age ;
  6.         }
  7.         // 父类的原型对象属性
  8.         Person.prototype.id = 10 ;
  9.  
  10.         // 子类
  11.         function Boy(name , age , sex){
  12.             // call apply
  13.             Person.call(this,name,age);
  14.             this.sex = sex ;
  15.         }
  16.  
  17.         var b = new Boy('张三' , 20 , '男');
  18.         alert(b.name);
  19.         alert(b.age);
  20.         alert(b.sex);
  21.         alert(b.id); //父类的原型对象并没有继承

方式三：上面2种的组合

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.         <title>Untitled Document</title>
  6.         <script type=text/javascript charset=utf-8>
  7.         // 父类
  8.         function Person(name, age){
  9.             this.name = name ;
  10.             this.age  = age ;
  11.         }
  12.         // 父类的原型对象属性
  13.         Person.prototype.id = 10 ;
  14.         Person.prototype.sayName = function(){alert(this.name);};
  15.  
  16.         // 子类
  17.         function Boy(name , age , sex){
  18.             Person.call(this,name,age);//继承函数的this属性、方法
  19.             this.sex = sex ;
  20.         }
  21.         Boy.prototype = new Person(); //继承父类的原型对象，其实这里既可以使用父类用this声明的属性、方法。也可以使用原型对象里面的属性、方法。
  22.  
  23.         var b = new Boy('李四' , 20 , '男');
  24.         alert(b.name);
  25.         alert(b.sex);
  26.         b.sayName();
  27.         </script>
  28.     </head>
  29.     <body>
  30.     </body>
  31. </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. Python学习笔记(4)--数据结构之元组tuple

    元组(tuple) 定义:tuple和list十分相似,但是tuple是不可变的,即不能修改tuple 初始化:(), ('a', ) , ('a', 'b')   //当只有一个元素时,需加上逗号, ...

  2. Oracle基础入门(三)

    一:PLsql一些基本操作 调节plsql的字体大小 二:创建表,如果学过sql server的数据库就会发现其实Oracle跟的一些新建表和新增修改其实是差不多的 新建表 Create table ...

  3. Spring拦截器 /* 和 /** 的区别

    SpringMVC 拦截器拦截 /* 和 /** 的区别: /* : 匹配一级,即 /add , /query 等 /** : 匹配多级,即 /add , /add/user, /add/user/u ...

  4. .net framework tools

    https://docs.microsoft.com/en-us/dotnet/framework/tools/ Resgen.exe (Resource File Generator) Conver ...

  5. json.js

    由于json官网被强,现保存源码一份以备不时之需,直接保存成js文件即可. /* json.js 2007-08-05 Public Domain This file adds these metho ...

  6. 打印机共享 ： 客户端 连接服务器打印机时提示"无法连接到打印机“

    1.就是重启一下服务器端的Print Spooler服务就行了,这么简单! 2.修改打印机的共享名 操作无法完成(错误0x00000709).再次检查打印机名称,并确保打印机已连接到网络.(xp系统本 ...

  7. $_FILES参数详解及简单<form>表单无刷新上传文件

    $_FILES:经由 HTTP POST 文件上传而提交至脚本的变量,类似于旧数组$HTTP_POST_FILES 数组(依然有效,但反对使用)详细信息可参阅 POST方法上传 $_FILES数组内容 ...

  8. javaScript 立即执行函数学习笔记

    立即执行函数: 即执行函数(Immediate Functions),立即执行函数模式是一种语法,可以让你的函数在定义后立即被执行 立即执行函数(immediate function)术语不是在ECM ...

  9. 51nod 正整数分组

    将一堆正整数分为2组,要求2组的和相差最小. 显然我们可以把所有可能组合成的数求出来. 然后从总和的中间开始往大找,找到了就是其中一个的分组,就可以求出答案了. #include<cstdio& ...

  10. cogs 32. [POI1999] 位图

    32. [POI1999] 位图 ★   输入文件:bit.in   输出文件:bit.out   简单对比时间限制:1 s   内存限制:128 MB [问题描述 ] 给定一个 n*m 的矩形位图, ...