javascript中应用、调用和绑定的使用
申请,电话
在Javascript中,调用和应用程序是为了改变函数的运行时上下文(上下文),换句话说,就是在函数体中改变这个方向。
Javascript的一个特点是有定义上下文和运行时上下文和上下文可以更改等概念。
首先给你一个代码示例列表。
函数(水果){ }
fruits.prototype = { {
颜色:红色
表示:函数(){
console.log(我的色彩+这个颜色);
}
}
苹果新水果;
Apple.say(); / /我的颜色是红色的
但是,如果我们有一个对象,香蕉=颜色:黄},我们不想重新定义它的方法,那么我们可以通过调用或应用来使用苹果说方法。
香蕉= {
颜色:黄色
}
apple.say.call(香蕉); / /我的颜色是黄色的
apple.say.apply(香蕉); / /我的颜色是黄色的
所以,我们可以看到调用和动态变化这一点,当一个对象没有一个方法(香蕉在栗子不说的方法),但另一个是(苹果在栗子说的方法),我们可以使用调用或应用方法与其他对象操作。
应用与调用的区别
对于应用程序和调用二,效果是完全相同的,但是接受参数的方式是不一样的:
功函数(arg1,arg2 =功能){
};
你可以这样称呼它如下:
func.call(这arg1,arg2);
Func.apply(,{ arg1,arg2 })
如果这是你想指定的上下文,它可以是任何Javascript对象(一切都是对象,Javascript),需要在序列参数传递,则将参数数组中。 U3000 U3000
在Javascript中,函数的参数数不是固定的,所以如果条件合适,在参数清晰时调用。
当你不确定的时候,使用应用程序,然后将参数推送到数组中。当参数的数量不确定时,函数也可以通过参数数组遍历。
为了巩固和加深记忆,下面列出了一些常用用法。
1。除了数组之间
VaR array1 = { 12,foo
VaR array2 = {无名氏
Array.prototype.push.apply(array1,array2);
/ * 2 = { 12,foo,{名称乔},2458,DOE,555, 100 }。
2。获取数组中的最大值和最小值。
var数字= { 5, 458, 120,- 215 };
无功maxinnumbers = math.max.apply(数学、数字), / / 458
maxinnumbers = math.max.call(数学,5, 458, 120,215); / / 458
数字本身没有MAX方法,但马思有它,我们可以通过调用或应用来使用它的方法。
三.确认它是一个数组(如toString()方法没有被改写)
FunctionisArray(obj){
返回object.prototype.tostring.call(obj)={ }对象数组;
}
4。类(伪)数组的数组方法
无功domnodes = array.prototype.slice.call(document.getelementsbytagname(*)));
有一种称为Javascript对象结构伪数组。特别是,争论的对象也被称为相对应的,document.childnodes等等。他们返回列表对象伪阵列。我们不能应用的推动,流行,在阵列的其它方法。
但我们可以变换成一个真正array.prototype.slice.call数组对象的长度属性,使domnodes可以适用于所有的方法在阵列。
深刻理解使用和调用的用法
下面是对应用程序和调用的更深入的理解。
日志的方法是定义允许它作为一个console.log代理的方法。常见的解决方案是:
函数日志(MSG){
console.log(MSG);
}
日志(1);1
log(1,2); / 1
上述方法可以解决最基本的需求,但当传入参数的数量不确定时,上述方法是无效的,您可以考虑使用或调用这个时间,注意不确定这里引入了多少参数,所以使用应用程序是最好的方法,如下所示:
函数日志(){
console.log.apply(控制台、参数);
};
日志(1);1
日志(1,2); / / 1 2
下一个要求是为每个日志消息添加一个(应用)退出,例如:
日志(Hello World)
如何做是优雅的。在这个时候,我们需要考虑的参数是一个伪阵,将其转化到array.prototype.slice.call标准阵列,然后阵列的方法不换位。
函数日志(){
var args = array.prototype.slice.call(参数);
args.unshift('('(APP));
console.log.apply(控制台,args);
};
绑定
表示应用和调用,然后讨论绑定。绑定()方法非常类似于应用和调用,并且可以在函数体中改变这个方向。
MDN:绑定()方法会创建一个新的功能叫做绑定功能,调用绑定的函数时,创建成绑定绑定功能()的第一个参数为本,来绑定(二)参数和后期的方法与参数绑定函数本身按照顺序为原函数调用原有的功能。
直接去看看如何使用它。在常见的单体模式,我们通常用_this,,自我等保存,所以我们可以继续把它改变上下文之后。喜欢这uff1a
var { { { {
酒吧:1,
EventBind:函数(){
无功_this =这;
$('。someclass '),(听到咔哒声,功能(事件){ {)
对事件进行操作
console.log(_this。酒吧); / / 1
});
}
}
因为Javascript的独特机制,从eventbind上下文的变化:功能({ })$('。someclass '),(听到咔哒声,功能(事件){ })。上面的变量保存起来很有用,没有问题。当然,使用绑定()可以更优雅地解决问题。
var { { { {
酒吧:1,
EventBind:函数(){
$('。someclass '),(听到咔哒声,功能(事件){ {)
对事件进行操作
console.log(这条); / / 1
}绑定(这个);
}
}
在上面的代码中,绑定()创建一个函数。当单击事件必须被调用时,它的关键字将被设置为传入值(这里是调用绑定()时引入的参数)。因此,在这里,我们将所需的上下文(这个事实)绑定到绑定()函数。然后,当回调函数被执行时,这指向富对象:
函数(){()
(这console.log。x);
}
var { { { {
X:3
}
(bar);未定义的
VAR函数= bar.bind(Foo);
函数(3);
这里我们创建一个新函数。当使用绑定()创建绑定函数时,当它被执行时,当我们调用bar()时,它将被设置为,而不是全局范围。
有一个有趣的问题,如果连续绑定()()两次,或者三连续()三次,输出值是多少喜欢这uff1a
函数(){()
(这console.log。x);
}
var { { { {
X:3
}
var = {
X:4
}
VAR函数= bar.bind(Foo)Bind(SED);
(函数);
VaR FIV = { {
X:5
}
VAR函数= bar.bind(Foo)。Bind(SED)Bind(FIV);
(函数);
答案是,两次仍然是3,而不是预期的4和5。原因是在Javascript中,多个绑定()是无效的。更深层次的原因,(绑定)实现,使用调用/绑定的内部包中的等效函数(第二个)相当于重新包装第一个绑定(),所以在两个绑定无效之后。
应用、调用和绑定的比较
那么,应用程序、调用和绑定三之间有什么异同呢何时使用应用、调用以及何时使用绑定:
var obj = { {
X:81,
};
var { { { {
GetX:函数(){
返回这个;
}
}
console.log(foo.getx.bind(obj)()); / / 81
console.log(foo.getx.call(obj)); / / 81
console.log(foo.getx.apply(obj)); / / 81
三个输出都是81,但注意使用绑定()方法,他在括号后面。
也就是说,不同的是,当您想更改上下文而不是立即执行上下文时,使用绑定()方法,但是当回调执行时,应用调用将立即执行该函数。
再次总结:
应用程序、调用和绑定三都是用于改变函数的对象的所有指向。
应用程序、调用和绑定三的第一个参数是指向该对象的对象,也就是要指定的上下文;
应用、调用和绑定的三个用户可以使用下面的参数传递参数。
绑定是返回到相应函数的函数,它很容易稍后调用;立即调用应用程序和调用。
好了,这篇文章讲述了应用,调用,绑定在javascript模型中的使用教程,到了最后的介绍,希望大家喜欢它。