浅析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 相关文章推荐
javascript使用activex控件的代码
Jan 27 Javascript
js+xml生成级联下拉框代码
Jul 24 Javascript
javascript数组操作(创建、元素删除、数组的拷贝)
Apr 07 Javascript
jQuery简单实现仿京东商城的左侧菜单效果代码
Sep 09 Javascript
jQuery中的通配符选择器使用总结
May 30 Javascript
js简单判断flash是否加载完成的方法
Jun 21 Javascript
jquery radio的取值_radio的选中_radio的重置方法
Sep 20 Javascript
JavaScript中object和Object的区别(详解)
Feb 27 Javascript
详解webpack打包后如何调试的方法步骤
Nov 07 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
Vue.js实现开发购物车功能的方法详解
Feb 22 Javascript
微信小程序和百度的语音识别接口详解
May 06 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令牌 Token改进版
2008/07/18 PHP
让你成为更出色的PHP开发者的10个技巧
2011/02/25 PHP
php把字符串指定字符分割成数组的方法
2018/03/12 PHP
jquery 插件之仿“卓越亚马逊”首页弹出菜单效果
2008/12/25 Javascript
JavaScript与Image加载事件(onload)、加载状态(complete)
2011/02/14 Javascript
js 调用本地exe的例子(支持IE内核的浏览器)
2012/12/26 Javascript
jQuery 获取和设置select下拉框的值实现代码
2013/11/08 Javascript
JS实现的通用表单验证插件完整实例
2015/08/20 Javascript
jQuery简单实现两级下拉菜单效果代码
2015/09/15 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
axios post提交formdata的实例
2018/03/16 Javascript
vue select选择框数据变化监听方法
2018/08/24 Javascript
React Native开发封装Toast与加载Loading组件示例
2018/09/08 Javascript
javascript实现视频弹幕效果(两个版本)
2019/11/28 Javascript
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
2020/11/10 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——LGD
2018/04/04 DOTA
[51:07]VGJ.S vs Pain 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
python XlsxWriter模块创建aexcel表格的实例讲解
2018/05/03 Python
Python实现的txt文件去重功能示例
2018/07/07 Python
Python中遍历列表的方法总结
2019/06/27 Python
Django框架下静态模板的继承操作示例
2019/11/08 Python
numpy 返回函数的上三角矩阵实例
2019/11/25 Python
Python 必须了解的5种高级特征
2020/09/10 Python
python实现数学模型(插值、拟合和微分方程)
2020/11/13 Python
python向xls写入数据(包括合并,边框,对齐,列宽)
2021/02/02 Python
Python LMDB库的使用示例
2021/02/14 Python
6号汽车旅馆预订:Motel 6
2018/02/11 全球购物
商务英语专业毕业生自荐信
2013/11/05 职场文书
财务出纳岗位职责
2014/02/03 职场文书
会计电算化专业自荐信
2014/03/15 职场文书
机械专业求职信
2014/05/25 职场文书
企业精神口号
2014/06/11 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
2015年幼儿园德育工作总结
2015/05/25 职场文书
致运动员赞词
2015/07/22 职场文书