Maison > interface Web > js tutoriel > le corps du texte

Une brève discussion sur l'utilisation de call(), apply() et bind() dans les compétences javascript_javascript

WBOY
Libérer: 2016-05-16 16:03:11
original
847 Les gens l'ont consulté

Les deux méthodes call(thisObj, arg1, arg2...) et apply(thisObj, [obj1, obj2...]) sont des méthodes non héritées incluses dans chaque fonction

appelez(thisobj[, args]) et appliquez(thisobj[, args])

L'effet est le même. En termes simples, il modifie le pointeur this dans l'objet utilisant actuellement cette méthode pour pointer vers l'objet thisObj dans la méthode appelante. La différence entre les deux (le premier paramètre est le même) est la suivante. il est passé dans la méthode call. Les paramètres saisis sont listés un par un, et le deuxième paramètre dans la méthode apply est un tableau
.

Il est plus intuitif de donner un exemple :

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)
Copier après la connexion

La méthode bind() dans ECMAScript5 est similaire aux deux premières méthodes. La méthode bind() créera une instance d'une fonction, et la valeur de cette instance sera liée à la valeur transmise au fonction bind()

Exemple :

function a(y){
return this.x+y;
};
var o={x:1};
var g=a.bind(o);
g(2);//3
Copier après la connexion

On peut voir dans l'exemple que la fonction a est liée à l'objet o et renvoie une nouvelle fonction g Lorsque g est appelée, la fonction a sera appelée comme méthode de l'objet o
. La méthode bind() lie une fonction à un objet et renvoie une nouvelle fonction. Tous les paramètres passés dans cette nouvelle fonction seront transmis à la fonction liée.

Jetons un œil à leurs différences

En JS, ces trois éléments sont utilisés pour changer le pointeur de l'objet this de la fonction. Quelles sont les différences entre eux.
Avant de parler des différences, résumons les similitudes entre les trois :
1. Ils sont tous utilisés pour changer le point de l'objet this de la fonction.
2. Le premier paramètre est l'objet vers lequel il pointe.
3. Vous pouvez utiliser les paramètres suivants pour transmettre des paramètres.
Alors, quelles sont leurs différences ? Prenons d’abord un exemple.
             var xw = {
                       nom : "小王",
genre Âge : 24,
Dites : function() {
alert(this.name " , " this.gender " , cette année " this.age );                                                                                                           }                 }
             var xh = {
                       nom : "小红",
genre Âge : 18 ans
                }
                    xw.say();
Il n'y a pas grand chose à dire en soi. La personne représentée doit être Xiao Wang, un homme de 24 ans cette année.

Alors, comment utiliser la méthode say de xw pour afficher les données de xh.

Pour appeler, vous pouvez faire ceci :

Copier le code

Le code est le suivant : xw.say.call(xh);

Pour postuler, vous pouvez faire ceci :

Copier le code

Le code est le suivant : xw.say.apply(xh);

Et pour lier, ça doit être comme ça :

Copier le code

Le code est le suivant : 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
        }
Copier après la connexion

可以看到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)("实验小学","六年级");

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

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal