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 单击式的下拉菜单效果实例
Aug 13 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
jQuery 中的 DOM 操作
Apr 26 Javascript
js实现纯前端的图片预览
Apr 27 Javascript
ECHO.js 纯javascript轻量级延迟加载的实例代码
May 24 Javascript
vue多级多选菜单组件开发
Sep 08 Javascript
详解webpack4多入口、多页面项目构建案例
May 25 Javascript
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
微信小程序获取位置展示地图并标注信息的实例代码
Sep 01 Javascript
vue.js实现简单购物车功能
May 30 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
Jquery如何使用animation动画效果改变背景色的代码
Jul 20 jQuery
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
使用zend studio for eclipse不能激活代码提示功能的解决办法
2009/10/11 PHP
php数组函数序列之sort() 对数组的元素值进行升序排序
2011/11/02 PHP
用来解析.htgroup文件的PHP类
2012/09/05 PHP
php 模拟post_验证页面的返回状态(实例讲解)
2013/10/28 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
php根据数据id自动生成编号的实现方法
2016/10/16 PHP
centos 7.2下搭建LNMP环境教程
2016/11/20 PHP
php+Memcached实现简单留言板功能示例
2017/02/15 PHP
PHP判断是否是微信打开,浏览器打开的方法
2018/03/14 PHP
PHP字符串中抽取子串操作实例分析
2019/06/22 PHP
js电信网通双线自动选择技巧
2008/11/18 Javascript
更优雅的事件触发兼容
2011/10/24 Javascript
json对象转字符串如何实现
2012/12/02 Javascript
页面js遇到乱码问题的解决方法是和无法转码的情况
2014/04/30 Javascript
浅谈重写window对象的方法
2014/12/29 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
JavaScript禁止用户多次提交的两种方法
2016/07/24 Javascript
js仿微信公众平台打标签功能
2017/04/08 Javascript
iview给radio按钮组件加点击事件的实例
2017/09/30 Javascript
vue服务端渲染添加缓存的方法
2018/09/18 Javascript
生产制造追溯系统之再说条码打印
2019/06/03 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[15:57]教你分分钟做大人:斧王
2014/10/30 DOTA
浅谈python配置与使用OpenCV踩的一些坑
2018/04/02 Python
python 用for循环实现1~n求和的实例
2019/02/01 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
详解python 中in 的 用法
2019/12/12 Python
python实现查找所有程序的安装信息
2020/02/18 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
Python实现淘宝秒杀功能的示例代码
2021/01/19 Python
德国BA保镖药房中文网:Bodyguard Apotheke
2021/03/09 全球购物
环保倡议书300字
2014/05/15 职场文书
结婚仪式主持词
2015/06/29 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
python单向链表实例详解
2022/05/25 Python