javascript基于原型链的继承及call和apply函数用法分析


Posted in Javascript onDecember 15, 2016

本文实例讲述了javascript基于原型链的继承及call和apply函数用法。分享给大家供大家参考,具体如下:

1. 继承是面向对象编程语言的一个重要特性,比如Java中,通过extend可以实现多继承,但是JavaScript中的继承方式跟JAVA中有很大的区别,JS中通过原型链的方式实现继承。

(1)对象的原型:因为JS中,函数也是对象,因此我们先从对象出发。什么是对象的原型,原型的定义为:

所有通过对象直接量创建的对象都具有同一个函数原型,并且可以通过Object.prototype获得对原型对象的引用,通过关键字new和构造函数调用创建的对象的原型就是构造函数的prototype属性的值。

注:没有原型的对象不多,Object.prototype对象是没有原型的。

(2)创建对象的原型

比如这里有一个Student对象和一个Person对象,其中,Student.prototype指向Person.prototype

对于创建对象完全不同的两种方法:

i)Student.prototype=Person.prototype

这种方法,创建Student的prototype对象,如果改变Student.prototype的值的时候,Person.prototype也会同时改变,为了避免这种情况,我们应采用其他方式;

ii)Student.prototype=Object.create(Person.prototype)

这种方法,创建的Student的Prototype对象,在改变Student.prototype的属性或者方法时,不会同时去改变Person.prototype的属性。

(3)基于继承的赋值操作

例1:

var o={
  x:1
}
o.x=2;
alert(o.x);//输出o.x=2

例2:

var o={
  x:1
}
var osp=Object.create(o);
alert(osp.x);//输出1
osp.x=2;
alert(osp.x);//输出2

i)从上面的两个例子中,我们大概可以看出来,如果对象osp上有x属性,那么无论是取值,还是赋值,都是基于osp对象上的直接属性x,如果osp对象上没有x属性,那么会沿着prototype原型链查找,直到找到一个包含x属性的prototype属性链上的对象,如果osp对象所有prototype原型链上都没有包含x属性,那么返回underfined。

ii)o对象属性的赋值,被视为在osp对象上直接进行,不会影响原型链上的属性。比如上例中的osp.x=2的赋值是在osp对象上,不会影响osp的原型对象o。

2. 举一些对象中继承的例子

(1)我们学过可以用instanceof来进行类型判断,instanceof方法本来就是基于原型链的。

比如例3:

[1,2] instanceof Array    //返回true
[1,2] instanceof Object   //返回true

这个例子说明Array.prototype也是继承于对象而来。

(2)函数中的组合继承问题

function student(name,age){
  this.name=name;
  this.age=age;
}
student.prototype.age=function(){
  return this.age;
}
function beststudent(name,age){
  student.call(this,age);
  return this.name;
}
beststudent.prototype=new student();
  alert(beststudent("yu",2))//输出2
}

3. call函数和apply函数

call函数和apply函数用于改变函数中this的指向,用于对象A调用对象B的方法,call函数和apply函数的区别在于传参的类型不同,apply(x,y),x表示的是执行函数的对象,而y则表示执行函数所需要调用的参数,是一个数组,并且可以传参为argument数组,而call(x,y)中的y之后的变量则是实实在在的变量;

更多关于JavaScript相关内容可查看本站专题:《javascript面向对象入门教程》、《JavaScript中json操作技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery实现下拉框多选 jquery-multiselect 的实例代码
Jul 14 Javascript
原生JS京东轮播图代码
Mar 22 Javascript
javascript 中事件冒泡和事件捕获机制的详解
Sep 01 Javascript
BetterScroll 在移动端滚动场景的应用
Sep 18 Javascript
详解微信小程序实现WebSocket心跳重连
Jul 31 Javascript
菊花转动的jquery加载动画效果
Aug 19 jQuery
JavaScript中的 new 命令
May 22 Javascript
深入了解响应式React Native Echarts组件
May 29 Javascript
vue给对象动态添加属性和值的实例
Sep 09 Javascript
Layui实现数据表格中鼠标悬浮图片放大效果,离开时恢复原图的方法
Sep 11 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
用React Native制作一个简单的游戏引擎
May 27 Javascript
移动端脚本框架Hammer.js
Dec 15 #Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 #Javascript
浅谈javascript alert和confirm的美化
Dec 15 #Javascript
JavaScript模板引擎Template.js使用详解
Dec 15 #Javascript
原生JS实现图片轮播切换效果
Dec 15 #Javascript
javascript中数组(Array)对象和字符串(String)对象的常用方法总结
Dec 15 #Javascript
利用vue写todolist单页应用
Dec 15 #Javascript
You might like
php 中文字符入库或显示乱码问题的解决方法
2010/04/12 PHP
基于php socket(fsockopen)的应用实例分析
2013/06/02 PHP
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
PHP临时文件的安全性分析
2014/07/04 PHP
php中json_encode处理gbk与gb2312中文乱码问题的解决方法
2014/07/10 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
php-msf源码详解
2017/12/25 PHP
利用PHP扩展Xhprof分析项目性能实践教程
2018/09/05 PHP
PHP结合jquery ajax实现上传多张图片,并限制图片大小操作示例
2019/03/01 PHP
PHP 实现链式操作
2021/03/09 PHP
Jquery封装tab自动切换效果的具体实现
2013/07/13 Javascript
jquery动态添加元素事件失效问题解决方法
2014/05/23 Javascript
Jquery Post处理后不进入回调的原因及解决方法
2014/07/15 Javascript
JavaScript简单表格编辑功能实现方法
2015/04/16 Javascript
AngularJS中的过滤器filter用法完全解析
2016/04/22 Javascript
javascript 利用arguments实现可变长参数
2016/11/21 Javascript
Angular.js 4.x中表单Template-Driven Forms详解
2017/04/25 Javascript
Vuejs 2.0 子组件访问/调用父组件的方法(示例代码)
2018/02/08 Javascript
详解vuex中action何时完成以及如何正确调用dispatch的思考
2019/01/21 Javascript
总结4个方面优化Vue项目
2019/02/11 Javascript
elementUI select组件value值注意事项详解
2019/05/29 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
压缩Vue.js打包后的体积方法总结(Vue.js打包后体积过大问题)
2020/02/03 Javascript
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
VUE Elemen-ui之穿梭框使用方法详解
2021/01/19 Javascript
JavaScript中arguments的使用方法详解
2020/12/20 Javascript
Python和Perl绘制中国北京跑步地图的方法
2016/03/03 Python
Python的条件锁与事件共享详解
2019/09/12 Python
Python @property及getter setter原理详解
2020/03/31 Python
Python 如何查找特定类型文件
2020/08/17 Python
品质管理部岗位职责范文
2014/03/01 职场文书
房屋出租协议书
2014/04/10 职场文书
文明市民先进事迹
2014/05/15 职场文书
暑期培训心得体会
2014/09/02 职场文书
出生医学证明书
2014/09/15 职场文书