js apply/call/caller/callee/bind使用方法与区别分析


Posted in Javascript onOctober 28, 2009

一、call 方法
调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容)。
Js代码
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
Js代码

<input type="text" id="myText" value="input text"> Code 
function Obj(){this.value="对象!";} 
var value="global 变量"; 
function Fun1(){alert(this.value);} 
window.Fun1(); //global 变量 
Fun1.call(window); //global 变量 
Fun1.call(document.getElementById('myText')); //input text 
Fun1.call(new Obj()); //对象!

Js代码
Code
var first_object = { 
num: 42 
}; 
var second_object = { 
num: 24 
}; 
function multiply(mult) { 
return this.num * mult; 
} 
multiply.call(first_object, 5); // returns 42 * 5 
multiply.call(second_object, 5); // returns 24 * 5

二、apply方法
apply方法的第一个参数也是要传入给当前对象的对象,即函数内部的this。后面的参数都是传递给当前对象的参数。
对于apply和call两者在作用上是相同的,但两者在参数上有区别的。对于第一个参数意义都一样,但对第二个参数:apply传入的是一个参数数组,也就是将多个参数组合成为一个数组传入,而call则作为call的参数传入(从第二个参数开始)。
如 func.call(func1,var1,var2,var3)对应的apply写法为:func.apply(func1,[var1,var2,var3])同时使用apply的好处是可以直接将当前函数的arguments对象作为apply的第二个参数传入。
Js代码
var func=new function(){this.a="func"} 
var myfunc=function(x,y){ 
var a="myfunc"; 
alert(this.a); 
alert(x + y); 
} 
myfunc.call(func,"var"," fun");// "func" "var fun" 
myfunc.apply(func,["var"," fun"]);// "func" "var fun"

三、caller 属性
返回一个对函数的引用,即调用了当前函数的函数体。
functionName.caller :functionName 对象是所执行函数的名称。
说明:
对于函数来说,caller 属性只有在函数执行时才有定义。 如果函数是由 JScript 程序的顶层调用的,那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性,那么结果和 functionName.toString 一样,也就是说,显示的是函数的反编译文本。
Js代码
function CallLevel(){ 
if (CallLevel.caller == null) 
alert("CallLevel was called from the top level."); 
else 
alert("CallLevel was called by another function:\n"+CallLevel.caller); 
} 
function funCaller(){ 
CallLevel(); 
} 
CallLevel(); 
funCaller()

四、callee属性
返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。
[function.]arguments.callee:可选项 function 参数是当前正在执行的 Function 对象的名称。
说明:
callee 属性的初始值就是正被执行的 Function 对象。
callee 属性是 arguments 对象的一个成员,它表示对函数对象本身的引用,这有利于匿
函数的递归或者保证函数的封装性,例如下边示例的递归计算1到n的自然数之和。而该属性
仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性,这个属性有时
用于验证还是比较好的。arguments.length是实参长度,arguments.callee.length是
形参长度,由此可以判断调用时形参长度是否和实参长度一致。
Js代码
//callee可以打印其本身 
function calleeDemo() { 
alert(arguments.callee); 
} 
//用于验证参数 
function calleeLengthDemo(arg1, arg2) { 
if (arguments.length==arguments.callee.length) { 
window.alert("验证形参和实参长度正确!"); 
return; 
} else { 
alert("实参长度:" +arguments.length); 
alert("形参长度: " +arguments.callee.length); 
} 
} 
//递归计算 
var sum = function(n){ 
if (n <= 0) 
return 1; 
else 
return n +arguments.callee(n - 1) 
}

五、bind
Js代码
var first_object = { 
num: 42 
}; 
var second_object = { 
num: 24 
}; 
function multiply(mult) { 
return this.num * mult; 
} 
Function.prototype.bind = function(obj) { 
var method = this, 
temp = function() { 
return method.apply(obj, arguments); 
}; 
return temp; 
} 
var first_multiply = multiply.bind(first_object); 
first_multiply(5); // returns 42 * 5 
var second_multiply = multiply.bind(second_object); 
second_multiply(5); // returns 24 * 5

六、JS闭包(Closure)
所谓“闭包”,指的是一个拥有许多变量和绑定了这些变量的环境的表达式(通常是一个函数),因而这些变量也是该表达式的一部分。
关于闭包,最简单的描述就是 ECMAScript 允许使用内部函数--即函数定义和函数表达式位于另一个函数的函数体内。而且,这些内部函数可以访问它们所在的外部函数中声明的所有局部变量、参数和声明的其他内部函数。当其中一个这样的内部函数在包含它们的外部函数之外被调用时,就会形成闭包。也就是说,内部函数会在外部函数返回后被执行。而当这个内部函数执行时,它仍然必需访问其外部函数的局部变量、参数以及其他内部函数。这些局部变量、参数和函数声明(最初时)的值是外部函数返回时的值,但也会受到内部函数的影响。
简而言之,闭包的作用就是在out function执行完并返回后,闭包使得Javascript的垃圾回收机制GC不会收回out function所占用的资源,因为out function的内部函数inner function的执行需要依赖out function中的变量。
闭包的两个特点:
1、作为一个函数变量的一个引用 - 当函数返回时,其处于激活状态。
2、一个闭包就是当一个函数返回时,一个没有释放资源的栈区。
例1:
Html代码
<script type="text/javascript"> 
function setupSomeGlobals() { 
// Local variable that ends up within closure 
var num = 666; 
// Store some references to functions as global variables 
gAlertNumber = function() { alert(num); } 
gIncreaseNumber = function() { num++; } 
gSetNumber = function(x) { num = x; } 
} 
</script> 
<button onclick="setupSomeGlobals()">生成 - setupSomeGlobals()</button> 
<button onclick="gAlertNumber()">输出值 - gAlertNumber()</button> 
<button onclick="gIncreaseNumber()">增加 - gIncreaseNumber()</button> 
<button onclick="gSetNumber(5)">赋值5 - gSetNumber(5)</button>

例2:
Html代码
<script type="text/javascript"> 
function newClosure(someNum, someRef) { 
// Local variables that end up within closure 
var num = someNum; 
var anArray = [1,2,3]; 
var ref = someRef; 
return function(x) { 
num += x; 
anArray.push(num); 
alert('num: ' + num + 
' nanArray ' + anArray.toString() + 
' nref.someVar ' + ref.someVar); 
} 
} 
var closure1 = newClosure(40, {someVar:' never-online'}) 
var closure2 = newClosure(99, {someVar:' BlueDestiny'}) 
closure1(4) 
closure2(3) 
</script>

例3:
Js代码
<script language="javascript"> 
/* 声明一个全局变量 - getImgInPositionedDivHtml - 并将一次调用一个外部函数表达式返回的内部函数赋给它。 
这个内部函数会返回一个用于表示绝对定位的 DIV 元素包围着一个 IMG 元素 的 HTML 字符串,这样一来, 
所有可变的属性值都由调用该函数时的参数提供: 
*/ 
var getImgInPositionedDivHtml = (function(){ 
/* 外部函数表达式的局部变量 - buffAr - 保存着缓冲数组。这个数组只会被创建一次,生成的数组实例对内部函数而言永远是可用的 
因此,可供每次调用这个内部函数时使用。 
其中的空字符串用作数据占位符,相应的数据 
将由内部函数插入到这个数组中: 
*/ 
var buffAr = [ 
'<div id="', 
'', //index 1, DIV ID 属性 
'" style="position:absolute;top:', 
'', //index 3, DIV 顶部位置 
'px;left:', 
'', //index 5, DIV 左端位置 
'px;width:', 
'', //index 7, DIV 宽度 
'px;height:', 
'', //index 9, DIV 高度 
'px;overflow:hidden;\"><img src=\"', 
'', //index 11, IMG URL 
'\" width=\"', 
'', //index 13, IMG 宽度 
'\" height=\"', 
'', //index 15, IMG 调蓄 
'\" alt=\"', 
'', //index 17, IMG alt 文本内容 
'\"><\/div>' 
]; 
/* 返回作为对函数表达式求值后结果的内部函数对象。 
这个内部函数就是每次调用执行的函数 
- getImgInPositionedDivHtml( ... ) - 
*/ 
return (function(url, id, width, height, top, left, altText){ 
/* 将不同的参数插入到缓冲数组相应的位置: 
*/ 
buffAr[1] = id; 
buffAr[3] = top; 
buffAr[5] = left; 
buffAr[13] = (buffAr[7] = width); 
buffAr[15] = (buffAr[9] = height); 
buffAr[11] = url; 
buffAr[17] = altText; 
/* 返回通过使用空字符串(相当于将数组元素连接起来) 
连接数组每个元素后形成的字符串: 
*/ 
return buffAr.join(''); 
}); //:内部函数表达式结束。 
})();//自调用 
alert(getImgInPositionedDivHtml);//显示返回的函数 
alert(getImgInPositionedDivHtml("img.gif","img",100,50,0,0,"Test")); 
</script>

说明:其中的关键技巧在于通过执行一个单行(in-line)函数表达式创建一个额外的执行环境,而将该函数表达式返回的内部函数作为在外部代码中使用的函数。此时,缓冲数组被定义为函数表达式的一个局部变量。这个函数表达式只需执行一次,而数组也只需创建一次,就可以供依赖它的函数重复使用。
七、原型链
ECMAScript 为 Object 类型定义了一个内部 [[prototype]] 属性。这个属性不能通过脚本直接访问,但在属性访问器解析过程中,则需要用到这个内部[[prototype]] 属性所引用的对象链--即原型链。可以通过一个公共的 prototype 属性,来对与内部的 [[prototype]] 属性对应的原型对象进行赋值或定义。
例1:
Js代码
<script language="javascript"> 
function NumObject(formalParameter){ 
this.testNumber = formalParameter; 
} 
function StrObject(formalParameter){ 
this.testString = formalParameter; 
} 
//用 NumObject类的实例替换了所有与 StrObject类的实例相关联的原型。 
StrObject.prototype =new NumObject(6); 
var objRef = new StrObject( "String_Value" ); 
//当某个属性访问器尝试读取由 objectRef 所引用的对象的属性值时,整个原型链都会被搜索。 
//不论是在对象或对象的原型中,读取命名属性值的时候只返回首先找到的属性值。而当为对象的命名属性赋值时,如果对象自身不存在该属性则创建相应的属性。 
alert(objRef.testString);//output "String_Value" 
alert(objRef.testNumber);//output "6" 
alert(objRef.toString); 
//StrObject 的实例拥有一个原型链。该链中的第一个对象是在创建后被指定给 StrObject 构造函数的 prototype 属性的 NumObject 的一个实例。NumObject 的实例也有一个原型,即与 Object.prototype 所引用的对象对应的默认的 Object 对象的原型。最后, Object.prototype 有一个值为 null 的原型,因此这条原型链到此结束。 
objRef.testNumber = 3;//对象自身不存在该属性则创建相应的属性 
alert(objRef.testNumber);//自身有了属性,属性访问器不会再进一步搜索原型链 
alert(NumObject.prototype.isPrototypeOf(objRef));// output "true" 
</script>

0 0 0
Javascript 相关文章推荐
js实现收缩菜单效果实例代码
Oct 30 Javascript
解决jquery操作checkbox火狐下第二次无法勾选问题
Feb 10 Javascript
js根据鼠标移动速度背景图片自动旋转的方法
Feb 28 Javascript
jQuery的几个我们必须了解的特点
May 03 Javascript
JS实现消息来时让网页标题闪动效果的方法
Apr 20 Javascript
url中的特殊符号有什么含义(推荐)
Jun 17 Javascript
简单实现jquery焦点图
Dec 12 Javascript
javascript正则表达式模糊匹配IP地址功能示例
Jan 06 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
使用JS实现导航切换时高亮显示的示例讲解
Aug 22 Javascript
基于JavaScript实现简单抽奖功能代码实例
Oct 20 Javascript
如何通过Proxy实现JSBridge模块化封装
Oct 22 Javascript
javascript 时间比较实现代码
Oct 28 #Javascript
浅谈javascript 面向对象编程
Oct 28 #Javascript
小议javascript 设计模式 推荐
Oct 28 #Javascript
JavaScript 组件之旅(四):测试 JavaScript 组件
Oct 28 #Javascript
JavaScript 组件之旅(三):用 Ant 构建组件
Oct 28 #Javascript
JavaScript 组件之旅(二)编码实现和算法
Oct 28 #Javascript
JavaScript 组件之旅(一)分析和设计
Oct 28 #Javascript
You might like
php生成动态验证码gif图片
2015/10/19 PHP
Laravel5.5以下版本中如何自定义日志行为详解
2018/08/01 PHP
js操纵跨frame的三级联动select下拉选项实例介绍
2013/05/19 Javascript
jQuery 获取浏览器所在的IP地址的小例子
2013/11/08 Javascript
js 限制input只能输入数字、字母和汉字等等
2013/12/18 Javascript
深入理解javascript构造函数和原型对象
2014/09/23 Javascript
使用js实现数据格式化
2014/12/03 Javascript
js实现C#的StringBuilder效果完整实例
2015/12/22 Javascript
利用Angularjs中模块ui-route管理状态的方法
2016/12/27 Javascript
详解在Vue中通过自定义指令获取dom元素
2017/03/04 Javascript
Webpack打包慢问题的完美解决方法
2017/03/16 Javascript
微信小程序带动画弹窗组件使用方法详解
2018/11/27 Javascript
javascript 代码是如何被压缩的示例代码
2020/05/06 Javascript
Jquery滑动门/tab切换实现方法完整示例
2020/06/05 jQuery
js瀑布流布局的实现
2020/06/28 Javascript
[41:17]VG vs Optic 2018国际邀请赛小组赛BO2 第二场 8.19
2018/08/21 DOTA
Python入门篇之数字
2014/10/20 Python
使用Python编写简单网络爬虫抓取视频下载资源
2014/11/04 Python
Django原生sql也能使用Paginator分页的示例代码
2017/11/15 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
使用PIL(Python-Imaging)反转图像的颜色方法
2019/01/24 Python
Python json解析库jsonpath原理及使用示例
2020/11/25 Python
python 实现控制鼠标键盘
2020/11/27 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
YSL圣罗兰美妆美国官网:Yves Saint Lauret US
2016/11/21 全球购物
Parfumdreams英国:香水和化妆品
2019/05/10 全球购物
htmlentities() 和 htmlspecialchars()有什么区别
2015/07/01 面试题
求∏的近似值,直到最后一项的绝对值小于指定的数
2016/02/12 面试题
自我推荐书
2013/12/04 职场文书
企业军训感想
2014/02/07 职场文书
《一件运动衫》教学反思
2014/02/19 职场文书
会计学专业求职信
2014/07/17 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
党的群众路线教育实践活动教师自我剖析材料
2014/10/09 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
python+pytest接口自动化之token关联登录的实现
2022/04/06 Python