浅析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 Select(单选) 模拟插件 V1.3.62 改进版
Jul 17 Javascript
Javascript模块化编程(一)模块的写法最佳实践
Jan 17 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
javascript面向对象之共享成员属性与方法及prototype关键字用法
Jan 13 Javascript
Jquery对select的增、删、改、查操作
Feb 06 Javascript
js实现最短的XML格式化工具实例
Mar 12 Javascript
基于jQuery全屏焦点图左右切换插件responsiveslides
Sep 07 Javascript
JS用斜率判断鼠标进入DIV四个方向的方法
Nov 07 Javascript
JavaScript实现时钟滴答声效果
Jan 29 Javascript
Vue2.0+ElementUI实现表格翻页的实例
Oct 23 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
element-ui 文件上传修改文件名的方法示例
Nov 05 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常用函数小技巧
2008/09/11 PHP
由php的call_user_func传reference引发的思考
2010/07/23 PHP
PHP下通过exec获得计算机的唯一标识[CPU,网卡 MAC地址]
2011/06/09 PHP
ThinkPHP中URL路径访问与模块控制器之间的关系
2014/08/23 PHP
PHP动态页生成静态页的3种常用方法
2014/11/13 PHP
Yii框架关联查询with用法分析
2014/12/02 PHP
php 无限级分类 获取顶级分类ID
2016/03/13 PHP
Laravel使用scout集成elasticsearch做全文搜索的实现方法
2018/11/30 PHP
JS中剪贴板兼容性、判断复制成功或失败
2021/03/09 Javascript
JavaScript中for-in遍历方式示例介绍
2014/02/11 Javascript
js/jquery判断浏览器的方法小结
2014/09/02 Javascript
JavaScript使用shift方法移除素组第一个元素实例分析
2015/04/06 Javascript
jQuery Validate初步体验(二)
2015/12/12 Javascript
XML、HTML、CSS与JS的区别整理
2016/02/18 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
在localStorage中存储对象数组并读取的方法
2016/09/24 Javascript
详解JS数值Number类型
2018/02/07 Javascript
vue地区选择组件教程详解
2018/05/04 Javascript
封装微信小程序http拦截器过程解析
2019/08/13 Javascript
axios实现简单文件上传功能
2019/09/25 Javascript
Vuex中的Mutations的具体使用方法
2020/06/01 Javascript
vue 项目引入echarts 添加点击事件操作
2020/09/09 Javascript
Python用list或dict字段模式读取文件的方法
2017/01/10 Python
python自动化脚本安装指定版本python环境详解
2017/09/14 Python
Python理解递归的方法总结
2019/01/28 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
草莓网中国:StrawberryNet中国
2020/08/17 全球购物
实习单位推荐信范文
2013/11/27 职场文书
甜品蛋糕店创业计划书范文
2014/02/06 职场文书
2014年健康教育实施方案
2014/02/17 职场文书
竞选演讲稿范文大全
2014/05/12 职场文书
2014年教师节国旗下讲话稿
2014/09/10 职场文书
天坛导游词
2015/02/02 职场文书
课题研究阶段性总结
2015/08/13 职场文书
如何利用map实现Nginx允许多个域名跨域
2021/03/31 Servers
java调用Restful接口的三种方法
2021/08/23 Java/Android