この JS コードで Javascript スキルをどれくらい節約できますか

1. 適用例:

コードをコピー コードは次のとおりです:

var Mouse = function () {
// いいえ、これ = これです!
this.position = [0, 0];
if (document.addEventListener) {
document.addEventListener('mousemove', ? ); / /this.move?
} else if (document.attachEvent) {
document.attachEvent("onmousemove", ?); //this.move? 🎜>};
Mouse.prototype.move = function (arg1,arg2,event) {
event = window.event ||
var x =event.pageX,
y = イベント .pageY || イベント.offsetY;
this.position = [x, y];
マウス。プロトタイプ.log = function (arg1, arg2) {
console.log(arg1 "," arg2);
new Mouse();


上の「?」番号は何ですか? ドキュメントのmousemoveにmoveメソッドをバインドしたいのですが、この場合、Mouse.prototype.move これは Mouse オブジェクトを指しません。おそらく誰もがこの問題に遭遇することが多いと思いますが、もっと速くて簡単な方法はありますか? 答えは次のとおりです:
Function.prototype.bind( ) これは魔法のようなものですが、IE6、7、または 8 ではサポートされていません。次に行う必要があるのは、これを模倣することです。
もちろん、このような優れた方法を模倣する必要があります。以下は何もオリジナルのメソッドではありません。

コードをコピーします。


コードは次のとおりです。

(function () { var proxy = function (fn, target) { var proxy = function () { if (2 var privateArgs = Array.prototype.slice.call(arguments, 2);

//2 番目の [this, バイ​​ンドされたオブジェクト, パラメーター リスト] を取り出します

return function () {
var args = Array.prototype .slice.call(arguments);
-->ここでの引数は外部のものと同じではありません。
たとえば、arguments[ここでの移動関数の [object Event] は、このイベント内の e パラメーターです。
Array.prototype.unshift.apply(args, privateArgs);
-->gt;ネイティブ バインドと同じように実装されます。パラメータ形式は
//-> で、ここでは a=new Mouse();a.move(1,2); のようにプライベート パラメータが前に置かれます。 🎜>//この move メソッドにパラメータがない場合、つまり、prototype.move=fn(){arguments}、
//パラメータ、arguments.length=3、
//arguments[0] を渡しました。 =1,arguments[1] =2,arguments[2]=[オブジェクトイベント]. return fn.apply(target, args);
}
//ここが複雑な理由は次のとおりです。プロキシされる関数内の引数には直接アクセスできます。たとえば、プロキシ関数にパラメータを渡さず、
を直接使用します。//この方法では、引数にはネイティブの引数と同じオブジェクトが含まれます。 Function.prototype.bind,
//コードは次のとおりです。ここでのネイティブ バインドの引数が何なのか理解できないため、これが奥深いです。知っていれば、なぜ私が独自の引数をバインドするのかがわかるでしょう。 //これだけのことを行う主な目的は、プロキシしている関数内の引数を、function.prototype.bind の引数オブ​​ジェクトに含まれる内容と一致させることです。
}
return function () {
return fn .apply(target, argument);
}
}
return proxy.apply(null, argument)
}; /*ネイティブをサポートし、ネイティブを使用します*/
関数.prototype.bind = Function.prototype.bind ||
function (target ) { //ここでは、プロキシされる関数を指します
if (1 < argument.length) {
var args = Array.prototype.slice.call(arguments, 1); // パラメータを取り出します List
args.unshift(this, target) // この args は最終的に [this, バイ​​ンドされたオブジェクト, パラメータ リスト]
になります。 return proxy.apply(null, args);
-- 直接 proxy(args) を実行すると、args がプロキシ関数のパラメータになり、エラーが報告されます。ここでの主なタスクは、プロキシとパラメータがプロキシにどのように渡されるかだけを考慮します。パラメータがない場合は、
return proxy(this, target)--> だけを処理します。 return fn.apply(target, argument); これが 17 階の答えです
--> 誰もが 17 階と同じ間違いを犯すでしょう ここで引数オブジェクトが非常に複雑である理由。これは、プロキシ関数に渡され、引数オブジェクトが期限切れにならないようにするためのものです。
}
return proxy(this, target)
}); >

なぜ上記のコードでプロキシを返さなければならないのでしょうか? この方法で this.move.bind(this,1,2)() を呼び出すとすぐに実行されるからです。
上記のコードを使用すると、「?」というコードを簡単に実装できます。ここにどのようなコードを記述すればよいでしょうか。




をコピーします。コード


コードは次のとおりです:

if (document.addEventListener) {
document.addEventListener('mousemove', this.move.bind(this,1,2)); else if (document.attachEvent) {
document.attachEvent("onmousemove", this.move.bind(this,1,2));
}

イベントが発生するたびに追加する必要がありますか?メソッドの this は他のオブジェクトを指します。これは非常に単純ではありませんか?
上のコードを理解するのは少し難しいので、もっと単純にしてみましょう。

コードをコピー コードは次のとおりです:

var a = function () {
console.log (arguments[0]); //1
console.log(arguments[1]); //2
console.log(this.key1); // このようにパラメータをバインドすると、私のパラメータはネイティブバインドと同じようにリストできます、それは簡単です、
var b = {
key1: "value1"
}; , 1, 2)();


17 階のクラスメートのコードの間違いに反論します。これは多くの人が犯す間違いだと思います。コードは次のとおりです。 🎜>

コードをコピーします

コードは次のとおりです: Function.prototype.bind = function (target) { var self = this; return function () { return self.apply(target, argument) //ここに引数を渡すことはできません

}

}
var a = function () {
console.log(arguments.length); //このようにバインドすると、引数パラメータは無効になります
//arguments.length=0.
console.log(this. key1);
var b = {
key1: "value1"
a.bind(b, [1, 2], 3); //ここから、期待される argument.length=2 であることがわかります。
//これが、私が苦労して引数パラメータを操作する理由です
/ /ここにいるほとんどの人はそれが正しいと思うでしょうが、あなたは間違っています。 17 階の学生の皆さん、まだ考えてください


コメントなしのソース コード、




コードをコピー

コードは次のとおりです。

(function () { var proxy = function (fn, target) { var proxy = function () { if (2 < argument.length) { var privateArgs = Array.prototype.slice.call(arguments, 2); return function () {

var args = Array.prototype.slice.call(引数);

Array.prototype.unshift.apply(args,privateArgs);
return fn.apply(target, args);
}
}
return function () {
return fn.apply(target, argument);
}
}
return proxy.apply(null, argument)
}/*ネイティブ使用をサポートします*/
Function.prototype.bind = Function.prototype.bind ||
function (ターゲット) {
if (1 var args = Array.prototype.slice.call(arguments) , 1);
args.unshift(this, target);
return proxy.apply(null, args);
return proxy(this, target); 🎜>})();




この記事は前の記事の続きです。詳細な例をまだ見ていない場合は、クリックしてください。
最初にサンプルを読んでください。このブログには豪華なレイアウトを作成する時間がありません。単純なコードのみです。




コードをコピーしてください

コードは次のとおりです。


var Mouse = function () {
if (document.addEventListener) {
document.addEventListener('mousemove', this) .move.bind(this,1,2,[3,4]));

} else if (document.attachEvent) { document.attachEvent("onmousemove", this .move.bind(this, 1,2,[3,4])); } }; Mouse.prototype.move = function () { console.log(arguments[arguments.length-1]. clientX); };

ここでの引数の出力結果は、上記のコードをよく説明していますので、新しく与えられた例と組み合わせて理解してください。 🎜>



コードをコピーします


コードは次のとおりです:


var privateArgs = Array.prototype.slice.call (arguments, 2);

//エージェントのパラメータを表すプライベートパラメータ。ここでは 1,2,[3,4] を表します。
return function () {
var args = Array.prototype.スライス .call(arguments);

//ここでのパラメータは、イベント関数内の e などのデリゲートのパラメータを表します。Array.prototype.unshift.apply(args, privateArgs);ここでは、2 つのパラメータが結合され、次にプライベート パラメータが最初になります。その目的は、元のパラメータの順序と一致させることです。return fn.apply(target, args);//結合されたパラメータは次のとおりです。ここに 1,2,[3,4] e が渡されて適用されます }
ここまでくれば、優れた JS スキルが身につくでしょう。つまり、e=window.event||e を直接処理する必要はなく、arguments[arguments.length-1 を直接使用できます。 ] で表されるすべてのブラウザと互換性を持たせるため
イベント e オブジェクトにより、多くのコードと思考時間が節約されます。
このコードを書いた理由は、誰もが JS コードを真に理解し、この記事を読めば、少なくとも引数
が何であるかがわかります。このブログは、JS コード愛好家が学ぶのに適した、非常に粗末なコードです。実は、js の本当の魅力はこれだけではありません。これまでの例と説明を読めば、ほとんど理解できると思います。
js 愛好家なら。この本は、JS コードの本質を一緒に学ぶことを目的としています。