Introduction détaillée des fonctions apply() et call()

Cet article vous apporte une introduction détaillée aux fonctions apply() et call(). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

Introduction à l'application et à l'appel des fonctions

Quand il s'agit d'appliquer et d'appeler, il faut d'abord parler de leurs origines avec les fonctions

Les fonctions Javascript sont à la fois des objets et des objets

Ce n'est pas différent des autres objets JavaScript. Et chaque fonction contient deux méthodes non héritées apply() et call(), qui peuvent toutes deux appeler indirectement la fonction

, par exemple :

function f() {
    console.log(1);
}
f.call(); //1
f.apply(); //1

et les deux méthodes autorisent cela de manière explicite. valeur après l’appel de fonction spécifié.

Concernant la valeur de this, puisque la valeur de this est confirmée lors de l'entrée dans l'étape de contexte d'exécution, la valeur de this prête à confusion. Mais nous pouvons spécifier explicitement la valeur requise lorsque la fonction est appelée via apply() et call().

Alors, à quoi servent les méthodes apply et call ?

N'importe quelle fonction peut se voir attribuer cette valeur lorsqu'elle est appelée, et appelée en tant que méthode de l'objet pointé par ceci.

Cela signifie que n'importe quelle fonction peut être appelée par n'importe quel objet. C'est le but ultime des méthodes apply et call.

Prenons un exemple d'utilisation pour comprendre

function Animal() {};
Animal.prototype = {
    constructor: Animal,
    other: function() {
        console.log('这是一只' + this.name);
    }
}
var animal = new Animal();
//定义一个对象
var dog = {
    name: '狗'
};

//我的dog对象想使用Animal函数的other方法怎么办，使用call或apply
animal.other.call(dog);
animal.other.apply(dog);

Dans ce qui précède, nous utilisons animal.other (pensez à ce que c'est, oui, c'est aussi une fonction essentiellement) comme dog Object appels de méthode. Ensuite, nous en utilisons quelques-uns pratiques.

//设置一个类数组对象
var arrLike = {
    0: '我是apply',
    1: '我是call',
    length: 2
}

//将Arrar的slice函数的this显式指向arrLike,并将0作为参数传入slice函数
var newArr = Array.prototype.slice.call(arrLike, 0);
//等价于 
arrLike.slice(0);
console.log(newArr);

Pour apply() et cal(), tous les premiers arguments qui leur sont transmis deviendront la valeur de this, 哪怕传入的实参是原始值, null, undefined . Et si le premier paramètre réel transmis est indéfini ou nul, il sera remplacé par l'objet global en ES3 et en mode non strict, et 其它的原始值则会被相应的包装对象所替代.

En termes simples, Js ne se soucie pas du premier paramètre de apply/call, la fonction sera toujours appelée, mais savoir si l'appel signalera une erreur est une autre affaire.

var str = '我是一个函数';
//将字符串传入,但是String对象无法调用slice属性 报错
Array.prototype.pop.call(str);

Afin de se souvenir en profondeur de ces deux méthodes et quand utiliser ces deux méthodes, énumérez quelques usages courants

Tout d'abord, pour l'instant, les différences entre ces deux méthodes La différence de performances est presque négligeable, alors comment les utiliser ?

La méthode apply() est adaptée pour passer le deuxième paramètre dans l'ordre et les paramètres sont incertains. Utilisez la méthode apply, comme une fonction Le tableau-. comme objet d'arguments est très approprié pour passer en paramètres.

function A(a, b, c) {
    console.log(a, b, c);
}

var fn = (function(func, b, c) {
    var args = arguments;
    return () => {
        func.apply(null, args);
    }
}(A, 66, 99));

fn();

Pour un autre exemple, ajoutez des éléments au tableau

var arr1 = [1, 2, 3];
var arr2 = [66, 99, 131];
Array.prototype.push.apply(arr1, arr2);
console.log(arr1);

De même, passez le tableau arr2 en paramètre.

Pour les paramètres non ordonnés qui ne sont pas liés les uns aux autres, utilisez call()

pour obtenir les valeurs maximales et minimales du tableau

var arr = [0, 1, 2, 3, 4];

//获取最大数
var max1 = Math.max.apply(Math, arr),
    max2 = Math.max.call(Math, 0, 1, 2, 3, 4),

    //获取最小数
    min1 = Math.min.apply(Math, arr),
    min2 = Math.min.call(Math, 0, 1, 2, 3, 4);
console.log(max1, max2, min1, min2);

arr lui-même n'a pas de méthode mathématique, mais nous pouvons utiliser call ou apply pour utiliser sa méthode

Juger le type spécifique de l'objet

//验证对象的具体类型
var arr = [];
var type = Object.prototype.toString.call(arr);
console.log(type);// [object Array]

avant utilisation Les résultats obtenus lors de typeof sont tous des Objets, et il est impossible de déterminer de quel type il s'agit. Vous pouvez donc utiliser Object.prototype.toString.call() pour obtenir le type spécifique. Bien sûr, le principe est que la méthode toSting() n'a pas été remplacée

Convertir l'objet de type tableau en un véritable tableau, nous utilisons généralement Array.prototype.slice.call( ) à convertir

var arrLike = {
    length: 3,
    0: '值1',
    1: '值2',
    2: '值3'
}
var newArr = [].__proto__.slice.call(arrLike);
var type = Object.prototype.toString.call(newArr);
console.log(newArr, type); //[ '值1', '值2', '值3' ] '[object Array]'

Bien sûr, splice,concat也可以将类数组对象转数组.

Vulgarisons-le ici类数组对象.
Accéder à l'élément via l'index et avoir l'attribut length
En d'autres termes, deux conditions doivent être remplies, 1. Utiliser le numéro de série pour définir l'attribut, 2. Avoir l'attribut length, la valeur de l'attribut est la nombre d'éléments
Lors de l'utilisation du numéro de série Lors de la définition des attributs, il est recommandé de définir les attributs dans l'ordre en commençant par 0. Sinon, l'élément du tableau sera vide

var arrLike = {
    length: 3,
    0: '值1',
    1: '值2',
    3: '值3'
}
var newArr = [].__proto__.slice.call(arrLike);
var type = Object.prototype.toString.call(newArr);
console.log(newArr, type); //[ '值1', '值2', empty] [object Array]

Cet article est par ici Pour un contenu plus passionnant, vous pouvez faire attention à la colonne Tutoriel vidéo JavaScript du site Web PHP chinois !

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!