浅析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 cookies 设置、读取、删除实例代码
Apr 12 Javascript
IE6下CSS图片缓存问题解决方法
Dec 09 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 Javascript
javascript 获取模态窗口的滚动位置代码
Aug 06 Javascript
JavaScript中用getDate()方法返回指定日期的教程
Jun 09 Javascript
jQuery判断浏览器并动态调整select宽度的方法
Mar 02 Javascript
JavaScript中用let语句声明作用域的用法讲解
May 20 Javascript
全面解析Bootstrap中transition、affix的使用方法
May 30 Javascript
jQuery实现响应鼠标事件的图片透明效果【附demo源码下载】
Jun 16 Javascript
浅谈jquery采用attr修改form表单enctype不起作用的问题
Nov 25 Javascript
selenium 与 chrome 进行qq登录并发邮件操作实例详解
Apr 06 Javascript
详解微信第三方小程序代开发
Jun 23 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
一个程序下载的管理程序(四)
2006/10/09 PHP
PHP为表单获取的URL 地址预设 http 字符串函数代码
2010/05/26 PHP
linux下为php添加curl扩展的方法
2011/07/29 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
PHP使用mysql_fetch_row查询获得数据行列表的方法
2015/03/18 PHP
关于恒等于(===)和非恒等于(!==)
2007/08/20 Javascript
IE和firefox浏览器的event事件兼容性汇总
2009/12/06 Javascript
JS实现点击颜色块切换指定区域背景颜色的方法
2015/02/25 Javascript
理解js对象继承的N种模式
2016/01/25 Javascript
Javascript 实现放大镜效果实例详解
2016/12/03 Javascript
百度地图API之百度地图退拽标记点获取经纬度的实现代码
2017/01/12 Javascript
Vue 实用分页paging实例代码
2017/04/12 Javascript
使用JavaScript实现alert的实例代码
2017/07/06 Javascript
webpack 模块热替换原理
2018/04/09 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
详解vuex持久化插件解决浏览器刷新数据消失问题
2019/04/15 Javascript
fastadmin中调用js的方法
2019/05/14 Javascript
解析vue、angular深度作用选择器
2019/09/11 Javascript
jquery实现吸顶导航效果
2020/01/08 jQuery
jquery传参及获取方式(两种方式)
2020/02/13 jQuery
Python编程中运用闭包时所需要注意的一些地方
2015/05/02 Python
Python使用tkinter库实现文本显示用户输入功能示例
2018/05/30 Python
在双python下设置python3为默认的方法
2018/10/31 Python
关于Pycharm无法debug问题的总结
2019/01/19 Python
Python 中如何实现参数化测试的方法示例
2019/12/10 Python
使用pyqt 实现重复打开多个相同界面
2019/12/13 Python
python 6行代码制作月历生成器
2020/09/18 Python
python模块内置属性概念及实例
2021/02/18 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
HTML5页面中尝试调起APP功能
2017/09/12 HTML / CSS
英国Iceland杂货店:网上食品购物
2020/12/16 全球购物
俄语专业毕业生求职信
2014/07/12 职场文书
工作时间擅自离岗检讨书
2014/10/24 职场文书
社区安全温馨提示语
2015/07/14 职场文书
新学期感想
2015/08/10 职场文书
公文格式,规则明细(新手收藏)
2019/07/23 职场文书