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 相关文章推荐
iframe 上下滚动条如何默认在下方实现原理
Dec 10 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
zepto中使用swipe.js制作轮播图附swipeUp,swipeDown不起效果问题
Aug 27 Javascript
jQuery插件fullPage.js实现全屏滚动效果
Dec 02 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
浅谈js中function的参数默认值
Feb 20 Javascript
js时间戳与日期格式之间转换详解
Dec 11 Javascript
微信小程序实现左右联动的实战记录
Jul 05 Javascript
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
jquery+php后台实现省市区联动功能示例
May 23 jQuery
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
JS自定义滚动条效果
Mar 13 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
PHP读取网页文件内容的实现代码(fopen,curl等)
2011/06/23 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
php一个解析字符串排列数组的方法
2015/05/12 PHP
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
理解javascript中的原型和原型链
2015/07/30 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
2015/09/09 Javascript
JS实现获取来自百度,Google,soso,sogou关键词的方法
2016/12/21 Javascript
JS实现间歇滚动的运动效果实例
2016/12/22 Javascript
详解nodejs 文本操作模块-fs模块(四)
2016/12/22 NodeJs
基于jQuery实现瀑布流页面
2017/04/11 jQuery
利用Mongoose让JSON数据直接插入或更新到MongoDB
2017/05/03 Javascript
javascript input输入框模糊提示功能的实现
2017/09/25 Javascript
详解webpack多页面配置记录
2018/01/22 Javascript
node.js的http.createServer过程深入解析
2019/06/06 Javascript
Vue.js递归组件实现组织架构树和选人功能
2019/07/04 Javascript
vscode中eslint插件的配置(prettier配置无效)
2019/09/10 Javascript
在Koa.js中实现文件上传的接口功能
2019/10/08 Javascript
mpvue微信小程序开发之实现一个弹幕评论
2019/11/24 Javascript
详解vue-router 动态路由下子页面多页共活的解决方案
2019/12/22 Javascript
Vue项目结合Vue-layer实现弹框式编辑功能(实例代码)
2020/03/11 Javascript
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
对Python3.6 IDLE常用快捷键介绍
2018/07/16 Python
Python turtle绘画象棋棋盘
2019/08/21 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
python+selenium+Chrome options参数的使用
2020/03/18 Python
详解CSS3开启硬件加速的使用和坑
2017/08/21 HTML / CSS
门诊挂号室室长岗位职责
2013/11/27 职场文书
甜美蛋糕店创业计划书
2014/01/30 职场文书
开学季活动策划方案
2014/02/28 职场文书
移交协议书
2014/08/19 职场文书
婚礼证婚人演讲稿
2014/09/13 职场文书
辞职信的写法
2015/02/27 职场文书
博士导师推荐信
2015/03/25 职场文书
MongoDB安装使用并实现Python操作数据库
2021/06/28 MongoDB