浅析2种JavaScript继承方式


Posted in Javascript onDecember 04, 2015

js继承方法最主要的是2种,一种是通过原型的方式,一种是通过借用call&apply的构造函数方式。
1.原型(prototype):

function Body(name,age){// 创建一个Body类
  this.name = name;// 赋予基础属性name、age
  this.age = age;
}
Body.prototype.sayName =function() {// 给原型定义一个sayName的方法
  console.log(this.name);
}
var a = new Body('wutao','10');//创建一个Body的实例对象

function Another(){}
Another.prototype = new Body('www');//将Body实例对象给新创建的子类(Another)的prototype属性,这样,Another就拥有了Body的属性和方法
var b = new Another();//创建Another子类的实例
Another.prototype.sex ="mail";//定义子类的属性及方法
Another.prototype.saySex = function(){
  console.log(this.sex);
}
a.sayName();//wutao
b.sayName();//www 实例b拥有父类Body的方法sayName
b.saySex();//mail 实例b拥有自己定义的方法saySex

2.借用构造函数(call&apply),也可以理解为组合式继承
call:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.call(this,name,age);//call用法:将this指针指向父类构造函数,并依次传入参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("wwwwww",22);
a.sayHello();//wutao
b.sayHello();//wwwwww; 通过call继承来的父类Person的方法sayHello
b.sayFunc();//wwwwww-22

apply:

function Person(name){
  this.name = name;
  this.sayHello = function(){
    console.log(this.name);
  }
}

function Son(name,age){
  Person.apply(this,[name,age]);//apply用法:类似call,将this指针指向父类构造函数,并传入一个由参数组成的数组参数,使其拥有父类的属性和方法
  this.age = age;
  this.sayFunc = function(){
    console.log(this.name+"-"+this.age);
  } 
}
var a = new Person('wutao');
var b = new Son("ttt",222);
a.sayHello();//wutao
b.sayHello();//ttt;通过apply继承来的父类Person的方法sayHello
b.sayFunc();//ttt-222

 js最主要的继承方法就这2种,当然,还有几种继承方法,但是有些继承方式在创建了实例之后,修改实例方法和属性会直接修改原型的方法和属性,那这样的继承就显得意义不大了,除非是业务有类似的需求才会去用到。

以上就是关于JavaScript继承方式的详细介绍,希望对大家的学习有所帮助。

Javascript 相关文章推荐
eval的两组性能测试数据
Aug 17 Javascript
js获取当前日期代码适用于网页头部
Jun 27 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
浅析$.getJSON异步请求和同步请求
Jun 06 Javascript
js canvas实现擦除动画
Jul 16 Javascript
jQuery中get方法用法分析
Dec 07 Javascript
微信公众号菜单配置微信小程序实例详解
Mar 31 Javascript
easyui combogrid实现本地模糊搜索过滤多列
May 13 Javascript
详解Angular4中路由Router类的跳转navigate
Jun 09 Javascript
jquery.validate.js 多个相同name的处理方式
Jul 10 jQuery
使用vue + less 实现简单换肤功能的示例
Feb 21 Javascript
使用JS代码实现俄罗斯方块游戏
Aug 03 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 #Javascript
浅析jQuery Mobile的初始化事件
Dec 03 #Javascript
jQuery+jsp实现省市县三级联动效果(附源码)
Dec 03 #Javascript
jQuery移动web开发中的页面初始化与加载事件
Dec 03 #Javascript
JQuery移动页面开发之屏幕方向改变与滚屏的实现
Dec 03 #Javascript
jQuery+jsp下拉框联动获取本地数据的方法(附源码)
Dec 03 #Javascript
jQuery移动页面开发中的触摸事件与虚拟鼠标事件简介
Dec 03 #Javascript
You might like
用PHP制作的意见反馈表源码
2007/03/11 PHP
php入门学习知识点七 PHP函数的基本应用
2011/07/14 PHP
PHP服务器页面间跳转实现方法
2012/08/02 PHP
php函数连续调用实例分析
2015/07/30 PHP
php实现网页上一页下一页翻页过程详解
2019/06/28 PHP
JavaScript 字符串连接性能优化
2008/12/20 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
Jquery加载时从后台读取数据绑定到dropdownList实例
2013/06/09 Javascript
js实现表单检测及表单提示的方法
2015/08/14 Javascript
前端弹出对话框 js实现ajax交互
2016/09/09 Javascript
通过网页查看JS源码中汉字显示乱码的解决方法
2016/10/26 Javascript
遍历json 对象的属性并且动态添加属性的实现
2016/12/02 Javascript
bootstrap table 数据表格行内修改的实现代码
2017/02/13 Javascript
分享一个精简的vue.js 图片lazyload插件实例
2017/03/13 Javascript
jquery中封装函数传递当前元素的方法示例
2017/05/05 jQuery
layui数据表格实现重载数据表格功能(搜索功能)
2019/07/27 Javascript
Vue.extend 编程式插入组件的实现
2019/11/18 Javascript
jQuery实现计算器功能
2020/10/19 jQuery
[02:33]DOTA2英雄基础教程 司夜刺客
2013/12/04 DOTA
[45:16]完美世界DOTA2联赛PWL S3 Magma vs Phoenix 第一场 12.12
2020/12/16 DOTA
浅谈Python由__dict__和dir()引发的一些思考
2017/10/30 Python
Python实现的多线程同步与互斥锁功能示例
2017/11/30 Python
Python3.6简单反射操作示例
2018/06/14 Python
Python实用技巧之列表、字典、集合中根据条件筛选数据详解
2018/07/11 Python
python爬虫之线程池和进程池功能与用法详解
2018/08/02 Python
Python应用领域和就业形势分析总结
2019/05/14 Python
对PyQt5中的菜单栏和工具栏实例详解
2019/06/20 Python
django+tornado实现实时查看远程日志的方法
2019/08/12 Python
python如何将多个PDF进行合并
2019/08/13 Python
服务器端jupyter notebook映射到本地浏览器的操作
2020/04/14 Python
pandas to_excel 添加颜色操作
2020/07/14 Python
通过实例了解python__slots__使用方法
2020/09/14 Python
过程装备与控制工程专业个人的求职信
2013/12/01 职场文书
安全生产管理合理化建议书
2014/03/12 职场文书
刑事撤诉申请书
2015/05/18 职场文书
辛亥革命观后感
2015/06/02 职场文书