浅析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 相关文章推荐
屏蔽网页右键复制和ctrl+c复制的js代码
Jan 04 Javascript
通过javascript获取iframe里的值示例代码
Jun 24 Javascript
JavaScript strike方法入门实例(给字符串加上删除线)
Oct 17 Javascript
jQuery File Upload文件上传插件使用详解
Dec 06 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
详解Vue爬坑之vuex初识
Jun 14 Javascript
BootStrap给table表格的每一行添加一个按钮事件
Sep 07 Javascript
vue2.x+webpack快速搭建前端项目框架详解
Nov 30 Javascript
vue2.0 使用element-ui里的upload组件实现图片预览效果方法
Sep 04 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 Javascript
JS判断两个数组或对象是否相同的方法示例
Feb 28 Javascript
vue二维数组循环嵌套方式 循环数组、循环嵌套数组
Apr 24 Vue.js
详解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实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
详解PHP函数 strip_tags 处理字符串缺陷bug
2017/06/11 PHP
Thinkphp 框架扩展之Widget扩展实现方法分析
2020/04/23 PHP
一个对于js this关键字的问题
2007/01/09 Javascript
一个原生的用户等级的进度条
2010/07/03 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
实现网页页面跳转的几种方法(meta标签、js实现、php实现)
2014/05/20 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
使用jquery菜单插件HoverTree仿京东无限级菜单
2014/12/18 Javascript
jQuery中unwrap()方法用法实例
2015/01/16 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
基于JS如何实现类似QQ好友头像hover时显示资料卡的效果(推荐)
2016/06/09 Javascript
jQuery自定义插件详解及实例代码
2016/12/29 Javascript
解决给dom元素绑定click等事件无效问题的方法
2017/02/17 Javascript
jQuery表格(Table)基本操作实例分析
2017/03/10 Javascript
vue实现验证码按钮倒计时功能
2018/04/10 Javascript
Vue + better-scroll 实现移动端字母索引导航功能
2018/05/07 Javascript
微信小程序实现动态显示和隐藏某个控件功能示例
2018/12/14 Javascript
JS实现“全选”和"全不选"功能代码实例
2020/02/06 Javascript
python调用java模块SmartXLS和jpype修改excel文件的方法
2015/04/28 Python
Python中的pass语句使用方法讲解
2015/05/14 Python
Python docx库用法示例分析
2019/02/16 Python
python飞机大战pygame游戏框架搭建操作详解
2019/12/17 Python
Pytorch 搭建分类回归神经网络并用GPU进行加速的例子
2020/01/09 Python
Python3之外部文件调用Django程序操作model等文件实现方式
2020/04/07 Python
pandas抽取行列数据的几种方法
2020/12/13 Python
不可轻视HTML5!App三年内将被html5顶替彻底消失
2015/11/18 HTML / CSS
英国知名衬衫品牌美国网站:Charles Tyrwhitt美国
2016/08/28 全球购物
高中毕业典礼演讲稿
2014/09/09 职场文书
城管执法人员个人对照检查材料思想汇报
2014/09/29 职场文书
社区党建工作汇报材料
2014/10/27 职场文书
如何写观后感
2015/06/19 职场文书
2016年暑假家长对孩子评语
2015/12/01 职场文书
Python 的 sum() Pythonic 的求和方法详细
2021/10/16 Python
JavaScript模拟实现网易云轮播效果
2022/04/04 Javascript
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL