javascriptのthisを深く把握することは私たちに何をするのに役立ちますか?
2431 ワード
これは何ですか.
Javascript使用方法 方法では、この方法の を指す.関数では、グローバルオブジェクト です.厳密モードでは、関数では である.単独で使用する場合、グローバルオブジェクト である.イベントでは、イベントをトリガするターゲットオブジェクト を指す.
異なる実行モードでの差異化
JAvascriptの
非厳密モードでは、
まず,
備考:この文章は作者のオリジナルに属して、転載して出典を明記してください.参照:JavaScriptの深いcallとapplyのシミュレーションの実現
Javascript
this
キーワードは、使用する場所と呼び出し方法に応じて異なる値を持つオブジェクトを指します.
window
undefined
window
e.target
異なる実行モードでの差異化
JAvascriptの
this
は他のプログラミング言語とは異なり、厳格モードと非厳格モードでは値が異なり、以下に例を挙げる.//
function foo() {
return this
}
console.log(foo() === window.foo()) //true
//
;('use strict')
function foo() {
return this
}
console.log(foo()) // undefined
console.log(window.foo()) // window
非厳密モードでは、
foo
は、関数呼び出しとしてもメソッド呼び出しとしても、内部this
の指向はwindow
である.厳密モードでは、foo
が関数として呼び出されたときのthis
の値はundefined
であり、window
のオブジェクトのメソッドとして呼び出されたときの値は、呼び出されたwindow
のオブジェクトを指す.コード書きの意味化から見ると、このようなthis
の指向はより合理的であり、javascript
の実行環境が徐々に厳格なモードに近づいている原因でもあり、言語面から予想に合わない実行結果を排除している.this
手動実装関数を活用したcall
およびapply
this
の多くの特性を理解した後、私たちはそれを利用してどんな面白い機能を実現することができますか?そう、関数を手動で実装するcall
とapply
の方法です.まず,
es5
のcall
法がどのような機能を実現しているかを知る必要があり,その最初のパラメータは呼び出し関数のthis
バインドであり,残りのパラメータは実行関数に実パラメータとして伝達される.この機能を理解すれば、私たちはそれを実現することができます.Function.prototype._call = function _call(context, ...args) {
if (context == undefined) {
context = window || global
} else {
context = Object(context)
}
// `context`
context.handler = this
const result = context.handler(...args)
delete context.handler
return result
}
//
const value = 10
const foo = {
value: 1,
}
function print(arg) {
console.log(this.value)
return arg
}
const retVal = print._call(foo, 2) // 1
console.log(retVal) // 2
_call
関数の最初のパラメータをthis
として実行関数に伝達するために、ここでは_call
関数の内部でトランスフォームを行い、実行すべき関数をcontext
オブジェクトの1つのメソッドとして呼び出すことで、関数呼び出し時のthis
の指向を変更する問題が実現される.テスト後の実行結果も私たちの予想に合っています.同理apply
関数の実装も同様であり,伝達されたパラメータを処理するだけでよいが,ここでは実証しない.備考:この文章は作者のオリジナルに属して、転載して出典を明記してください.参照:JavaScriptの深いcallとapplyのシミュレーションの実現