您的位置：首页 > 移动开发

JavaScript方法call,apply,caller,callee,bind的使用详解及区别

2015-11-04 09:29 1051 查看
一、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
                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航