JavaScript学习13 JavaScript中的继承

继承第一种方式:对象冒充

<script type="text/javascript">//继承第一种方式:对象冒充function Parent(username) //父类对象
{this.username = username; //下面的代码最关键的部分就是将子对象的this传递给了父对象this.sayHello = function(){alert(this.username);}
}function Child(username, password) //子类对象
{//下面三行代码是最关键的代码this.method = Parent; //定义method属性,指向Parent,即指向了上面的构造函数this.method(username);//把username传递过去,调用构造函数,此时Parent函数体中的this即当前的Child对象delete this.method; //删掉method属性,因为Child已经具备了Parent的属性和方法//下面可以增加一些子类特有的属性和方法this.password = password;this.sayWorld = function(){alert(this.password);}
}//生成这两个类的对象
var parent = new Parent("zhangsan");
var child = new Child("lisi", "1234");parent.sayHello();child.sayHello();
child.sayWorld();</script>

  

  使用这种方式实现继承的时候,JS可以实现多重的继承,但是有时候会造成一些干扰,比如同名方法的覆盖,所以不太推荐使用多继承。

继承第二种方式:call方法方式

  call方法是定义在Function对象中的方法,因此我们定义的每个函数都有该方法。

  可以通过函数名来调用call方法,call方法的第一个参数会被传递给函数中的this,从第二个参数开始,逐一赋值给函数中的参数

  call方法

<script type="text/javascript">//call方法方式,Function对象中的方法function test(str, str2)
{alert(this.name + ", " + str + ", " + str2);
}var object = new Object();
object.name = "zhangsan";//test.call相当于调用了test函数
test.call(object, "shengsiyuan", "hello"); //将object赋给了this
//第一个参数赋给this,后面的参数逐次赋给方法参数</script>

  call方法实现继承

<script type="text/javascript">//使用call方式实现对象的继承function Parent(username)
{this.username = username;this.sayHello = function(){alert(this.username);}
}function Child(username, password)
{Parent.call(this, username);//这样语句很关键,等价于对象冒充中的三行语句//执行之后子类就具有了基类的属性和方法//子对象的新增属性和方法this.password = password;this.sayWorld = function(){alert(this.password);}
}var parent = new Parent("zhangsan");var child = new Child("lisi", "123");parent.sayHello();child.sayHello();
child.sayWorld();</script>

继承第三种方式:apply方法方式

  apply和call一样,都是定义在Function对象里面的。

<script type="text/javascript">//使用apply方法实现对象继承function Parent(username)
{this.username = username;this.sayHello = function(){alert(this.username);}
}function Child(username, password)
{Parent.apply(this, new Array(username));//apply方法方式实现继承,后面的参数以数组的形式传入this.password = password;this.sayWorld = function(){alert(this.password);}
}var parent = new Parent("zhangsan");
var child = new Child("lisi", "123");parent.sayHello();child.sayHello();
child.sayWorld();</script>

继承第四种方式:原型链方式

<script type="text/javascript">//使用原型链(prototype chain)方式实现对象继承function Parent()
{}Parent.prototype.hello = "hello";
Parent.prototype.sayHello = function()
{alert(this.hello);
}function Child()
{}Child.prototype = new Parent();//子类具有父类的属性和方法
//扩展属性
Child.prototype.world = "world";
Child.prototype.sayWorld = function()
{alert(this.world);
}var child = new Child();child.sayHello();
child.sayWorld();</script>

  原型链的方式,缺点是无法给构造函数传递参数。

继承的第五种方式:混合方式

  这种方式是对原型链方式的一种改进,使得可以向构造函数传递参数。

  这种方式是比较推荐的一种方式。

<script type="text/javascript">//使用混合方式实现对象继承(推荐)
//父对象
function Parent(hello)
{this.hello = hello;
}Parent.prototype.sayHello = function()
{alert(this.hello);
}
//子对象
function Child(hello, world)
{Parent.call(this, hello);//通过call实现属性的继承this.world = world;//新增加的属性
}Child.prototype = new Parent();//通过原型链实现方法的继承

Child.prototype.sayWorld = function()
{alert(this.world);
}var child = new Child("hello", "world");child.sayHello();
child.sayWorld();</script>

实例

<script type="text/javascript">function Shape(edge)
{this.edge = edge;//属性,多少条边,通过构造函数的方式定义
}Shape.prototype.getArea = function()//通过原型的方式来定义方法
{return -1;//基类返回一个没有意义的值
}Shape.prototype.getEdge = function()
{return this.edge;
}//定义子对象Triangle
function Triangle(bottom, height)
{Shape.call(this, 3);//Triangle的属性this.bottom = bottom;this.height = height;
}Triangle.prototype = new Shape();//继承Shaple中的所有方法

Triangle.prototype.getArea = function()//重写方法
{return 0.5 * this.bottom * this.height;
}var triangle = new Triangle(10, 4);//alert(triangle.getEdge());
//alert(triangle.getArea());//另一个子类:四边形
function Rectangle(bottom, height)
{Shape.call(this, 4);this.bottom = bottom;this.height = height;
}Rectangle.prototype = new Shape();//通过原型继承父类的所有方法

Rectangle.prototype.getArea = function()//覆写方法
{return this.bottom * this.height;
}var rectangle = new Rectangle(20, 40);alert(rectangle.getEdge());
alert(rectangle.getArea());</script>

参考资料

  圣思园张龙老师Java Web系列视频教程。

转载于:https://www.cnblogs.com/mengdd/p/3767858.html

JavaScript学习13 JavaScript中的继承相关推荐

  1. JavaScript学习笔记之对象及继承

    JavaScript学习笔记之对象及继承 对象属性 ES5中有两种属性,数据属性和访问器属性. 数据属性包括[[writable]](能否修改属性的值).[[value]]等等: 访问器属性包括[[C ...

  2. JavaScript学习笔记——JS中的变量复制、参数传递和作用域链

    今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...

  3. 【JavaScript学习】JavaScript对象创建

    1.最简单的方法,创建一个对象,然后添加属性 1 var person = new Object(); 2 person.age = 23; 3 person.name = "David&q ...

  4. 【JavaScript学习】JavaScript 常用工具类封装

    文章目录 1.JavaScript 常用工具类封装 (1)获得浏览器地址所有参数 (2)将json转为get参数 (3)格式校验工具类 (4)数组操作工具类 (5)表单取值工具类 (6)时间转换工具类 ...

  5. [JavaScript学习-01]JavaScript实现九宫格抽奖

    效果: <!DOCTYPE html> <html> <head> <meta name="viewport" content=" ...

  6. JavaScript 学习-8.JavaScript 箭头函数的使用

    前言 ES6 中引入了箭头函数() =>.箭头函数不需要使用function关键字,允许我们编写更短的函数. 箭头函数 之前使用function 定义函数 fun1 = function() { ...

  7. JAVASCRIPT学习笔记----Javascript引用类型

    引用类型的值(对象)是引用类型的一个实例,引用类型是一种数据结构. (一)Object类型 1.创建方式 1 //第一种:new Object() 2 var person = new Object( ...

  8. react学习(13)-moment中 isRangePicker 控制类型

    <Col span={8} key={index}><Form.Item label={item.label} {...formItemLayout}>{getFieldDec ...

  9. JavaScript学习 第一周

    JavaScript学习路径 Javascript基础 JS特点 使用 JS编写位置 JS基本语法 字面量和变量 标识符 数据类型 String字符串 Number 布尔值 Null和Undefine ...

最新文章

  1. NLP突破性成果 BERT 模型详细解读 bert参数微调
  2. 安装配置sendmail服务器
  3. 威马新车型,率先放话搭载L4自动驾驶
  4. 如何在php中插入map热点,PHP中使用BigMap实例
  5. Spring 学习笔记 3. 尚硅谷_佟刚_Spring_配置 Bean
  6. 采用 AI 技术的医疗创业公司大量涌现
  7. Vue项目端口号占用
  8. Elasticsearch概述、ES概念、什么是搜索、全文检索、Elasticsearch功能,什么是distributed document store(来自网络+学习资料)
  9. C#父类与子类(多态性)
  10. InfoQ —— 腾讯游戏大数据服务场景与应用
  11. java中能对属性封装吗_JAVA中的封装
  12. 优雅的使用springboot集成任务调度
  13. 嵌入式实时操作系统ucos-ii_「正点原子NANO STM32开发板资料连载」第三十八章 UCOSII 实验 3...
  14. docker登录mysql数据库_从docker容器连接到远程MySQL数据库
  15. 机器学习基础算法22-提升理论-GBDT、XGBoost、Adaboost、方差与偏方
  16. java基础学习的心得体会
  17. 设计模式之禅(第2版)PDF资源分享
  18. niosii spi 外部_【笔记】NIOS II spi详解
  19. 窗宽窗位与其处理方法
  20. 从链家网上爬取租房数据并进行数据分析

热门文章

  1. SSIS中的容器和数据流—举例说明数据转换任务
  2. Centos 5.5下面架设NTP服务器
  3. video camera in shanghai
  4. tableau prep builder也是不支持m1芯片。。。
  5. 学习笔记之与 30 家公司过招,得到了这章面试心法
  6. 10月份个人技术指标
  7. Kali Linux Aircrack-ng简单破解WEP加密方式网络
  8. OSChina 周一乱弹 —— 深入浅出讲技术
  9. 如何安全的存储用户密码?(中)代码篇
  10. NodeJs连接Mysql数据库