js实现继承的5种方式


Posted in Javascript onDecember 01, 2015

本文实例讲述了js实现继承的5种方式。分享给大家供大家参考,具体如下:

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

function Parent(username){
  this.username = username;
  this.hello = function(){
   alert(this.username);
  }
}
function Child(username,password){
  //通过以下3行实现将Parent的属性和方法追加到Child中,从而实现继承
  //第一步:this.method是作为一个临时的属性,并且指向Parent所指向的对象,
  //第二步:执行this.method方法,即执行Parent所指向的对象函数
  //第三步:销毁this.method属性,即此时Child就已经拥有了Parent的所有属性和方法 
  this.method = Parent;
  this.method(username);//最关键的一行
  delete this.method;
  this.password = password;
  this.world = function(){
   alert(this.password);
  }
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();

2、继承第二种方式:call()方法方式

call方法是Function类中的方法
call方法的第一个参数的值赋值给类(即方法)中出现的this
call方法的第二个参数开始依次赋值给类(即方法)所接受的参数

function test(str){
  alert(this.name + " " + str);
}
var object = new Object();
object.name = "zhangsan";
test.call(object,"langsin");//此时,第一个参数值object传递给了test类(即方法)中出现的this,而第二个参数"langsin"则赋值给了test类(即方法)的str
function Parent(username){
  this.username = username;
  this.hello = function(){
   alert(this.username);
  }
}
function Child(username,password){
  Parent.call(this,username);
  this.password = password;
  this.world = function(){
   alert(this.password);
  }
}
var parent = new Parent("zhangsan");
var child = new Child("lisi","123456");
parent.hello();
child.hello();
child.world();

3、继承的第三种方式:apply()方法方式

apply方法接受2个参数,
A、第一个参数与call方法的第一个参数一样,即赋值给类(即方法)中出现的this
B、第二个参数为数组类型,这个数组中的每个元素依次赋值给类(即方法)所接受的参数

function Parent(username){ 
  this.username = username; 
  this.hello = function(){ 
   alert(this.username); 
  } 
} 
function Child(username,password){ 
  Parent.apply(this,new Array(username)); 
  this.password = password; 
  this.world = function(){ 
   alert(this.password); 
  } 
} 
var parent = new Parent("zhangsan"); 
var child = new Child("lisi","123456"); 
parent.hello(); 
child.hello(); 
child.world();

4、继承的第四种方式:原型链方式,即子类通过prototype将所有在父类中通过prototype追加的属性和方法都追加到Child,从而实现了继承

function Person(){ 
} 
Person.prototype.hello = "hello"; 
Person.prototype.sayHello = function(){ 
  alert(this.hello); 
} 
function Child(){ 
} 
Child.prototype = new Person();//这行的作用是:将Parent中将所有通过prototype追加的属性和方法都追加到Child,从而实现了继承 
Child.prototype.world = "world"; 
Child.prototype.sayWorld = function(){ 
  alert(this.world); 
} 
var c = new Child(); 
c.sayHello(); 
c.sayWorld();

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

混合了call方式、原型链方式

function Parent(hello){ 
  this.hello = hello; 
} 
Parent.prototype.sayHello = function(){ 
  alert(this.hello); 
} 
function Child(hello,world){ 
  Parent.call(this,hello);//将父类的属性继承过来 
  this.world = world;//新增一些属性 
} 
Child.prototype = new Parent();//将父类的方法继承过来 
Child.prototype.sayWorld = function(){//新增一些方法 
  alert(this.world); 
} 
var c = new Child("zhangsan","lisi"); 
c.sayHello(); 
c.sayWorld();

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
JS自动缩小超出大小的图片
Oct 12 Javascript
js实现特定位取反原理及示例
Jun 30 Javascript
jquery实现平滑的二级下拉菜单效果
Aug 26 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
JavaScript无缝滚动效果的实例代码
Mar 27 Javascript
Vue中的ref作用详解(实现DOM的联动操作)
Aug 21 Javascript
js 两个日期比较相差多少天的实例
Oct 19 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
使用Vue组件实现一个简单弹窗效果
Apr 23 Javascript
JavaScript之Blob对象类型的具体使用方法
Nov 29 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 Javascript
15个简单的JS编码标准让你的代码更整洁(小结)
Jul 16 Javascript
6种javascript显示当前系统时间代码
Dec 01 #Javascript
基于jQuery实现网页打印功能
Dec 01 #Javascript
jQuery-1.9.1源码分析系列(十一)DOM操作续之克隆节点
Dec 01 #Javascript
快速学习jQuery插件 Cookie插件使用方法
Dec 01 #Javascript
快速学习jQuery插件 jquery.validate.js表单验证插件使用方法
Dec 01 #Javascript
JavaScript使用DeviceOne开发实战(二) 生成调试安装包
Dec 01 #Javascript
JavaScript使用DeviceOne开发实战(一) 配置和起步
Dec 01 #Javascript
You might like
PHP 引用文件技巧
2010/03/02 PHP
详解PHP 7.4 中数组延展操作符语法知识点
2019/07/19 PHP
代码生成器 document.write()
2007/04/15 Javascript
jQuery AnythingSlider滑动效果插件
2010/02/07 Javascript
jQuery学习笔记之DOM对象和jQuery对象
2010/12/22 Javascript
用jquery模仿的a的title属性(兼容ie6/7)
2013/01/21 Javascript
JS 实现导航栏悬停效果(续)
2013/09/24 Javascript
JavaScript获取多个数组的交集简单实例
2013/11/11 Javascript
JS+CSS实现淡入式焦点图片幻灯切换效果的方法
2015/02/26 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
JavaScript实现跑马灯抽奖活动实例代码解析与优化(一)
2016/02/16 Javascript
Bootstrap中的Panel和Table全面解析
2016/06/13 Javascript
检查表单元素的值是否为空的实例代码
2016/06/16 Javascript
JS控制文本域只读或可写属性的方法
2016/06/24 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
详解Vue快速零配置的打包工具——parcel
2018/01/16 Javascript
echarts整合多个类似option的方法实例
2018/07/10 Javascript
前端防止用户重复提交js实现代码示例
2018/09/07 Javascript
react 国际化的实现代码示例
2018/09/14 Javascript
element实现合并单元格通用方法
2019/11/13 Javascript
js实现微信聊天效果
2020/08/09 Javascript
[02:22]《新闻直播间》2017年08月14日
2017/08/15 DOTA
详解Python正则表达式re模块
2019/03/19 Python
详解Python循环作用域与闭包
2019/03/21 Python
利用python实现.dcm格式图像转为.jpg格式
2020/01/13 Python
Python计算公交发车时间的完整代码
2020/02/12 Python
python设置表格边框的具体方法
2020/07/17 Python
HTML5之消息通知的使用(Web Notification)
2018/10/30 HTML / CSS
HTML5 body设置自适应全屏
2020/05/07 HTML / CSS
Yves Rocher捷克官方网站:植物化妆品的创造者
2019/07/31 全球购物
英国电子产品购物网站:Tech in the basket
2019/11/08 全球购物
法务专员岗位职责
2014/01/02 职场文书
大学学生会竞选演讲稿
2014/04/25 职场文书
农村党员一句话承诺
2014/05/30 职场文书
询价采购方案
2014/06/09 职场文书
文案策划专业自荐信
2014/07/07 职场文书