浅析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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
tbody元素支持嵌套的注意方法
Mar 24 Javascript
用CSS+JS实现的进度条效果效果
Jun 05 Javascript
JS类的封装及实现代码
Dec 02 Javascript
JavaScript高级程序设计 阅读笔记(二十一) JavaScript中的XML
Sep 14 Javascript
js中字符串编码函数escape()、encodeURI()、encodeURIComponent()区别详解
Apr 01 Javascript
详解原生JavaScript实现jQuery中AJAX处理的方法
May 10 Javascript
AngularJS 支付倒计时功能实现思路
Jun 05 Javascript
详解VueJs中的V-bind指令
May 03 Javascript
Angular ui-roter 和AngularJS 通过 ocLazyLoad 实现动态(懒)加载模块和依赖
Nov 25 Javascript
配置node服务器并且链接微信公众号接口配置步骤详解
Jun 21 Javascript
微信小程序实现拼图小游戏
Oct 22 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更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
php GeoIP的使用教程
2011/03/09 PHP
Codeigniter框架的更新事务(transaction)BUG及解决方法
2014/07/25 PHP
javascript+php实现根据用户时区显示当地时间的方法
2015/03/11 PHP
PHP实现简单ajax Loading加载功能示例
2016/12/28 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
JS学习之一个简易的日历控件
2010/03/24 Javascript
javascript中文本框中输入法切换的问题
2013/12/10 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
2014/11/23 Javascript
nodeJS代码实现计算交社保是否合适
2015/03/09 NodeJs
JavaScript事件代理和委托详解
2016/04/08 Javascript
JavaScript中ES6 Babel正确安装过程
2016/07/18 Javascript
解决前端跨域问题方案汇总
2016/11/20 Javascript
Bootstrap基本组件学习笔记之列表组(11)
2016/12/07 Javascript
javascript中json基础知识详解
2017/01/19 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
基于JQuery的购物车添加删除以及结算功能示例
2017/03/08 Javascript
Vue通过input筛选数据
2020/10/26 Javascript
JavaScript 预解析的4种实现方法解析
2019/09/03 Javascript
node-red File读取好保存实例讲解
2019/09/11 Javascript
Node快速切换版本、版本回退(降级)、版本更新(升级)
2021/01/07 Javascript
[01:23:35]Ti4主赛事胜者组 DK vs EG 1
2014/07/19 DOTA
[35:26]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第三局
2016/02/26 DOTA
mac系统安装Python3初体验
2018/01/02 Python
pycharm重置设置,恢复默认设置的方法
2018/10/22 Python
python openpyxl使用方法详解
2019/07/18 Python
Python如何调用外部系统命令
2019/08/07 Python
在Anaconda3下使用清华镜像源安装TensorFlow(CPU版)
2020/04/19 Python
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
机械工程系毕业生求职信
2013/09/27 职场文书
销售部主管岗位职责
2013/12/18 职场文书
精彩的演讲稿开头
2014/05/08 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
离婚民事起诉状
2015/08/03 职场文书
简历上的自我评价,该怎么写呢?
2019/06/13 职场文书
Vue-Element-Admin集成自己的接口实现登录跳转
2021/06/23 Vue.js