これを概念的な概要
関数が作成されると、オブジェクトにリンクされ、このオブジェクトで機能が動作するキーワード(バックグラウンド)が作成されます。言い換えれば、これは関数、オブジェクトへの参照で使用できるキーワード、および関数はそのオブジェクトのプロパティまたは方法です。
このオブジェクトを見てみましょう:
<!doctype html> <html lang = "en"> <body> <script> var code = {living:true、age:23、gender: 'male'、getgender:function(){return cody.gender;}}; console.log(cody.getGender()); // logs 'male' </script> </body> </html>関数GetGenderでは、Codyオブジェクトの内部であるため、性別属性(つまり、cody.gender)を取得できることに注意してください。これを使用してCodyオブジェクトを取得することもできます。これは、Codyオブジェクトを指しているためです。
<!doctype html> <html lang = "en"> <body> <script> var code = {living:true、age:23、gender: 'male'、getgender:function(){return this.gender;}}; console.log(cody.getGender()); // logs 'male' </script> </body> </html>This.genderでは、これはCodyオブジェクトを指し、GetGender関数はCodyオブジェクトで動作できます。
これに関するトピックは少し混乱するかもしれませんが、そうである必要はありません。通常、これが指すオブジェクトは、関数自体ではなく関数を含むオブジェクトであることを覚えておいてください(もちろん、キーワードnewまたはcall()およびapply()を使用するなど、例外があります)。
重要なヒント
- キーワードこれは他の変数のようなものです。唯一の違いは、変更できないことです。
- 関数に渡される他のパラメーターや変数とは異なり、これは関数を呼び出すオブジェクトのキーワード(プロパティではありません)です。
これの価値を判断する方法は?
これはすべての関数に渡され、その値は、機能が実行されたときに呼び出される時期に依存します。これはあなたが覚えておくべき非常に特別な場所だからです。
次のコードでは、MyobjectオブジェクトにはプロパティSaySfooがあり、この関数SaySfooを指し示しています。 Sayfoo関数がグローバルドメインで呼び出されると、これはウィンドウオブジェクトを指します。 Myobjectが関数を呼び出すと、これはMyobjectを指します。
MyobjectにはFooと呼ばれるプロパティがあるため、ここで使用されています。
<!doctype html> <html lang = "en"> <body> <script> var foo = 'foo'; var myobject = {foo: '私はmyobject.foo'}; var sayfoo = function(){console.log(this ['foo']); }; // myobjectにsayfooプロパティを与えると、sayfoo function myobject.sayfoo = sayfoo; myobject.sayfoo(); // logs 'i are myobject.foo' 12 sayfoo(); // logs 'foo' </script> </body> </html>これの値は、関数がいつ呼び出されるかによって異なることは明らかです。 myobject.sayfooとsayfooはどちらも同じ関数を指しますが、Sayfoo()呼び出しのコンテキストは異なるため、これの値は異なります。以下は同様のコードです。ヘッドオブジェクト(ウィンドウ)が明示的に使用され、それがあなたに役立つことを望んでいます。
<!doctype html> <html lang = "en"> <body> <script> window.foo = 'foo'; window.myobject = {foo: '私はmyobject.foo'}; window.sayfoo = function(){! console.log(this.foo); }; window.myobject.sayfoo = window.sayfoo; window.myobject.sayfoo(); window.sayfoo(); </script> </body> </html>同じ関数を指す複数の参照がある場合、呼び出し関数のコンテキストに応じてこの値が変化することを明確に知っていることを確認してください。
重要なヒント
- これを除くすべての変数とパラメーターは、静的変数スコープに属します。
これは、埋め込まれた関数内のヘッドオブジェクトを指します
別の関数に埋め込まれた関数でこれを使用するとどうなるか疑問に思うかもしれません。残念ながら、ECMA 3では、これはルールに従うのではなく、関数が属するオブジェクトではなく、ヘッドオブジェクト(ブラウザのウィンドウオブジェクト)を指します。
次のコードでは、これはFUNC2とFUNC3でのMyobjectを指しているのではなく、ヘッドオブジェクトを指しています。
<!doctype html> <html lang = "en"> <body> <script> var myobject = {func1:function(){console.log(this); // logs myobject varfunc2 = function(){console.log(this); // [ログ]ウィンドウ、およびこの時点からVarfunc3 = function(){console.log(this); // [ヘッドオブジェクト]であるため、ウィンドウを記録します}(); }(); }}; myobject.func1(); </script> </body> </html>ただし、ECMAScript 5では、この問題は修正されます。これで、特にある関数の値を別の関数に渡す場合、この問題に注意する必要があります。
以下のコードを見て、匿名関数をfoo.func1に渡します。匿名関数がfoo.func1(関数が別の関数にネストされている)で呼び出されると、これは匿名関数のヘッドオブジェクトを指します。
<!doctype html> <html lang = "en"> <body> <script> var foo = {func1:function(bar){bar(); // foo console.log(this); //ここでのこのキーワードは、foo console.log(this)ではなくログウィンドウになります。 foo.func1(function(){console.log(this)}); </script> </body> </html>これで、これを含む関数が別の関数にある場合、または別の関数によって呼び出された場合、この値はヘッドオブジェクトを指します(繰り返しますが、これはECMAScript 5で修正されます)
ネストされた関数の問題を解決します
これが失われるのを防ぐために、親機能のスコープチェーンを使用して、これへの参照を保存できます。次のコードでは、それを使用する変数を使用して、そのスコープを使用して、関数コンテキストをより適切に保存できます。
<!doctype html> <html lang = "en"> <body> <script> var myobject = {myproperty: 'icanseehelight'、mymethod:function(){var this = this; // mymethodスコープvarhelperfunction function(){// childfunction var helperfunction function(){// childfunction // logs 'logs' scopeチェーンを介してライトを見ることができる= this console.log(the.myproperty); // logs 'light' light 'console.log(this); // ["that"}()を使用しない場合、ウィンドウオブジェクトを記録します。 }} myobject.mymethod(); // mymethod </script> </body> </html>を呼び出しますこれの価値を制御します
この値は通常、関数が呼び出されるコンテキストに依存します(キーワードが新しいものが使用されない限り、後で導入されない限り)が、apply()またはcall()を使用して、この点を指定して、関数がトリガーされたときにこれの値を変更/制御することができます。これらの2つの方法を使用することは、「ねえ、X関数を呼び出しますが、Zオブジェクトにこの値を作成させます。」そうすることで、このJavaScriptのデフォルト値が変更されます。
以下に、オブジェクトと関数を作成し、その後、call()を介して関数をトリガーするため、関数のこれはmyojbectを指します。 MyFunction関数では、Headオブジェクトの代わりにMyobjectで動作するため、MyFunctionで指摘されたオブジェクトを変更します。
<!doctype html> <html lang = "en"> <body> <script> var myobject = {}; var myfunction = function(param1、param2){// setviacall() 'これは、関数が呼び出されたときに私のオブジェクトにポイントします。 this.bar = param2; console.log(this); // logs object {foo = 'foo'、bar = 'bar'}}; myfunction.call(myobject、 'foo'、 'bar'); //関数を呼び出し、この値をmyobject console.log(myobject)に設定します// logsオブジェクト{foo = 'foo'、bar = 'bar'} </script> </body> </html>上記の例では、call()、Apply()を使用して同じ使用法に適用できます。 2つの違いは、パラメーターが関数にどのように渡されるかです。 call()を使用して、パラメーターはコンマで分離され、apply()、パラメーターは配列に渡されます。以下は同じコードですが、Apply()を使用します。
<!doctype html> <html lang = "en"> <body> <script> var myobject = {}; var myfunction = function(param1、param2){// apply()を介して設定します。これは、関数が呼び出されたときに私のオブジェクトにポイントを使用します。foo= param1; this.bar = param2; console.log(this); // logs object {foo = 'foo'、bar = 'bar'}}; myfunction.apply(myobject、['foo'、 'bar']); //関数を呼び出し、この値console.log(myobject)を設定します。 // logsオブジェクト{foo = 'foo'、bar = 'bar'} </script> </body> </html>これをカスタムコンストラクターで使用します
関数が新しいキーワードでトリガーされると、この値はインスタンス自体を指すようにコンストラクターで宣言されます。言い換えれば、コンストラクターでは、これを実際に作成する前にオブジェクトを指定することができます。これは、この値をCall()またはApply()に変更するようです。
以下に、作成されたオブジェクトを指すコンストラクターの人を構築します。人のオブジェクトが作成されると、これはこのオブジェクトを指し、プロパティ名をオブジェクトに配置し、値はこのコンストラクターに渡されるパラメーター値(名前)です。
<!doctype html> <html lang = "en"> <body> <script> var person = function(name){this.name = name || 「ジョンドー」; //これは、作成されたインスタントを指します} var code = new Person( 'Cody Lindley'); // Person Constructor Console.log(cody.name)に基づいて、インスタンスを作成します。 // logs 'cody lindley' </script> </body> </html>このようにして、コンストラクターが新しいキーワードでトリガーされると、これは「作成されるオブジェクト」を指します。次に、新しいキーワードを使用しない場合、この値は人をトリガーするコンテキストを指します - これはヘッドオブジェクトです。以下のコードを見てみましょう。
<!doctype html> <html lang = "en"> <body> <script> var person = function(name){this.name = name || 'johndoe'; } var code = person( 'cody lindley'); //「new」Console.log(cody.name)を使用していないことに注意してください。 //未定義で、値は実際にはwindow.name console.log(window.name)に設定されます。 // logs 'cody lindley' </script> </body> </html>プロトタイプメソッド内のコンストラクターインスタンスを指し示す
メソッドがコンストラクターのプロトタイププロパティとして使用される場合、このメソッドでは、トリガーメソッドのインスタンスを指します。ここには、人のフルネームを必要とする人()コンストラクターがいます。フルネームを取得するために、whatismyfulnameメソッドをperson.prototypeに追加し、すべての人がこの方法を継承します。この方法では、このメソッドをトリガーしたインスタンス(およびそのプロパティ)を指します。
以下に、2人のオブジェクト(CodyとLisa)を作成しましたが、継承されたWhatismyfulnameメソッドには、このインスタンスにこのポイントが含まれています。
<!doctype html> <html lang = "en"> <body> <script> var person = function(x){if(x){this.fullname = x}; }; person.prototype.whatismyfulname = function(){return this.fullname; // 'this'は、person()} var code = new Person( 'cody lindley')から作成されたインスタンスを指します。 var lisa = new person( 'lisa lindley'); //継承されたwhatismyfulnameメソッドを呼び出します。これは、これを使用してinstance console.log(cody.whatismyfullname()、lisa.whatismyfullname())を参照します。 /*プロトタイプチェーンは依然として有効です。そのため、インスタンスにFullNameプロパティがない場合、プロトタイプチェーンでそれを探します。以下に、人のプロトタイプとオブジェクトプロトタイプの両方にフルネームプロパティを追加します。メモを参照してください。 */object.prototype.fullname = 'john doe'; var John = new Person(); //引数は渡されないため、console.log(john.hatismyfullname())にfullnameが追加されません。 // logs 'john doe' </script> </body> </html>これをプロトタイプオブジェクト内のメソッドで使用すると、インスタンスを指します。インスタンスに属性が含まれていない場合、プロトタイプ検索が開始されます。
ヒント
- これを指摘したオブジェクトに、見つけたい属性が含まれていない場合、属性に適用される法律もここに適用されます。つまり、属性はプロトタイプチェーンに沿って「検索」されます。したがって、この例では、インスタンスにFullNameプロパティが含まれていない場合、FullNameはperson.prototype.fullname、およびobject.prototype.fullnameを探します。
より多くのJavaScriptの構文を表示するには、「JavaScriptリファレンスチュートリアル」および「JavaScriptコードスタイルガイド」をフォローできます。また、誰もがwulin.comをもっとサポートすることを願っています。