浅析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 相关文章推荐
js onkeypress与onkeydown 事件区别详细说明
Dec 13 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
JS冒泡事件的快速解决方法
Dec 16 Javascript
jQuery实现的简单拖拽功能示例
Sep 13 Javascript
JS数组操作中的经典算法实例讲解
Jul 26 Javascript
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
微信小程序methods中定义的方法互相调用的实例代码
Aug 07 Javascript
JS/HTML5游戏常用算法之路径搜索算法 随机迷宫算法详解【普里姆算法】
Dec 13 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
使用Mock.js生成前端测试数据
Dec 13 Javascript
最新最全的手机号验证正则表达式
Feb 24 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
《雄兵连》系列首部大电影《烈阳天道》:可能是因为期望值太高了
2020/08/18 国漫
PHP冒泡算法详解(递归实现)
2014/11/10 PHP
PHP传值到不同页面的三种常见方式及php和html之间传值问题
2015/11/19 PHP
php 计算两个时间相差的天数、小时数、分钟数、秒数详解及实例代码
2016/11/09 PHP
javascript 利用Image对象实现的埋点(某处的点击数)统计
2012/12/28 Javascript
用jQuery与JSONP轻松解决跨域访问的问题
2014/02/04 Javascript
浅析javascript操作 cookie对象
2014/12/26 Javascript
JavaScript制作简易的微信打飞机
2015/03/31 Javascript
javascript日期处理函数,性能优化批处理
2015/09/06 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
浅析Javascript中bind()方法的使用与实现
2016/05/30 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
AngularJS Bootstrap详细介绍及实例代码
2016/07/28 Javascript
移动端使用localResizeIMG4压缩图片
2017/04/22 Javascript
js原生日历的实例(推荐)
2017/10/31 Javascript
详解javascript设计模式三:代理模式
2019/03/25 Javascript
js+html实现周岁年龄计算器
2019/06/25 Javascript
electron+vue实现div contenteditable截图功能
2020/01/07 Javascript
编程语言Python的发展史
2014/09/26 Python
Python中的anydbm模版和shelve模版使用指南
2015/07/09 Python
Python迭代器和生成器定义与用法示例
2018/02/10 Python
使用pytorch进行图像的顺序读取方法
2018/07/27 Python
pyqt5之将textBrowser的内容写入txt文档的方法
2019/06/21 Python
python之当你发现QTimer不能用时的解决方法
2019/06/21 Python
Python利用PyPDF2库获取PDF文件总页码实例
2020/04/03 Python
Jupyter notebook 远程配置及SSL加密教程
2020/04/14 Python
航海技术专业毕业生求职信
2014/04/06 职场文书
离职证明格式样本
2015/06/12 职场文书
我的兄弟姐妹观后感
2015/06/15 职场文书
请病假条范文
2015/08/17 职场文书
导游词之日月潭
2019/11/05 职场文书
解决golang结构体tag编译错误的问题
2021/05/02 Golang
Python实现天气查询软件
2021/06/07 Python
mysql事务隔离级别详情
2021/10/24 MySQL
css3带你实现3D转换效果
2022/02/24 HTML / CSS
 python中的元类metaclass详情
2022/05/30 Python