Explication détaillée des fonctions appliquées et appelées dans JS

La différence entre apply et call

La spécification ECMAScript définit deux méthodes, call et apply, pour toutes les fonctions. Elles sont largement utilisées et leurs fonctions sont exactement les mêmes, à l'exception de. passer des paramètres. Le formulaire est juste différent. La méthode

apply()

apply passe deux paramètres : l'un est l'objet en tant que contexte de fonction et l'autre est un tableau composé de paramètres de fonction.

var obj = {
    name : 'linxin'}function func(firstName, lastName){
    console.log(firstName + ' ' + this.name + ' ' + lastName);}func.apply(obj, ['A', 'B']);    // A linxin B

Comme vous pouvez le voir, obj est l'objet utilisé comme contexte de fonction, et cela dans la fonction func pointe vers l'objet obj. Les paramètres A et B sont placés dans le tableau et transmis à la fonction func, correspondant respectivement aux éléments de liste du paramètre func.

call( )

Le premier paramètre de la méthode call est également l'objet du contexte de la fonction, mais ce qui est transmis plus tard est une liste de paramètres au lieu d'un seul tableau.

var obj = {
    name: 'linxin'}function func(firstName, lastName) {
    console.log(firstName + ' ' + this.name + ' ' + lastName);}func.call(obj, 'C', 'D');       // C linxin D

En comparant apply, nous pouvons voir la différence. C et D sont transmis à la fonction func en tant que paramètres séparés au lieu d'être placés dans un tableau.

Il n'y a pas lieu de s'inquiéter de savoir quand utiliser quelle méthode. Si vos paramètres existent déjà dans un tableau, utilisez naturellement apply. Si les paramètres sont dispersés et n'ont aucune corrélation entre eux, utilisez call.

Utilisation de apply et call

1 Changez ceci pour pointer vers

var obj = {
    name: 'linxin'}function func() {
    console.log(this.name);}func.call(obj);       // linxin

Nous savons que le premier paramètre de la méthode d'appel est. en tant qu'objet Contexte de fonction, obj est passé en paramètre à func, et ceci dans la fonction pointe vers l'objet obj. La fonction func ici est en fait équivalente à

function func() {
    console.log(obj.name);}

2 Emprunter des méthodes à d'autres objets

Regardons d'abord l'exemple

var Person1  = function () {
    this.name = 'linxin';}var Person2 = function () {
    this.getname = function () {
        console.log(this.name);
    }
    Person1.call(this);}var person = new Person2();person.getname();       // linxin

De ce qui précède, nous voyons. que Person2 L'objet instancié person obtient le nom dans Person1 via la méthode getname. Parce que dans Person2, la fonction de Person1.call(this) est d'utiliser l'objet Person1 au lieu de l'objet this, alors Person2 possède toutes les propriétés et méthodes de Person1, ce qui équivaut à Person2 héritant des propriétés et méthodes de Person1.

3. Appel de fonctions

Les méthodes apply et call entraîneront l'exécution immédiate de la fonction, elles peuvent donc également être utilisées pour appeler des fonctions.

function func() {
    console.log('linxin');}func.call();            // linxin

La différence entre call et bind

Une méthode appelée bind a été étendue dans EcmaScript5, qui n'est pas compatible avec les versions inférieures d'IE. C'est très similaire à call. Il accepte deux parties de paramètres. La première partie du paramètre est l'objet comme contexte de fonction, et la deuxième partie du paramètre est une liste qui peut accepter plusieurs paramètres.
Les différences entre eux sont les suivantes.

1.bind renvoie une fonction.

var obj = {
    name: 'linxin'}function func() {
    console.log(this.name);}var func1 = func.bind(obj);func1();                        // linxin

la méthode bind ne sera pas exécutée immédiatement, mais renverra une fonction qui change le contexte. Cependant, cela dans la fonction d'origine func n'a pas été modifié et pointe toujours vers la fenêtre d'objet globale.

2. Utilisation des paramètres

function func(a, b, c) {
    console.log(a, b, c);}var func1 = func.bind(null,'linxin');func('A', 'B', 'C');            // A B Cfunc1('A', 'B', 'C');           // linxin A Bfunc1('B', 'C');                // linxin B Cfunc.call(null, 'linxin');      // linxin undefined undefined

l'appel transmet le deuxième paramètre et les suivants comme paramètres réels de la méthode func, tandis que les paramètres réels de la méthode func1 sont en fait basés sur la liaison. sur les paramètres, continuez.

在低版本浏览器没有 bind 方法，我们也可以自己实现一个。

if (!Function.prototype.bind) {
    Function.prototype.bind = function () {
        var self = this,                        // 保存原函数
            context = [].shift.call(arguments), // 保存需要绑定的this上下文
            args = [].slice.call(arguments);    // 剩余的参数转为数组
        return function () {                    // 返回一个新函数
            self.apply(context,[].concat.call(args, [].slice.call(arguments)));
        }
    }}

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!