Heim  >  Artikel  >  Web-Frontend  >  Eine kurze Diskussion über die Verwendung von call(), apply() und bind() in Javascript_Javascript-Kenntnissen

Eine kurze Diskussion über die Verwendung von call(), apply() und bind() in Javascript_Javascript-Kenntnissen

WBOY
WBOYOriginal
2016-05-16 16:03:11838Durchsuche

Die beiden Methoden call(thisObj, arg1, arg2...) und apply(thisObj, [obj1, obj2...]) sind nicht vererbte Methoden, die in jeder Funktion enthalten sind

call(thisobj[, args]) und apply(thisobj[, args])

Der Effekt ist derselbe. Er ändert den this-Zeiger im Objekt, das gerade diese Methode verwendet, so, dass er auf das thisObj-Objekt in der aufrufenden Methode zeigt. Der Unterschied zwischen den beiden (der erste Parameter ist derselbe). Es wird in der Call-Methode übergeben. Die eingegebenen Parameter werden einzeln aufgelistet, und der zweite Parameter in der Apply-Methode ist ein Array

Es ist intuitiver, ein Beispiel zu nennen:

window.color='red';
var o={color:"blue"};
function sayColor(){
alert(this.color);
};
sayColor(); //red(全局函数,this是window)
sayColor.call(this);//red(调用call方法,指定对象是this,这里的this是window,没什么意义)
sayColor.call(window);//red(调用call方法,指定对象是window,没什么意义)
sayColor.call(o); //blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)
sayColor.apply(o);//blue (调用call方法,指定对象是o,所以this指代对象o,这里由原来的window指向了o)

Die bind()-Methode in ECMAScript5 ähnelt den ersten beiden Methoden. Die bind()-Methode erstellt eine Instanz einer Funktion und der Wert dieser Instanz wird an den an übergebenen Wert gebunden bind()-Funktion

Beispiel:

function a(y){
return this.x+y;
};
var o={x:1};
var g=a.bind(o);
g(2);//3

Aus dem Beispiel ist ersichtlich, dass Funktion a an Objekt o gebunden ist und eine neue Funktion g zurückgibt. Wenn g aufgerufen wird, wird Funktion a als Methode von Objekt o aufgerufen
Die bind()-Methode bindet eine Funktion an ein Objekt und gibt eine neue Funktion zurück. Alle in dieser neuen Funktion übergebenen Parameter werden an die gebundene Funktion übergeben.

Werfen wir einen Blick auf ihre Unterschiede

In JS werden diese drei verwendet, um den Zeiger dieses Objekts der Funktion zu ändern. Was sind die Unterschiede zwischen ihnen?
Bevor wir über die Unterschiede sprechen, fassen wir die Gemeinsamkeiten zwischen den drei zusammen:
1. Sie werden alle verwendet, um den Punkt dieses Objekts der Funktion zu ändern.
2. Der erste Parameter ist das Objekt, auf das dieser zeigt.
3. Sie können nachfolgende Parameter verwenden, um Parameter zu übergeben.
Was sind also ihre Unterschiede? Schauen wir uns zunächst ein Beispiel an.
              var xw = {
                       Name: „小王“,
Geschlecht Alter: 24,
Sagen Sie: function() {
Alert(this.name " , " this.gender " ,dieses Jahr " this.age);                                                                                                        }                 }
              var xh = {
                       Name: „小红“,
Geschlecht Alter: 18
                }
                    xw.say();
An sich gibt es nicht viel zu sagen. Bei der gezeigten Person muss es sich um Xiao Wang handeln, männlich, dieses Jahr 24.

So verwenden Sie die Say-Methode von xw, um die Daten von xh anzuzeigen.

Für Anrufe können Sie Folgendes tun:

Code kopieren

Der Code lautet wie folgt: xw.say.call(xh);

Um sich zu bewerben, können Sie Folgendes tun:

Code kopieren

Der Code lautet wie folgt: xw.say.apply(xh);

Und für bind muss es so sein:

Code kopieren

Der Code lautet wie folgt: xw.say.bind(xh)();

如果直接写xw.say.bind(xh)是不会有任何结果的,看到区别了吗?call和apply都是对函数的直接调用,而bind方法返回的仍然是一个函数,因此后面还需要()来进行调用才可以。
那么call和apply有什么区别呢?我们把例子稍微改写一下。

        var xw = {
            name : "小王",
            gender : "男",
            age : 24,
            say : function(school,grade) {
                alert(this.name + " , " + this.gender + " ,今年" + this.age + " ,在" + school + "上" + grade);                
            }
        }
        var xh = {
            name : "小红",
            gender : "女",
            age : 18
        }

可以看到say方法多了两个参数,我们通过call/apply的参数进行传参。
对于call来说是这样的

复制代码 代码如下:

xw.say.call(xh,"实验小学","六年级");      

而对于apply来说是这样的

复制代码 代码如下:

xw.say.apply(xh,["实验小学","六年级郑州牛皮癣医院"]);

看到区别了吗,call后面的参数与say方法中是一一对应的,而apply的第二个参数是一个数组,数组中的元素是和say方法中一一对应的,这就是两者最大的区别。
那么bind怎么传参呢?它可以像call那样传参。

复制代码 代码如下:

xw.say.bind(xh,"实验小学","六年级")();

但是由于bind返回的仍然是一个函数,所以我们还可以在调用的时候再进行传参。

复制代码 代码如下:

xw.say.bind(xh)("实验小学","六年级");

以上所述就是本文的全部内容了,希望大家能够喜欢、

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn