2017-11-30 8 views
0

次の例を試しましたが、2種類のコンソールが2つの異なる結果を返しています。私はカスタムオブジェクトが両方の機会に返されることを期待していましたが、結果はちょっと変わったようです。誰かが結果を説明できますか?次の例のContextの変わった変更

<html> 
 
<head> </head> 
 
<body> 
 
<script> 
 
var obj1 = { 
 
printThis: function() { 
 
    console.log(this); 
 
} 
 
}; 
 

 
obj1.printThis(); //refers to my custom object 
 

 
var func1 = obj1.printThis; 
 
func1(); //refers to window object 
 
</script> 
 
</body> 
 
</html>

結果:

最初のコンソールには、いくつかの原因、自分の無名関数のラッパーにStackOverflowのでウィンドウオブジェクト(ただしカスタムオブジェクト、第二リターンを返しますがそれが参照するかもしれない他のオブジェクト)。しかし、Chromeでは第2コンソールがWindowオブジェクトへの参照を提供します。

+0

第二の関数呼び出しは、この閉鎖、ですグローバルオブジェクトリファレンスを参照してください。最初の関数呼び出しは現在のオブジェクトインスタンスを参照しています。 –

+0

@VIJAYABALDHANAPAL - しかし、それはカスタムオブジェクト内から実行されています。そして、 'this'はカスタムオブジェクトを参照しているに違いありません。なぜ 'window'オブジェクトを参照していますか? – Deadpool

+0

2番目の関数呼び出しはグローバルスペースにあります。 obj1.printThis() - >これは現在のオブジェクトを参照します。 –

答えて

1

機能(printThis)が実行されているコンテキストまたは環境のため、出力が異なります。 最初の場合、関数の実行コンテキストはobj1の内部にあります。しかし、2番目のケースでは、関数はグローバルコンテキストまたは環境で実行されています。

obj1の中で実行される2番目の関数呼び出しを実行する場合は、それを明示的に:obj1.printThis.bind(obj1)のようにバインドする必要があります。

var obj1 = { 
 
printThis: function() { 
 
    console.log(this); 
 
} 
 
}; 
 

 
obj1.printThis(); 
 

 
var func1 = obj1.printThis.bind(obj1); 
 
func1();

-2

あなたは、このようにしなければならない両方の方法でobj1を取得したい場合は、

<html> 
 
<head> </head> 
 
<body> 
 
<script> 
 
var obj1 = { 
 
printThis: function() { 
 
    console.log(obj1); // ------Changed here 
 
} 
 
}; 
 

 
obj1.printThis(); 
 

 
var func1 = obj1.printThis; 
 
func1(); 
 
</script> 
 
</body> 
 
</html>

関連する問題