浅析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 相关文章推荐
通过复制Table生成word和excel的javascript代码
Jan 20 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
基于javascript实现动态显示当前系统时间
Jan 28 Javascript
jQuery事件的绑定、触发、及监听方法简单说明
May 10 Javascript
web 前端常用组件之Layer弹出层组件
Sep 22 Javascript
vue.js+Echarts开发图表放大缩小功能实例
Jun 09 Javascript
JS仿QQ好友列表展开、收缩功能(第一篇)
Jul 07 Javascript
少女风vue组件库的制作全过程
May 15 Javascript
vue使用高德地图根据坐标定位点的实现代码
Aug 22 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
Dec 19 Javascript
微信小程序wxs实现吸顶效果
Jan 08 Javascript
原理深度解析Vue的响应式更新比React快
Apr 04 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/16 PHP
PHP中常用的字符串格式化函数总结
2014/11/19 PHP
smarty内部日期函数html_select_date()用法实例分析
2015/07/08 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
『jQuery』.html(),.text()和.val()的概述及使用
2013/04/22 Javascript
JS实现匀速运动的代码实例
2013/11/29 Javascript
JS控制网页动态生成任意行列数表格的方法
2015/03/09 Javascript
将html页面保存成图片,图片写入pdf的实现方法(推荐)
2016/09/17 Javascript
Jquery Easyui日历组件Calender使用详解(23)
2016/12/18 Javascript
jQuery拖拽通过八个点改变div大小
2020/11/29 Javascript
如何重置vue打印变量的显示方式
2017/12/06 Javascript
javacript replace 正则取字符串中的值并替换【推荐】
2018/09/13 Javascript
基于javascript的无缝滚动动画1
2020/08/07 Javascript
python fabric实现远程操作和部署示例
2014/03/25 Python
浅析Python中的多进程与多线程的使用
2015/04/07 Python
浅析AST抽象语法树及Python代码实现
2016/06/06 Python
搭建Python的Django框架环境并建立和运行第一个App的教程
2016/07/02 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
PyQt4实时显示文本内容GUI的示例
2019/06/14 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
CSS3实现王者荣耀匹配人员加载页面的方法
2019/04/16 HTML / CSS
慕尼黑山地运动、户外服装和体育用品专家:Sporthaus Schuster
2019/08/27 全球购物
几个数据库方面的面试题
2016/07/01 面试题
普通大学毕业生自荐信
2013/11/04 职场文书
职工运动会邀请函
2014/01/19 职场文书
事假请假条范文
2014/04/11 职场文书
高中班主任评语大全
2014/04/25 职场文书
班级出游活动计划书
2014/08/15 职场文书
ktv好的活动方案
2014/08/15 职场文书
九一八事变演讲稿
2014/09/05 职场文书
离婚协议书的书写要求
2014/09/17 职场文书
2014年客房服务员工作总结
2014/11/18 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
《蟋蟀的住宅》教学反思
2016/02/17 职场文书
分享几个实用的CSS代码块
2022/06/10 HTML / CSS
TypeScript实用技巧 Nominal Typing名义类型详解
2022/09/23 Javascript