1.はじめに：まず、apply（）、apply（）、call（）は、すべての関数またはオブジェクトが持つ継承されないメソッドであるという基本的な知識を理解する必要があります。
2.機能：これの方向を変えるために使用され
ます。3。以下では、パラメータがある場合とない場合の一般的なアプリケーションを紹介します。
まず、適用をよく理解して適用したいと思います。これは基本的にこれを理解しています。
これの3つのポイント：1。これが存在する関数の直接の呼び出し元をポイントします。2。新規の場合、新規から出てくるオブジェクトをポイントします。3。イベントの現在の開始オブジェクトをポイントします。
要約：これはオブジェクト、
なぜこれを使用するのですか？このポイントは単一ではないため、変更することができ、将来の呼び出し元を置き換えることができます。固定関数の場合、将来、異なるインスタンスを呼び出して異なる結果を得るのが便利です。これがないと、誰が呼び出した結果も異なります。将来的には同じになり、要件を満たしません。
最初に他の人が書いたapplyの理解を見て、それを読んだ後にもう一度私を見てください。他の
新人チュートリアルから多くの恩恵を受けるでしょう。
function Parent(name,age){
this.name=name
this.age=age
console.log(this)
console.log(this.name,this.age)
}
function Children(name,age,height){
console.log(this,arguments)
// Parent.apply(this,[name,age,height])
// Parent(name,age)
this.height=height
}
let lisi=new Children("李四",12,170)
console.log(lisi.name,lisi.age,lisi.height)
上記のコードと出力から、子のこれは子オブジェクトを参照し、引数は渡されたパラメーターであることがわかります。子にはthis.name = nameとthis.age = ageがないため、出力lisi.nameとlisi.ageはどちらも未定義です
。es5では、親のプロパティを継承する必要があります。つまり、親のthis.name = nameとthis.age = ageの2行のコード。通常、最初に考えるのは、子の親を直接呼び出すことです。実現可能性を試してみましょう。
function Parent(name,age){
this.name=name
this.age=age
console.log(this)
console.log(this.name,this.age)
}
function Children(name,age,height){
// console.log(this,arguments)
// Parent.apply(this,[name,age,height])
Parent(name,age)
this.height=height
}
let lisi=new Children("李四",12,170)
console.log(lisi.name,lisi.age,lisi.height)
結果が出力されます。これは親でウィンドウを指します。子で親を呼び出すと、名前と年齢の2つのパラメータを受け取ることができますが、Li Siと12は実際に親で出力されますが、彼には親しかないため、インスタンスでは定義されていません。では、親でこれら2行のコードを使用する方法、またはこれら2つのプロパティを継承する方法を教えてください。親を呼び出して、これを親で子オブジェクトを指すようにする方法も同じです。もちろん、これの方向を変える必要があるので、apply、call、bindなどを考えることができます。ここではapplyを使用しますが、他の方法も可能です。
function Parent(name,age){
this.name=name
this.age=age
console.log(this)
console.log(this.name,this.age)
}
function Children(name,age,height){
// console.log(this,arguments)
Parent.apply(this,[name,age,height])
// Parent(name,age)
this.height=height
}
let lisi=new Children("李四",12,170)
console.log(lisi.name,lisi.age,lisi.height)
次に、出力結果を見てください。インスタンスオブジェクトlisiに「LiSi」と12があり、親のこれの出力結果は子オブジェクトです。これは、必要な要件を満たしています。Parent.apply（this、[name、age、height]）は子で実行され、Parent.apply（this、arguments）とParent.apply（this、[name、age、height]）は同じで、違いは1つです。子パラメーターの変更方法に応じて、パラメーターを自動的に受け入れることができます。後者は、パラメーターを手動で設定します。これは、this.name = name、this.age = ageの2行のコードを実行するのと同じです。そして、これは子供たちを指しています。
スロットルとアンチシェイク機能では、fun.apply（this、arguments）のような文が表示されます。
<div>
账户：<input type="text" id="myinput"><span id="tip"></span>
</div>
<script>
function debounce(fun,wait=300){
let timeout=null;
return function(){
if(timeout){
clearTimeout(timeout)
}
timeout=setTimeout(()=>{
fun.apply(this,arguments)
// fun()
},wait)
}
}
let span=document.getElementById('tip')
function testUname(){
span.innerHTML="用户名合法"
}
let input=document.getElementById('myinput')
addEventListener('input',debounce(testUname,1000))
</script>
これが手ぶれ防止関数です。上記の経験から、fun.apply（this、arguments）の目的を知ることができます。デバウンスのreturn関数でこれをポイントするのは楽しいことです。 return関数を返します。これは、return関数を直接呼び出すオブジェクトを指します。これは、returnによって返された関数を直接呼び出すためのウィンドウです。したがって、これは実際には役に立ちません。これを記述する理由は、引数が渡されたパラメータ配列であり、数値をfnに無期限に戻すことができるためです。通常、パラメータを持つ関数がある場合、fn（ 'parameter 1'、 'parameter 2'、...）//ここでの省略記号は通常の構文ではありませんが、不確定な構文を意味します。このとき、これをfnで作成すると、オブジェクトobjを指すようになります。次に、書き込み方法はfn.apply（obj、['parameter 1'、 'parameter 2'、...]）です。ここで、省略記号は正規文法ではなく、不確実な数を意味します。次の例を見てください。
// var name='zhangsan'//let不上升到window
window.name='zhangsan'
function test2(num){
console.log(this.name)
console.log(num)
}
let obj={
name:'lisi'
}
test2.apply(obj,[4])//lisi，4
test2に防振を持たせ、1にパラメーターを渡すと。このようにdebounce（test2）（6）// zhangsan 6と呼びます。
これは、test2のように、将来アンチシェイクが行われる関数にパラメーターがいくつあるかわからないためです。また、引数が不確実なパラメータを受け入れる可能性があることもわかっています。しかし、この不確実なパラメーターをfnに渡します。このように書くことはできますか、fn（argument）、明らかにそうではありません。fnは、fn（['parameter 1'、 'parameter 2'、...]）ではなくfn（ 'parameter 1'、 'parameter 2'、...）の形式を受け入れるためです。では、どうすればよいかというと、applyメソッドはたまたまこのスタイルを受け入れると思います。したがって、fn.apply（this、arguments）を使用することは論理的です。
したがって、次のコードは複数のパラメーターを試します。
function debounce(fn){
let timeout=null
return function (){
fn.apply(this, arguments);
}
}
// var name='zhangsan'//let不上升到window
window.name='zhangsan'
function test2(num1,num2,num3){
console.log(this.name)
console.log(num1,num2,num3)
}
let obj={
name:'lisi'
}
test2.apply(obj,[4])//lisi，4
debounce(test2)(6,2,4)//zhangsan 6 2 4
この時点で、それを整理しましょう。2つの問題があります。①将来的にアンチシェイクが必要な関数のパラメータがいくつあるかわかりません。引数を使用して受け入れます。②アンチシェイクが必要な関数に引数を戻す方法。applyはちょうどいいアプリケーションです。そのような考えがあります。es6を使用することを想像できます...また、パラメータをfnに簡単に渡すことができます。コードは次のように表示されます。
function debounce(fn){
let timeout=null
return function (){
// fn.apply(this, arguments);
fn(...arguments)
}
}
// var name='zhangsan'//let不上升到window
window.name='zhangsan'
function test2(num1,num2,num3){
console.log(this.name)
console.log(num1,num2,num3)
}
let obj={
name:'lisi'
}
test2.apply(obj,[4])//lisi，4
debounce(test2)(6,2,4)//zhangsan 6 2 4
結果は同じなので、それは私たちの考えを証明しています。そのため、将来的には、以下のより短く、より簡潔で、理解しやすい文章を使用できるようになります。