浅析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 相关文章推荐
学习ExtJS table布局
Oct 08 Javascript
Javascript Object.extend
May 18 Javascript
JQuery 获取json数据$.getJSON方法的实例代码
Aug 02 Javascript
jQuery函数map()和each()介绍及异同点分析
Nov 08 Javascript
js匿名函数作为函数参数详解
Jun 01 Javascript
HTML5 canvas 9绘制图片实例详解
Sep 06 Javascript
简单模拟node.js中require的加载机制
Oct 27 Javascript
前端分页功能的实现以及原理(jQuery)
Jan 22 Javascript
Vue+webpack+Element 兼容问题总结(小结)
Aug 16 Javascript
微信小程序动态增加按钮组件
Sep 14 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
React列表栏及购物车组件使用详解
Jun 28 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 register_globals 值为on与off的理解
2013/09/26 PHP
PHP file_get_contents设置超时处理方法
2013/09/30 PHP
CodeIgniter中使用cookie的三种方式详解
2014/07/18 PHP
Yii Framework框架使用PHPExcel组件的方法示例
2019/07/24 PHP
使一个函数作为另外一个函数的参数来运行的javascript代码
2007/08/13 Javascript
客户端 使用XML DOM加载json数据的方法
2010/09/28 Javascript
关于IE浏览器以及Firefox下的javascript冒泡事件的响应层级
2010/10/14 Javascript
javascript的offset、client、scroll使用方法详解
2012/12/25 Javascript
jQuery ajax serialize()方法的使用以及常见问题解决
2013/01/27 Javascript
js操作滚动条事件实例
2015/01/29 Javascript
JS设置下拉列表框当前所选值的方法
2015/12/22 Javascript
js实现添加可信站点、修改activex安全设置,禁用弹出窗口阻止程序
2016/08/17 Javascript
深入理解JS继承和原型链的问题
2016/12/17 Javascript
React进阶学习之组件的解耦之道
2017/08/07 Javascript
es6系列教程_ Map详解以及常用api介绍
2017/09/25 Javascript
小程序视频列表中视频的播放与停止的示例代码
2018/07/20 Javascript
Vue头像处理方案小结
2018/07/26 Javascript
JS实现字符串翻转的方法分析
2018/08/31 Javascript
微信小程序调用天气接口并且渲染在页面过程详解
2019/06/24 Javascript
小程序实现上传视频功能
2020/08/18 Javascript
[03:04]2018年度DOTA2玩家最喜爱的主播-完美盛典
2018/12/16 DOTA
python实现杨辉三角思路
2017/07/14 Python
python使用PyCharm进行远程开发和调试
2017/11/02 Python
Python3学习urllib的使用方法示例
2017/11/29 Python
django admin 后台实现三级联动的示例代码
2018/06/22 Python
tensorflow更改变量的值实例
2018/07/30 Python
通过实例解析Python return运行原理
2020/03/04 Python
Python通过zookeeper实现分布式服务代码解析
2020/07/22 Python
CSS3 新增选择器的实例
2019/11/13 HTML / CSS
诺思信科技(南京)有限公司.NET笔试题答案
2013/07/06 面试题
后勤主管工作职责
2013/12/07 职场文书
森林防火工作方案
2014/02/14 职场文书
年度优秀员工获奖感言
2014/08/15 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
幼儿园园长六一致辞
2015/07/31 职场文书
Python实现Hash算法
2022/03/18 Python