apply() 関数と call() 関数の詳細な紹介

この記事では、apply() 関数と call() 関数について詳しく説明します。これには一定の参考値があります。必要な友人は参照してください。お役に立てば幸いです。

関数の適用と呼び出しの概要

適用と呼び出しに関しては、まず関数の起源について話さなければなりません

Javascript 関数は両方ともオブジェクトです

他の JavaScript オブジェクトと何ら変わりはありません。各関数には 2 つの非継承メソッド apply() と call() が含まれており、どちらも関数

を間接的に呼び出すことができます。例:

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

そして、これら 2 つのメソッドそれぞれのメソッドで表示が可能になります。指定された関数呼び出し後の this 値。

thisの値については、実行コンテキストステージに入るときにthisの値が確定するため、わかりにくいです。ただし、apply() および call() を通じて関数が呼び出されるときに、必要な this 値を明示的に指定できます。

それでは、apply メソッドと call メソッドは何に使用されるのでしょうか?

任意の関数は、呼び出されるときにこの値を割り当てることができ、this が指すオブジェクトのメソッドとして呼び出すことができます。

つまり、任意の関数を任意のオブジェクトから呼び出すことができ、これが apply メソッドと call メソッドの最終目標です。

理解するために使用例を見てみましょう

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);

上記では、animal.other (これが何であるか考えてみてください。そう、本質的には関数です) を犬オブジェクトのメソッドとして使用しています。電話。

//设置一个类数组对象
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);

apply() と cal() の場合、それらに渡される最初の引数はすべて this の値になります、渡された引数が元の値であっても、null、未定義。そして、渡された最初の実パラメータが未定義または null の場合、ES3 および非厳密モードのグローバル オブジェクトに置き換えられ、他の元の値は対応するラッパー オブジェクトに置き換えられます。

平たく言えば、Js は apply/call の最初のパラメータが何であるかを気にしません。関数は引き続き呼び出されますが、呼び出しでエラーが報告されるかどうかは別の問題です。

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

これら 2 つのメソッドを深く覚え、どのような場合にこれら 2 つのメソッドを使用するかを説明するために、いくつかの一般的な使用法をリストします。

まず、今のところ、これら 2 つのメソッドのパフォーマンスの違いはほとんど無視されています。

apply() メソッドは、2 番目のパラメータを順番に渡すのに適しており、パラメータは不確かです。関数の引数などの apply メソッドを使用してください。この配列のようなオブジェクトパラメータとして渡すのに非常に適しています。

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();

別の例は、要素を配列に追加することです

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

同様に、arr2 配列をパラメーターとして渡します。

互いに関連性のない順序なしパラメータの場合は、call()

を使用して配列の最大値と最小値を取得します

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 自体には Math メソッドはありませんが、call または apply を使用してそのメソッドを使用できます。

オブジェクトの特定のタイプを決定します。

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

取得時期typeof を使用すると、結果はすべてオブジェクトであり、どの型であるかを判断することはできません。したがって、Object.prototype.toString.call() を使用して特定の型を取得できます。もちろん、toSting() メソッドがオーバーライドされていないことが前提です。

配列のようなオブジェクトを実際の配列に変換します。通常は Array.prototype.slice.call( ) を変換します

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]'

もちろん、splice,concat は配列のようなオブジェクトを配列に変換することもできます.

これは 配列のようなオブジェクトの普及です。
インデックスを介して要素にアクセスし、長さ属性を持つ
つまり、2 つの条件を満たす必要があります。1. シリアル番号を使用して属性を定義する。2. 長さ属性を持つ。属性値は要素の数である。
連番を使用する場合 属性を定義する場合は、0 から順に属性を定義することを推奨します。それ以外の場合、配列要素は空になります

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]

この記事はここで終了です。さらに興味深いコンテンツについては、PHP 中国語 Web サイトの JavaScript ビデオ チュートリアル 列に注目してください。

以上がapply() 関数と call() 関数の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。