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

不言
リリース: 2019-03-30 09:15:39
転載
2994 人が閲覧しました

この記事では、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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:segmentfault.com
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!