浅析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写法
Sep 15 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
Jquery焦点与失去焦点示例应用
Jun 10 Javascript
javascript格式化指定日期对象的方法
Apr 21 Javascript
使用Node.js为其他程序编写扩展的基本方法
Jun 23 Javascript
js查看一个函数的执行时间实例代码
Sep 12 Javascript
利用原生JS自动生成文章标题树的实例
Aug 22 Javascript
JavaScript 数组的进化与性能分析
Sep 18 Javascript
微信小程序商品详情页底部弹出框
Nov 22 Javascript
用jQuery实现抽奖程序
Apr 12 jQuery
JavaScript异步操作的几种常见处理方法实例总结
May 11 Javascript
微信小程序实现下拉加载更多商品
Dec 29 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
PHP中使用sleep函数实现定时任务实例分享
2014/08/21 PHP
php微信开发之音乐回复功能
2018/06/14 PHP
ExtJs 表单提交登陆实现代码
2010/08/19 Javascript
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
2011/01/17 Javascript
图片放大镜jquery.jqzoom.js使用实例附放大镜图标
2014/06/19 Javascript
jQuery遍历对象、数组、集合实例
2014/11/08 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
jQuery设置聚焦并使光标位置在文字最后的实现方法
2016/08/02 Javascript
JS简单生成两个数字之间随机数的方法
2016/08/03 Javascript
简单的jQuery拖拽排序效果的实现(增强动态)
2017/02/09 Javascript
简单实现js进度条加载效果
2020/03/25 Javascript
mpvue性能优化实战技巧(小结)
2019/04/17 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
从零到一详聊创建Vue工程及遇到的常见问题
2019/04/25 Javascript
javaScript 实现重复输出给定的字符串的常用方法小结
2020/02/20 Javascript
在vue中使用回调函数,this调用无效的解决
2020/08/11 Javascript
[48:32]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 LGD vs VG
2018/04/01 DOTA
python实现的重启关机程序实例
2014/08/21 Python
python实现中文输出的两种方法
2015/05/09 Python
tensorflow实现softma识别MNIST
2018/03/12 Python
Python3 jupyter notebook 服务器搭建过程
2018/11/30 Python
python自制包并用pip免提交到pypi仅安装到本机【推荐】
2019/06/03 Python
python爬虫 批量下载zabbix文档代码实例
2019/08/21 Python
Python字典深浅拷贝与循环方式方法详解
2020/02/09 Python
Python实现井字棋小游戏
2020/03/09 Python
如何减少垃圾回收让内存更加有效使用
2013/10/18 面试题
命名空间(namespace)和程序集(Assembly)有什么区别
2015/09/25 面试题
医学生临床实习自我评价
2014/03/07 职场文书
客户经理竞聘演讲稿
2014/05/15 职场文书
优秀语文教师事迹
2014/05/18 职场文书
新闻编辑专业自荐信
2014/07/02 职场文书
优秀团员事迹材料1500字
2014/08/31 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
Js类的构建与继承案例详解
2021/09/15 Javascript
JS中如何优雅的使用async await详解
2021/10/05 Javascript