ホームページ > 記事 > ウェブフロントエンド > jsでのapplyとcallの使用法
この記事では主に js での apply と call の使い方を紹介します。必要な方は参考にしてください。ECAMScript3 の Function には 2 つのメソッドが定義されています。 Function.prototype.call と Function.prototype.apply です。 applyとcallの使い方についてはこちらの記事で詳しく紹介していますので、必要に応じてご参照ください。
はじめにcallとapply
はどちらもコンテキスト、つまり関数実行時のコンテキストを変更するために存在します。つまり、関数本体内のthisのポインタを変更するということです。 call と apply
はまったく同じ機能を持ちますが、パラメーターの受け取り方法が異なります。
applyFunction.apply(obj,args)
メソッドは 2 つのパラメータを受け取ることができます: Function.apply(obj,args)
方法能接收两个参数:
obj:这个对象将代替Function类里this对象
args:这个是数组或类数组,apply方法把这个集合中的元素作为参数传递给被调用的函数。
call
call方法与apply方法的第一个参数是一样的,只不过第二个参数是一个参数列表
在非严格模式下当我们第一个参数传递为null或undefined时,函数体内的this会指向默认的宿主对象,在浏览器中则是window
var test = function(){ console.log(this===window); } test.apply(null);//true test.call(undefined);//true
用法
"劫持"别人的方法
此时foo中的logName方法将被bar引用 ,this指向了bar
var foo = { name:"mingming", logName:function(){ console.log(this.name); } } var bar={ name:"xiaowang" }; foo.logName.call(bar);//xiaowang
实现继承
function Animal(name){ this.name = name; this.showName = function(){ console.log(this.name); } } function Cat(name){ Animal.call(this, name); } var cat = new Cat("Black Cat"); cat.showName(); //Black Cat
在实际开发中,经常会遇到this指向被不经意改变的场景。
有一个局部的fun方法,fun被作为普通函数调用时,fun内部的this指向了window,但我们往往是想让它指向该#test节点,见如下代码:
window.id="window"; document.querySelector('#test').onclick = function(){ console.log(this.id);//test var fun = function(){ console.log(this.id); } fun();//window }
使用call,apply我们就可以轻松的解决这种问题了
window.id="window"; document.querySelector('#test').onclick = function(){ console.log(this.id);//test var fun = function(){ console.log(this.id); } fun.call(this);//test }
当然你也可以这样做,不过在ECMAScript 5的strict模式下,这种情况下的this已经被规定为不会指向全局对象,而是undefined:
window.id="window"; document.querySelector('#test').onclick = function(){ var that = this; console.log(this.id);//test var fun = function(){ console.log(that.id); } fun();//test }
function func(){ "use strict" alert ( this ); // 输出:undefined } func();
其他用法
类数组
这里把符合以下条件的对象称为类数组
1.具有length属性
2.按索引方式存储数据
3.不具有数组的push,pop等方法
常见类数组有 arguments,NodeList!
(function(){ Array.prototype.push.call(arguments,4); console.log(arguments);//[1, 2, 3, 4] })(1,2,3)
这样就往arguments中push一个4进去了
Array.prototype.push
このオブジェクトは Function クラスのこのオブジェクトを置き換えます
args:
これは配列または配列に似たもので、apply メソッドはこのコレクション内の要素をパラメーターとして呼び出された関数に渡します。callcallメソッドの最初のパラメータは、2番目のパラメータがパラメータリストであることを除いて
applyメソッドと同じです
非厳密モードでは、最初のパラメータがnull または未定義として渡されると、関数本体の this は、ブラウザーでは windowvar arr1=new Array("1","2","3"); var arr2=new Array("4","5","6"); Array.prototype.push.apply(arr1,arr2); console.log(arr1);//["1", "2", "3", "4", "5", "6"]
Usage
他の人のメソッドを「ハイジャック」するデフォルトのホストオブジェクトを指します thisfooのlogName
メソッドがbarによって参照される場合、thisはbar
(function(){ var maxNum = Math.max.apply(null,arguments); console.log(maxNum);//56 })(34,2,56);🎜実装の継承🎜🎜🎜🎜🎜
console.log(Object.prototype.toString.call(123)) //[object Number] console.log(Object.prototype.toString.call('123')) //[object String] console.log(Object.prototype.toString.call(undefined)) //[object Undefined] console.log(Object.prototype.toString.call(true)) //[object Boolean] console.log(Object.prototype.toString.call({})) //[object Object] console.log(Object.prototype.toString.call([])) //[object Array] console.log(Object.prototype.toString.call(function(){})) //[object Function]🎜🎜を指します🎜 実際の開発では、よく遭遇するこれは、誤って変更されたシーンを示しています。 🎜ローカルの 🎜fun🎜 メソッドがあります。 🎜fun🎜 が通常の関数として呼び出されるとき、 🎜fun🎜 内の 🎜this🎜 は 🎜window🎜 を指しますが、多くの場合、🎜#test🎜 ノードを指す必要があります。次のコード: 🎜🎜🎜rrreee🎜🎜🎜 🎜call,apply🎜を使用すると、この問題を簡単に解決できます🎜🎜🎜rrreee🎜🎜🎜 もちろん、これを行うこともできますが、🎜ECMAScript 5🎜の🎜strictでは🎜 モード、この場合、これはグローバル オブジェクトを指さないように規定されていますが、 🎜未定義: 🎜🎜🎜🎜rrreee🎜🎜🎜🎜rrreee🎜🎜🎜🎜その他の使用法🎜🎜🎜🎜🎜配列のような🎜🎜 🎜ここ、以下の条件を満たすオブジェクトは配列様と呼ばれます🎜🎜🎜1. length属性を持つ🎜🎜🎜2. 配列のpush、pop、その他のメソッドを持たない🎜🎜🎜。共通のクラス配列は 🎜arguments,NodeList!🎜🎜🎜🎜rrreee🎜🎜🎜 このように、🎜arguments🎜🎜🎜
Array.prototype.push
ページに 4 をプッシュすると、2 つの配列の結合を実現できます。 🎜🎜同じプッシュ このメソッドは配列へのプッシュを提供しませんが、 🎜push(param1, param,...paramN) を提供します🎜 したがって、apply を使用してこの配列を置き換えることもできます。つまり、 🎜🎜🎜rrreee🎜🎜 🎜は次のようにも理解できます。🎜 arr1🎜は🎜push🎜メソッドを呼び出し、パラメータは🎜apply🎜を通じて配列をパラメータリストのコレクションに変換することです。別の例は、最大値を見つけたいということです。クラス配列の値🎜🎜🎜🎜rrreee🎜🎜🎜🎜型を判断する🎜🎜🎜🎜rrreee🎜🎜🎜🎜🎜関連する推奨事項: 🎜🎜🎜JS での url、href、src の使用🎜🎜 🎜🎜これの分析例Jsで🎜🎜🎜🎜🎜🎜🎜🎜以上がjsでのapplyとcallの使用法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。