javascript_javascript スキルでの動的 this および動的バインディングのサンプル コード

次に、関数は 2 つの部分に分割され、オブジェクトに格納されます。1 つは関数名 (キー)、もう 1 つは関数本体 (値) で、関数内の this は通常、関数が格納されているオブジェクトを指します。が位置しています。ただし、これは一般的なものであり、関数をグローバルに呼び出す場合、呼び出し元は表示されません。つまり、現時点では呼び出し元がウィンドウです。ただし、関数が宣言された後は、実際にはどのオブジェクトにもバインドされていないため、call apply メソッドを使用して呼び出し元を設定できます。

簡単な例:
[script]
<script> <br>window.name = "window"; <br>var run = function() { <br>alert( "私の名前は " this.name); <br>} <br>run(); <br></script>
[/html]
ここでは、run が wi​​ndow の属性であるとは言えません。ですが、実際には window プロパティによって呼び出されます。実際、上部に露出しているもののほとんどは窓に引き継がれています。これらを呼び出す必要がある場合、それらは window オブジェクトにコピーされます (ただし、IE では window はオブジェクトを継承しません)。そのため、window['xxx'] と window.xxx の間にはパフォーマンスの違いがあります。これは内部実装であるため、これ以上詳しくは説明しません。
別の例、明示的なオブジェクトへのバインディング

[Ctrl A すべて選択 注: 外部 Js を導入する必要がある場合は、更新して実行する必要があります

]

答えは明らかに簡単で、これは呼び出し元に対して常に使用されます。しかし、もう少し複雑な場合はどうなるでしょうか?

[Ctrl A すべて選択 注:

外部 Js を導入する必要がある場合は、
を実行するために更新する必要があります]

内部的にはオブジェクトで定義されており、run 関数内で定義されていますが、ポップアップするものはオブジェクトでも実行でもありません。これは、オブジェクトの属性でも実行の属性でもないためです。これは run のスコープ内で緩く使用され、最初の 2 つによって呼び出すことができないため、ウィンドウによってのみ保存できます。ウィンドウなどのネイティブ オブジェクトはすべてのスクリプト内に浸透しており、貢献する必要がある場所には必ず存在します。しかし、通常はそれが役立つ必要はないため、call と apply という 2 つの強力なツールを開発する必要があります。

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります
]

call と apply の違いは、最初のパラメータ以降のパラメータの形式です。call は 1 つずつ、apply はすべて配列に配置されます。パラメータが不明な場合は、引数と配列を使用して簡単に処理できます。 。スライス。

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、更新して実行する必要があります

] これこれはプロトタイプ開発者によって行われます。非常に有名な関数、bind が登場しました。以下はその最も単純なバージョンです:

コードをコピーします

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


var binding = function(context, fn) {
return function() {

return fn.apply(context, argument);
}

[Ctrl A すべて選択 注:
外部 Js を導入する必要がある場合は、

を実行するために更新する必要があります] しかしより複雑な問題に対処するために、この場合、次のバージョンを使用することをお勧めします。

コードをコピー<script> window.name = "window"; object = { name: "object", run: function() { alert("My name is " + this.name); } }; object.run(); </script><script> window.name = "window"; object = { name: "object", run: function() { var inner = function(){ alert("My name is " + this.name); } inner(); } }; object.run(); </script><script> window.name = "window"; var object = { name: "object", run: function() { inner = function() { alert( this.name); } inner.call(this); } } object.run(); </script> コードは次のとおりです:<script> window.name = "Window"; var cat = { name: "Cat" }; var dog = { name: "Dog", sound: function(word) { alert(this.name + word); } }; dog.sound(" is pooping"); dog.sound.call(window, " is banking"); dog.sound.call(dog, " is banking"); dog.sound.apply(cat, [" miaowing"]); </script>

function bind(context,fn) {
var args = Array.prototype.slice.call(arguments, 2);
return args.length == 0 ? function() {
return fn.apply(context, arguments);
} : function() {
return fn.apply(context, args.concat.apply(args, arguments));
};
};

它还有一个孪生兄弟叫bindAsEventListener ，绑定事件对象，没什么好说的。

复制代码 代码如下:

var bindAsEventListener = function(context, fn) {
return function(e) {
return fn.call(context, (e|| window.event));
}
}

Prototype的版本

复制代码 代码如下:

Function.prototype.bind = function() {
if (arguments.length < 2 && (typeof arguments[0]==='undefined'))
return this;
var _slice = Array.prototype.slice
var __method = this, args = _slice.call(arguments,0), context = args.shift();
return function() {
return __method.apply(context, args.concat(_slice.call(arguments,0)));
}
}

<script> Function.prototype.bind = function() { if (arguments.length < 2 && (typeof arguments[0]==='undefined')) return this; var _slice = Array.prototype.slice var __method = this, args = _slice.call(arguments,0), context = args.shift(); return function() { return __method.apply(context, args.concat(_slice.call(arguments,0))); } } var sound2 = dog.sound.bind(window); sound2(" is banking"); var sound3 = dog.sound.bind(cat); sound3(" miaowing") </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

bind函数是如此有用，google早早已把它加入到Function的原型中了（此外还有inherits，mixin与partial）。

复制代码 代码如下:

//在chrome中
var a = function(){};
alert(a.bind)

有绑定就有反绑定，或者叫剥离更好！例如原生对象的泛化方法我们是无法通过遍历取出它们的。

<script> for(var i in Array){ alert(i + " : "+ Array[i]) } for(var i in Array.prototype){ alert(i + " : "+ Array.prototype[i]) } </script>
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

要取出它们就需要这个东西：

复制代码 代码如下:

var _slice = Array.prototype.slice;
function unbind(fn) {//第一步取得泛化方法
return function(context) {//第二部用对应原生对象去重新调用！
return fn.apply(context, _slice.call(arguments, 1));
};
};

例は以前に示しました。記事を参照してください。
概要:
この値は関数の呼び出し方法によって異なり、合計 4 つのタイプがあります。
関数はオブジェクトのプロパティです。関数が呼び出されたとき、this の値はこのオブジェクトになります。関数で呼び出される式にピリオド (.) または [] が含まれる場合、this の値はピリオド (.) または [] より前のオブジェクトになります。たとえば、myObj.func および myObj["func"] では、func が呼び出されたとき、これは myObj になります。
関数がオブジェクトのプロパティではない場合、関数が呼び出されたときの this の値はグローバル オブジェクトになります。関数に内部関数が含まれている場合、その意味を正しく理解していないとエラーが発生しやすくなります。これは、内部関数の this 値が外部関数の this 値と異なるためです。解決策は、外部関数の this 値を変数に保存し、それを内部関数で使用して変数を検索することです。
関数の前に new を使用すると、新しいオブジェクトが作成され、関数も呼び出され、this の値が新しく作成されたオブジェクトになります。たとえば、関数 User(name) {this.name = name}; var user1 = new User("Alex"); では、 new User("Alex") を呼び出すと、user1 によって参照される新しいオブジェクトが作成されます。 User この関数も呼び出され、user1 オブジェクトに name という名前の属性が設定されます。その値は Alex です。
関数の apply メソッドと call メソッドを使用して、呼び出されるときに this の値を指定できます。 applyとcallの第一パラメータに指定するthisの値です。それらの存在によって、私たちはあらゆる種類の便利な機能を作成することができます。