浅析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 相关文章推荐
jquery $.ajax()取xml数据的小问题解决方法
Nov 20 Javascript
jquery实现鼠标经过显示下划线的渐变下拉菜单效果代码
Aug 24 Javascript
jquery UI Datepicker时间控件的使用及问题解决
Apr 28 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
纯javaScript、jQuery实现个性化图片轮播【推荐】
Jan 08 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
Sep 05 Javascript
详解设置Webstorm 利用babel将ES6自动转码成ES5
Dec 20 Javascript
Less 安装及基本用法
May 05 Javascript
解决Vue中引入swiper,在数据渲染的时候,发生不滑动的问题
Sep 27 Javascript
vue的注意规范之v-if 与 v-for 一起使用教程
Aug 04 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 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 header函数使用教程
2013/09/05 PHP
PHP实现采集中国天气网未来7天天气
2014/10/15 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
漂亮的仿flash菜单,来自蓝色经典
2006/06/26 Javascript
js 文件引入实现代码
2010/04/23 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
2014/06/23 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
2016/05/29 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
详解nodeJS之路径PATH模块
2017/05/31 NodeJs
浅谈mint-ui 填坑之路
2017/11/06 Javascript
利用ES6实现单例模式及其应用详解
2017/12/09 Javascript
JS获取浏览器地址栏的多个参数值的任意值实例代码
2018/07/24 Javascript
JS回调函数 callback的理解与使用案例分析
2019/09/09 Javascript
python的id()函数解密过程
2012/12/25 Python
Python2.x与Python3.x的区别
2016/01/14 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
使用selenium模拟登录解决滑块验证问题的实现
2019/05/10 Python
wxPython实现文本框基础组件
2019/11/18 Python
Pytorch保存模型用于测试和用于继续训练的区别详解
2020/01/10 Python
Python集成开发工具Pycharm的安装和使用详解
2020/03/18 Python
使用python计算三角形的斜边例子
2020/04/15 Python
Python爬虫抓取指定网页图片代码实例
2020/07/24 Python
CSS3让登陆面板3D旋转起来
2016/05/03 HTML / CSS
关于HTML5+ API plusready的兼容问题
2020/11/20 HTML / CSS
moosejaw旗下的户外商品促销网站:Mountain Steals
2017/02/27 全球购物
俄罗斯EPL钻石珠宝店:ЭПЛ
2019/10/22 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
物流管理毕业生自荐信
2013/10/24 职场文书
护理专业毕业生自荐信范文
2014/01/05 职场文书
党员实事承诺书
2014/03/26 职场文书
班主任自我评价范文
2015/03/11 职场文书
医院合作意向书范本
2015/05/08 职场文书
2015年试用期工作总结范文
2015/05/28 职场文书
2016年端午节校园广播稿
2015/12/18 职场文书
MySQL中你可能忽略的COLLATION实例详解
2021/05/12 MySQL
Win11电脑显示本地时间与服务器时间不一致怎么解决?
2022/04/05 数码科技