この例の詳細な説明と動作原理については、JavaScript_基礎知識で学習してください。

WBOY
リリース: 2016-05-16 17:04:11
オリジナル
1124 人が閲覧しました

仕組み

関数がオブジェクトのメソッドとして呼び出された場合、これはオブジェクトに割り当てられます。

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

varparent = {
メソッド: function () {
console.log(this);
}
};

parent.method();
// <- 親


この動作は非常に「脆弱」であることに注意してください。メソッドへの参照を取得して呼び出すと、この値は親ではなくウィンドウ グローバル オブジェクトになります。これはほとんどの開発者を混乱させます。

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

ThisClownCar();
// <- ウィンドウ

これを変更します

.call、.apply、.bind メソッドは、関数を呼び出すメソッドを操作するために使用され、この値と関数に渡されるパラメーター値を定義するのに役立ちます。

Function.prototype.call には任意の数のパラメーターを含めることができ、最初のパラメーターがこれに割り当てられ、残りは呼び出し元の関数に渡されます。

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

Array.prototype.slice.call([ 1, 2 , 3], 1, 2)
// <- [2]

Function.prototype.apply は .call と同様に動作しますが、関数に渡すパラメーターは配列です「任意のパラメータ」の代わりに。

String.prototype.split.apply('13.12.02', ['.'])
// <- ['13', '12', '02']

Function.prototype.bind は、.bind に渡されたパラメータを常に this の値として使用する特別な関数を作成し、いくつかのパラメータを割り当てて元の関数のカリー化されたバージョンを作成できます。

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

var arr = [1, 2];
var add = Array.prototype.push.bind(arr, 3);

// 実質的に arr.push(3)
add();
と同じ
// 実質的には arr.push(3, 4) と同じです
add(4);

console.log(arr);
// <- [1, 2 、 3、3、4] スコープ チェーン内の


this

次の例では、これはスコープ チェーン内で変更されません。これはルールの欠陥であり、アマチュア開発者に混乱を引き起こすことがよくあります。

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

function scoping () {
console .log(this);

return function () {
console.log(this);
};
}

scoping()();
// <- ウィンドウ
// <- ウィンドウ

一般的な方法は、ローカル変数を作成してこれへの参照を保持することですが、子スコープ内に同じ名前の変数を存在させることはできません。子スコープ内の同じ名前の変数は、親スコープ内のこれへの参照を上書きします。 http://www.cnblogs.com/sosoft/

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

関数保持 () {
var self = this;

return function () {
console.log(self);
};
}

retaining ()();
// <- ウィンドウ

何らかの不可解な理由により、親スコープの this と現在の this 値の両方を実際に使用したい場合を除き、私は .bind 関数を使用することを好みます。これを使用して、これを親スコープから子スコープに割り当てることができます。

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

functionbound() {
return function () {
console.log(this);
}.bind(this);
}

bound()();
// < - ウィンドウ
関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート