浅析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 相关文章推荐
关于Ext中form移除textfield方法:hide(),setVisible(false),remove()
Dec 02 Javascript
EasyUI的treegrid组件动态加载数据问题的解决办法
Dec 11 Javascript
基于jquery实现的自动补全功能
Mar 12 Javascript
在JavaScript的jQuery库中操作AJAX的方法讲解
Aug 15 Javascript
深入剖析javascript中的exec与match方法
May 18 Javascript
JS组件Bootstrap Table布局详解
May 27 Javascript
JS快速实现移动端拼图游戏
Sep 05 Javascript
vue.js $refs和$emit 父子组件交互的方法
Dec 20 Javascript
JS动画实现回调地狱promise的实例代码详解
Nov 08 Javascript
微信小程序实现消息框弹出动画
Apr 18 Javascript
解决await在forEach中不起作用的问题
Feb 25 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
详解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
检测png图片是否完整的php代码
2010/09/06 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
PHP中overload与override的区别
2017/02/13 PHP
PHP单例模式实例分析【防继承,防克隆操作】
2019/05/22 PHP
php弹出提示框的是实例写法
2019/09/26 PHP
javascript 操作cookies及正确使用cookies的属性
2009/10/15 Javascript
js有关元素内容操作小结
2011/12/20 Javascript
jquery 实现密码框的显示与隐藏示例代码
2013/09/18 Javascript
用unescape反编码得出汉字示例
2014/04/24 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
2020/12/24 Javascript
JavaScript获取URL汇总
2015/06/08 Javascript
Bootstrap BootstrapDialog使用详解
2017/02/17 Javascript
vscode下vue项目中eslint的使用方法
2019/01/13 Javascript
利用JS响应式修改vue实现页面的input值
2019/09/02 Javascript
解决父组件将子组件作为弹窗调用只执行一次created的问题
2020/07/24 Javascript
Python的迭代器和生成器使用实例
2015/01/14 Python
python简单实例训练(21~30)
2017/11/15 Python
Python实现七彩蟒蛇绘制实例代码
2018/01/16 Python
一行python实现树形结构的方法
2019/08/09 Python
nginx+uwsgi+django环境搭建的方法步骤
2019/11/25 Python
创建Shapefile文件并写入数据的例子
2019/11/26 Python
Python虚拟环境virtualenv创建及使用过程图解
2020/12/08 Python
python 窃取摄像头照片的实现示例
2021/01/08 Python
CSS3圆角边框和边界图片效果实例
2016/07/01 HTML / CSS
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
努比亚手机官网:nubia
2016/10/06 全球购物
SQL Server里面什么样的视图才能创建索引
2015/04/17 面试题
入党申请书自我鉴定
2013/10/12 职场文书
个人培训自我鉴定
2014/03/28 职场文书
课内比教学心得体会
2014/09/09 职场文书
十一国庆节“向国旗敬礼”主题班会活动方案
2014/09/27 职场文书
个人先进事迹材料
2014/12/29 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
天堂的孩子观后感
2015/06/11 职场文书
职工培训工作总结
2015/08/10 职场文书
实习报告怎么写
2019/06/20 职场文书