JavaScript学习13 JavaScript中的继承
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中的继承相关推荐
- JavaScript学习笔记之对象及继承
JavaScript学习笔记之对象及继承 对象属性 ES5中有两种属性,数据属性和访问器属性. 数据属性包括[[writable]](能否修改属性的值).[[value]]等等: 访问器属性包括[[C ...
- JavaScript学习笔记——JS中的变量复制、参数传递和作用域链
今天在看书的过程中,又发现了自己目前对Javascript存在的一个知识模糊点:JS的作用域链,所以就通过查资料看书对作用域链相关的内容进行了学习.今天学习笔记主要有这样几个关键字:变量.参数传递.执 ...
- 【JavaScript学习】JavaScript对象创建
1.最简单的方法,创建一个对象,然后添加属性 1 var person = new Object(); 2 person.age = 23; 3 person.name = "David&q ...
- 【JavaScript学习】JavaScript 常用工具类封装
文章目录 1.JavaScript 常用工具类封装 (1)获得浏览器地址所有参数 (2)将json转为get参数 (3)格式校验工具类 (4)数组操作工具类 (5)表单取值工具类 (6)时间转换工具类 ...
- [JavaScript学习-01]JavaScript实现九宫格抽奖
效果: <!DOCTYPE html> <html> <head> <meta name="viewport" content=" ...
- JavaScript 学习-8.JavaScript 箭头函数的使用
前言 ES6 中引入了箭头函数() =>.箭头函数不需要使用function关键字,允许我们编写更短的函数. 箭头函数 之前使用function 定义函数 fun1 = function() { ...
- JAVASCRIPT学习笔记----Javascript引用类型
引用类型的值(对象)是引用类型的一个实例,引用类型是一种数据结构. (一)Object类型 1.创建方式 1 //第一种:new Object() 2 var person = new Object( ...
- react学习(13)-moment中 isRangePicker 控制类型
<Col span={8} key={index}><Form.Item label={item.label} {...formItemLayout}>{getFieldDec ...
- JavaScript学习 第一周
JavaScript学习路径 Javascript基础 JS特点 使用 JS编写位置 JS基本语法 字面量和变量 标识符 数据类型 String字符串 Number 布尔值 Null和Undefine ...
最新文章
- NLP突破性成果 BERT 模型详细解读 bert参数微调
- 安装配置sendmail服务器
- 威马新车型,率先放话搭载L4自动驾驶
- 如何在php中插入map热点,PHP中使用BigMap实例
- Spring 学习笔记 3. 尚硅谷_佟刚_Spring_配置 Bean
- 采用 AI 技术的医疗创业公司大量涌现
- Vue项目端口号占用
- Elasticsearch概述、ES概念、什么是搜索、全文检索、Elasticsearch功能,什么是distributed document store(来自网络+学习资料)
- C#父类与子类(多态性)
- InfoQ —— 腾讯游戏大数据服务场景与应用
- java中能对属性封装吗_JAVA中的封装
- 优雅的使用springboot集成任务调度
- 嵌入式实时操作系统ucos-ii_「正点原子NANO STM32开发板资料连载」第三十八章 UCOSII 实验 3...
- docker登录mysql数据库_从docker容器连接到远程MySQL数据库
- 机器学习基础算法22-提升理论-GBDT、XGBoost、Adaboost、方差与偏方
- java基础学习的心得体会
- 设计模式之禅(第2版)PDF资源分享
- niosii spi 外部_【笔记】NIOS II spi详解
- 窗宽窗位与其处理方法
- 从链家网上爬取租房数据并进行数据分析