浅析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 相关文章推荐
JS getStyle获取最终样式函数代码
Apr 01 Javascript
javascript获取xml节点的最大值(实现代码)
Dec 11 Javascript
js对table的td进行相同内容合并示例详解
Dec 27 Javascript
js解析json读取List中的实体对象示例
Mar 11 Javascript
jQuery使用EasyUi实现三级联动下拉框效果
Mar 08 Javascript
jQuery+PHP+Mysql实现抽奖程序
Apr 12 jQuery
原生JS实现层叠轮播图
May 17 Javascript
详解Angular2响应式表单
Jun 14 Javascript
详解Vue基于 Nuxt.js 实现服务端渲染(SSR)
Apr 05 Javascript
基于vue展开收起动画的示例代码
Jul 05 Javascript
vue中利用iscroll.js解决pc端滚动问题
Feb 15 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
Jul 26 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生成EAN_13标准条形码实例
2013/11/13 PHP
CI框架自动加载session出现报错的解决办法
2014/06/17 PHP
javascript 浏览器检测代码精简版
2010/03/04 Javascript
JavaScript学习笔记之获取当前目录的实现代码
2010/12/14 Javascript
jquery重复提交请求的原因浅析
2014/05/23 Javascript
关于JavaScript命名空间的一些心得
2014/06/07 Javascript
jQuery移除tr无效的解决方法(tr是动态添加)
2014/09/22 Javascript
js实现头像图片切割缩放及无刷新上传图片的方法
2015/07/17 Javascript
JS实现三级折叠菜单特效,其它级可自动收缩
2015/08/06 Javascript
详解Javascript中的Object对象
2016/02/28 Javascript
js只执行1次的函数示例
2016/07/20 Javascript
zepto与jquery的区别及zepto的不同使用8条小结
2016/07/28 Javascript
Nodejs进阶:核心模块net入门学习与实例讲解
2016/11/21 NodeJs
JS字符串按逗号和回车分隔的方法
2017/04/25 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
用ES6的class模仿Vue写一个双向绑定的示例代码
2018/04/20 Javascript
vuejs实现标签选项卡动态更改css样式的方法
2018/05/31 Javascript
vue简单练习 桌面时钟的实现代码实例
2019/09/19 Javascript
解决node.js含有%百分号时发送get请求时浏览器地址自动编码的问题
2019/11/20 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
Vue3配置axios跨域实现过程解析
2020/11/25 Vue.js
[01:04:30]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
python解析发往本机的数据包示例 (解析数据包)
2014/01/16 Python
python使用range函数计算一组数和的方法
2015/05/07 Python
Python基础语法(Python基础知识点)
2016/02/28 Python
用python生成1000个txt文件的方法
2018/10/25 Python
对python产生随机的二维数组实例详解
2018/12/13 Python
python处理DICOM并计算三维模型体积
2019/02/26 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
爷爷追悼会答谢词
2014/01/24 职场文书
致跳远运动员加油稿
2014/02/11 职场文书
教师现实表现材料
2014/02/14 职场文书
社区文明倡议书
2015/04/28 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL
go语言基础 seek光标位置os包的使用
2021/05/09 Golang
python模板入门教程之flask Jinja
2022/04/11 Python