由JavaScript中call()方法引发的对面向对象继承机制call的思考


Posted in Javascript onSeptember 12, 2011

起因:

今天在阅读snandy大神的读jQuery之五(取DOM元素)时,看到有讲到toArray()方法,具体jQuery代码如下:

toArray: function() { 
return slice.call( this, 0 ); 
}, 
get: function( num ) { 
return num == null ? 
// Return a 'clean' array 
this.toArray() : 
// Return just the object 
( num < 0 ? this[ this.length + num ] : this[ num ] ); 
},

看到这里的call()方法,以前也看过手册,说是对象冒充的,用于继承的。在jQuery源码里有点乱,所以就把这部分提取出来,放在一个单独文件中,来看看具体执行。

但还是没太明白,今天决定研究下call。于是查了下MDN上的说明,心血来潮,拿出我的“葵花宝典”-牛津大辞典,准备练习下自己的英文水平,提高提高,而且也提供给有需要的朋友一些帮助(翻译中如果有些出路,请各位前辈见谅!)
call

摘要:

 通过给定的this和arguments来调用一个function

 注意:该方法与apply方法语法相似,但不同的是:call()接受参数列,而apply()接受传递给函数的参数数组

 Function类的一个方法:版本JavaScript 1.3版以后

语法:

 fun.call(thisArg[, arg1[, arg2[, ...]]])

参数说明:

 thisArg:

为fun()的调用指定对象。注意:你看到的this值可能不是实际的值:如果这个方法是在 non-strict mode下,null和undefined会被全局对象替换掉,原始的值会被封装。

 arg1,arg2,....

this对象的参数

描述:

当调用一个已存在的函数,你可以分配不同的对象。这时,this指定的对象是当前正在调用对象。

通过call,你可以只写一次方法,而被另一个对象来继承。而不用自己再新建对象时,重写该方法。(即对象冒充,下面会有例子说明!)

在MDN官网上面有例子可以看看。另外,无意中在stackoverflow上看到了篇相关的问题,看到里面的一个回答,一下子就明白了对象冒充,怎么冒充了。
下面把那部分摘取出来(点击这里看原文):

In javascript, methods of an object can be bound to another object at runtime. In short, javascript allows an object to "borrow" the method of another object:

object1 = { 
name:'frank', 
greet:function(){ 
alert('hello '+this.name) 
} 
}; 
object2 = { 
name:'andy' 
}; 
// Note that object2 has no greet method. 
// But we may "borrow" from object1: 
object1.greet.call(object2);

The call and apply methods of function objects (in javascript functions are objects as well) allows you to do this. So in your code you could say that the Nodelist is borrowing an array's slice method. What does the conversion is the fact that slice returns another array as it's result.

这里的第一句话说的很形象,大致意思就是:在JavaScript中,对象的方法可绑定到另外一个对象上。简单点说,就是,JavaScript中允许对象‘借用'本不属于它本身的方法。“冒充”也就不言而喻了,就上上面的例子来说,object2冒充object1,来调用object1的方法。

PS:菜鸟第一次写博客,有点乱,我相信以后会慢慢改善,向各位师兄师姐学习怎么写博客,写好博客。另外欢迎大家给我批评与指导!

参考资料:
1.w3cschool ECMAScript 继承机制实现

2.MDN上call的说明

3.stackoverflow

Javascript 相关文章推荐
javascript RadioButtonList获取选中值
Apr 09 Javascript
JS 表单验证大全
Nov 23 Javascript
jquery弹出框的用法示例(2)
Aug 26 Javascript
Jquery中&quot;$(document).ready(function(){ })&quot;函数的使用详解
Dec 30 Javascript
JavaScript用JQuery呼叫Server端方法示例代码
Sep 03 Javascript
原生javascript实现自动更新的时间日期
Feb 12 Javascript
js动态获取子复选项并设计全选及提交的实现方法
Jun 24 Javascript
基于JSON格式数据的简单jQuery幻灯片插件(jquery-slider)
Aug 10 Javascript
node.js路径处理方法以及绝对路径详解
Mar 04 Javascript
AngularJS入门教程一:路由用法初探
May 27 Javascript
Angular 2 ngForm中的ngModel、[ngModel]和[(ngModel)]的写法
Jun 29 Javascript
基于vue-element组件实现音乐播放器功能
May 06 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 #Javascript
jQuery的.live()和.die() 使用介绍
Sep 10 #Javascript
jquery tab插件精简版分享
Sep 10 #Javascript
javascript语言结构小记(一)
Sep 10 #Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 错误处理与调试学习笔记
Sep 10 #Javascript
JavaScript高级程序设计 事件学习笔记
Sep 10 #Javascript
You might like
模拟SQLSERVER的两个函数:dateadd(),datediff()
2006/10/09 PHP
php实现MD5加密16位(不要默认的32位)
2013/08/12 PHP
PHP中获取文件创建日期、修改日期、访问时间的方法
2016/11/05 PHP
PHP实现表单提交数据的验证处理功能【防SQL注入和XSS攻击等】
2017/07/21 PHP
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
详解JavaScript中|单竖杠运算符的使用方法
2016/05/23 Javascript
Bootstrap实现基于carousel.js框架的轮播图效果
2017/05/02 Javascript
ES6 javascript中Class类继承用法实例详解
2017/10/30 Javascript
JS中利用FileReader实现上传图片前本地预览功能
2018/03/02 Javascript
js中的 || 与 &amp;&amp; 运算符详解
2018/05/24 Javascript
vue打包相关细节整理(小结)
2018/09/28 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
微信小程序人脸识别功能代码实例
2019/05/07 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
js实现打字小游戏
2019/12/17 Javascript
JS控制下拉列表左右选择实例代码
2020/05/08 Javascript
python写的一个squid访问日志分析的小程序
2014/09/17 Python
跟老齐学Python之有容乃大的list(4)
2014/09/28 Python
Python将一个CSV文件里的数据追加到另一个CSV文件的方法
2018/07/04 Python
Python实现压缩文件夹与解压缩zip文件的方法
2018/09/01 Python
python中的split()函数和os.path.split()函数使用详解
2019/12/21 Python
Python如何进行时间处理
2020/08/06 Python
工程师必须了解的LRU缓存淘汰算法以及python实现过程
2020/10/15 Python
python爬虫看看虎牙女主播中谁最“顶”步骤详解
2020/12/01 Python
CSS3 3D立方体效果示例-transform也不过如此
2016/12/05 HTML / CSS
利用CSS3的border-radius绘制太极及爱心图案示例
2016/05/17 HTML / CSS
屈臣氏马来西亚官网:Watsons马来西亚
2019/06/15 全球购物
翻译专业应届生求职信
2013/11/23 职场文书
会计学专业学生的求职信范文
2014/01/27 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
求职信名称怎么写
2014/05/26 职场文书
2015年民主生活会发言材料
2014/12/15 职场文书
致运动员的广播稿
2015/08/19 职场文书
2019年恭贺升学祝福语集锦
2019/08/15 职场文书
关于对TypeScript泛型参数的默认值理解
2022/07/15 Javascript