これと JavaScript でのオブジェクト プロトタイプに関するサンプル チュートリアル

this とオブジェクト プロトタイプ

this は非常に特別なキーワードであり、すべての関数のスコープ内で自動的に定義されます

// foo.count は 0 であり、リテラル解釈は間違っています

function foo(num) {

console.log("foo:"+ num);

this.count++;

}

foo.count = 0;

var i ;

for(i = 0;i

if(i>5){

foo(i)

}

}

console.log(foo.count) //0

// 字句スコープを使用して問題を解決します

function foo(num) {

console.log("foo:"+ num);

data.count++;

}

var data = {

count:0

) log (data.count); // 4

//

this

の代わりに

foo

識別子を使用して関数オブジェクト

を参照すると、

の問題が回避されますこれは

であり、変数 foo の字句スコープに完全に依存しています。 function foo(num) { console.log("foo:"+ num); foo.count++;}foo.count = 0var i;for(i= 0;i if(i>5){

foo(i)

}

}

console.log(foo.count) //4

/ /

this

が

foo

関数オブジェクトを指すように強制します

function foo(num) {

console.log("foo:"+num);

this.count++ } foo .count = 0; var i; for(i=0; i if(i>5){

foo.call(foo,i);

}

}

console.log(foo.count) //4

thisは書き込み時ではなく実行時にバインドされます。そのコンテキストは関数が呼び出されるときのさまざまな条件に依存します、thisのバインディングには何もありません。関数宣言の位置に関しては、関数の呼び出し方法によってのみ異なります。

これ総合分析

コールスタックとコール位置

function baz(){

//現在のコールスタックは: baz

// したがって、現在のコール位置グローバルスコープです

console.log("baz");

bar(); // <--bar の呼び出し場所

}

function bar(){

// current 呼び出しスタックは次のとおりです: baz-> bar

// したがって、現在の呼び出し位置は baz

console.log("bar);

foo(); // < ;-- foo の呼び出し位置

}

function foo(){

// 現在の呼び出しスタックは: baz->foo

// したがって、現在の呼び出しの場所は bar

console.log("foo");

}

baz() // <-- baz の呼び出し場所

; 非strict モードでのみ実行されます。

デフォルトのバインディングは、グローバル オブジェクトにのみバインドできます。

オブジェクト属性参照チェーンの最上位または最後のレイヤーのみが呼び出し位置に影響します。

function foo() {

console.log(this .a);

}

var obj2 = {

a: 42,

foo:foo

};

var obj1 = {

a:2,

obj2 : obj2

};

obj1.obj2.foo(); // 42

ハード バインディングの典型的なアプリケーション シナリオは、ラッパー関数を作成し、すべての関数を渡し、受け取ったすべての値を返すことです

関数 foo(何か)。

var bar = function () {

return foo.apply(obj,arguments);

};

var b = bar(3) // 2 3

console.log(b) ; 5

other 1 つの方法は、再利用できる

i

ヘルパー関数を作成することです

function foo(something){

console.log(this.a, something);

return this.a + 何か;} //

単純な補助バインディング関数

function binding(fn,obj){

return function(){

return fn.apply(obj,arguments);

}; }

var obj = {

a:2

}

var bar = binding(foo,obj);

var b = bar(3); // 2 3

console.log(b) // 5

ES5 は組み込みメソッドを提供します Function.prototype.bind、bind(..) は、パラメータを this

のコンテキストに設定し、元の関数を呼び出す、ハードコードされた新しい関数を返します。

function foo(something){console.log(this.a, something);return this.a + something;

}

var obj = {

a:2

}

var bar = foo.bind(obj);

var b = bar(3); // 3 5

console.log(b) // 5

API

コンテキスト呼び出し

function foo( el ){

console.log(el,this.id);}

var obj = {

id: "素晴らしい'

}

//

Call

foo(..)

this を obj[1,2,3].forEach(foo,obj);/// 1 素晴らしい 2 素晴らしい 3 素晴らしい new

は関数の呼び出し時間に影響を与える可能性があります

this

動作をバインドするメソッド

function foo(a){this.a = a; }

var bar = new foo(2);

console.log(bar. a) ; // 2

1.

new

(

new バインディング) で呼び出された関数か?

this は作成された新しいオブジェクト にバインドされます。 var bar = new foo();2.関数は call 、 apply (明示的バインディング) を介して呼び出されますか?

またはハードバインディングを介して呼び出される場合、

this

はオブジェクトを指定します va bar = foo.call(obj2)3.関数がコンテキストオブジェクトで呼び出されているかどうか(暗黙的なバインディング )

? はいの場合、

thisのバインディング?

はそのコンテキスト内にあります。var bar = obj1.foo()4.そうでない場合は、デフォルトのバインディングを使用します。厳密モードでは、未定義にバインドされ、それ以外の場合は、にバインドされます。グローバルオブジェクトvar bar = foo();

ソフトバインディング

function foo(){console.log("name:" + this.name);}

var obj = {名前: "obj"},

obj2 = {名前: "obj2"},obj3 = {名前: "obj3" },

obj3 = {名前: "obj3"};

var foo0BJ = foo.softBind(obj);

foo0BJ(); // 名前:obj

obj2.foo = foo.softBind(obj);

obj2.foo(); // 名前:obj3 < --見てください！

setTimeout(obj2.foo,10);

// name:obj <--- ソフトバインディングが適用されました

以上がこれと JavaScript でのオブジェクト プロトタイプに関するサンプル チュートリアルの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。