JavaScript方法call,apply,caller,callee,bind的使用详解及区别
来源:互联网 发布:阿迪达斯淘宝精仿店 编辑:程序博客网 时间:2024/05/16 14:56
一、call 方法
调用一个对象的一个方法,以另一个对象替换当前对象(其实就是更改对象的内部指针,即改变对象的this指向的内容)。
即 “某个方法”当做“指定的某个对象”的“方法”被执行。
Js代码
call([thisObj[,arg1[, arg2[, [,.argN]]]]])
参数
thisObj
可选项。将被用作当前对象的对象。
arg1, arg2, , argN
可选项。将被传递方法参数序列。
说明
call 方法可以用来代替另一个对象调用一个方法。call 方法可将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定的新对象。如果没有提供 thisObj 参数,那么 Global 对象被用作 thisObj。
举例一:
01
<input type=
"text"
id=
"myText"
value=
"input text"
>
02
function
Obj(){
03
this
.value =
"对象!"
;
04
}
05
06
var
value =
"global 变量"
;
07
08
function
Fun1() {
09
alert(
this
.value);
10
}
11
12
window.Fun1();
//global 变量
13
Fun1.call(window);
//global 变量
14
Fun1.call(document.getElementById(
'myText'
));
//input text
15
Fun1.call(
new
Obj());
//对象!
举例二:
01
var
first_object = {
02
num: 42
03
};
04
05
var
second_object = {
06
num: 24
07
};
08
09
function
multiply(mult) {
10
return
this
.num * mult;
11
}
12
13
multiply.call(first_object, 5);
// returns 42 * 5
14
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的第二个参数传入。
01
var
func =
new
function
() {
02
this
.a =
"func"
;
03
}
04
05
var
myfunc =
function
(x, y) {
06
var
a =
"myfunc"
;
07
alert(
this
.a);
08
alert(x + y);
09
}
10
11
myfunc.call(func,
"var"
,
"fun"
);
// "func" "var fun"
12
myfunc.apply(func, [
"var"
,
"fun"
]);
// "func" "var fun"
三、caller 属性
返回一个对函数的引用,即调用了当前函数的函数体。
functionName.caller :functionName 对象是所执行函数的名称。
说明
对 于函数来说,caller 属性只有在函数执行时才有定义。 如果函数是由 JScript 程序的顶层调用的,那么 caller 包含的就是 null 。如果在字符串上下文中使用 caller 属性,那么结果和 functionName.toString 一样,也就是说,显示的是函数的反编译文本。
01
function
CallLevel(){
02
if
(CallLevel.caller == null) {
03
alert(
"CallLevel was called from the top level."
);
04
}
else
{
05
alert(
"CallLevel was called by another function:\n"
+ CallLevel.caller);
06
}
07
}
08
09
function
funCaller(){
10
CallLevel();
11
}
12
13
CallLevel();
14
funCaller()
四、callee属性
返回正被执行的 Function 对象,也就是所指定的 Function 对象的正文。
[function.]arguments.callee:可选项 function 参数是当前正在执行的 Function 对象的名称。
说明
callee 属性的初始值就是正被执行的 Function 对象。
callee 属性是 arguments 对象的一个成员,它表示对函数对象本身的引用,这有利于匿 函数的递归或者保证函数的封装性,例如下边示例的递归计算1到n的自然数之和。而该属性仅当相关函数正在执行时才可用。还有需要注意的是callee拥有length属性,这个属性有时用于验证还是比较好的。arguments.length 是实参长度,arguments.callee.length 是形参长度,由此可以判断调用时形参长度是否和实参长度一致。
01
// callee可以打印其本身
02
function
calleeDemo() {
03
alert(arguments.callee);
04
}
05
06
// 用于验证参数
07
function
calleeLengthDemo(arg1, arg2) {
08
if
(arguments.length == arguments.callee.length) {
09
window.alert(
"验证形参和实参长度正确!"
);
10
return
;
11
}
else
{
12
alert(
"实参长度:"
+ arguments.length);
13
alert(
"形参长度: "
+ arguments.callee.length);
14
}
15
}
16
17
//递归计算
18
var
sum =
function
(n){
19
if
(n <= 0) {
20
return
1;
21
}
else
{
22
return
n + arguments.callee(n - 1);
23
}
24
}
五、bind
01
var
first_object = {
02
num: 42
03
};
04
05
var
second_object = {
06
num: 24
07
};
08
09
function
multiply(mult) {
10
return
this
.num * mult;
11
}
12
13
Function.prototype.bind =
function
(obj) {
14
var
method =
this
,
15
temp =
function
() {
16
return
method.apply(obj, arguments);
17
};
18
19
return
temp;
20
}
21
22
var
first_multiply = multiply.bind(first_object);
23
first_multiply(5);
// returns 42 * 5
24
25
var
second_multiply = multiply.bind(second_object);
26
second_multiply(5);
// returns 24 * 5
+++++++++++++++++++++++++++++++++++++++++++++++++++++
caller 与 callee 区别的一些举例:
01
<script type =
'text/javascript'
>
02
function
a() {
03
b();
04
}
05
06
function
b() {
07
alert(b === arguments.callee)
08
alert(b.caller === a)
09
alert(arguments.callee.caller === a)
10
}
11
a();
12
13
</script>
//———-
01
<script type=
"text/javascript"
>
02
function
calleeTest() {
03
arguments.callee.say(
"Mr.CT"
,
"您好!"
);
// 获取当前函数句柄
04
}
05
06
calleeTest.say =
function
(userName, value) {
07
alert(userName +
"说:"
+ value);
08
};
09
10
function
callerTest() {
11
(
function
() {
12
arguments.callee.caller.goodbye(
"Mr.CT"
,
"Canca Torvals"
);
// 获取调用当前函数的函数
13
})();
14
}
15
16
callerTest.goodbye =
function
(userName, userName2) {
17
alert(userName +
" 向 "
+ userName2 +
" 说再见."
);
18
};
19
20
calleeTest();
21
callerTest();
22
</script>
原文链接:Www.chajian8.com/311.html- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- JavaScript apply、call、caller、callee、bind使用方法与区别分析
- 谈谈javascript的Function中那些隐藏的属性/方法:caller/callee/apply/call/bind
- callee、caller、call、apply、bind这些方法的含义和使用
- 详解 Javascript callee,caller , call, apply
- 理解Javascript的caller,callee,call,apply区别
- javascript内的caller callee call apply详解
- javascript的caller,callee,call,apply
- 理解JavaScript的caller,callee,call,apply
- 理解JavaScript的caller,callee,call,apply
- 理解JavaScript的caller,callee,call,apply
- javascript的caller,callee,call,apply概念
- StarUML中时序图添加小人
- unity鼠标跟随(ITween)
- DevExpress教程
- iOS开发 最新-获取硬件设备型号
- Remove Duplicates from Sorted Array II
- JavaScript方法call,apply,caller,callee,bind的使用详解及区别
- JW Player 现在支持 Azure 媒体服务
- 杨辉三角
- 突击Mercurial SCM(HG)2---当前状态
- REMOVE NTH NODE FROM END OF LIST
- Linux笔记_初学_001
- PHP使用程序代码可视编辑测试
- 最近的一些学习和科研的状况
- Socket.io在线聊天室