JavaScript のいくつかの重要な属性 (this、コンストラクター、プロトタイプ) の紹介

JavaScript のいくつかの重要な属性 (this、コンストラクター、プロトタイプ) の紹介_基礎知識

WBOY

リリース： 2016-05-16 17:33:37

オリジナル

947 人が閲覧しました

this
this がグローバルスコープで使用される場合、this は現在のページオブジェクトウィンドウを参照します。this が関数で使用される場合、this が参照するものは this に基づきます。実行時に呼び出されるオブジェクト。また、2 つのグローバルメソッド apply と call を使用して、関数内の this の特定のポインタを変更することもできます。
まず、これをグローバルスコープで使用する例を見てみましょう:

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

関数内のこれは、次のように関数の定義時ではなく実行時に決定されます。

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

foo() {

console.log(.フルーツ); 
フルーツ = ; 
foo(); 
フルーツ: , 
foo 
}; ); 

 
グローバル関数の適用と呼び出しを使用して、次のように関数内の this のポインターを変更できます: 

コードをコピー

コードは次のとおりです: foo() { console.log(.fruit); >pack = { フルーツ:

};

foo.apply(window); 

 注:と call 関数の効果は同じです。唯一の違いは、2 つの関数のパラメータ定義が異なることです 
。 
関数も JavaScript のオブジェクトであるため、次の興味深い例がわかります。

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

foo() { ( === window) { console.log(); } } foo.boo = () { ( === foo) {

console.log();

} ( === window) { 
console.log(); 
}; 🎜 >foo(); 
foo.boo(); 

プロトタイプ
 
 プロトタイプは本質的にJavaScript オブジェクト。 そして、すべての関数にはデフォルトのプロトタイプ属性があります。 
この関数がカスタム オブジェクトを作成するシナリオで使用される場合、この関数をコンストラクターと呼びます。 たとえば、次は単純なシナリオです: 

コードをコピー

コードは次のとおりです:
人(名前) {
.name = 名前;
}

人.prototype = { getName: () { .name; >zhang = Person() ; console.log(zhang.getName());

例として、JavaScript のデータ型 (String、Number、Array )、Object を考えてみましょう。、日付など。これらの型は、次のような JavaScript 内のコンストラクターとして実装されていると考える理由があります。

Array() { 
} 
arr1 = Array(1, 56, 34, 12); [1, 56, 34, 12]; 
配列を操作する多くのメソッド (concat、join、push など) も、prototype 属性で定義する必要があります。 
実際、JavaScript のすべての組み込みデータ型には読み取り専用のプロトタイプ属性があります (これは理解できます。これらの型のプロトタイプ属性が変更されると、事前定義されたメソッドが消滅するためです)。しかし、それに独自の拡張メソッドを追加することができます。 。 
Array.prototype.min = () { 
min = [0]; 
( i = 1; i ([i] min = [i]; 
} 
min; 

console.log([1, 56, 34, 12]); 🎜>注意: ここには罠があります。配列のプロトタイプに拡張メソッドを追加した後、for-in を使用して配列をループすると、この拡張メソッドもループアウトされます。
次のコードは、これを示しています (min メソッドが Array プロトタイプに拡張されていると仮定しています)。
arr = [1, 56, 34, 12];
total = 0; arr) {
total = parseInt(arr[i], 10);
}
console.log(total);
解決策も非常に簡単です:
arr = [1, 56 , 34, 12];
合計 = 0;
(i arr) {
(arr.hasOwnProperty(i)) {
合計 = parseInt(arr[i], 10); 🎜 >}
}
console.log(total);

constructor

constructor は常に現在のオブジェクトを作成したコンストラクターを指します。たとえば、次の例:

コードをコピーします

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

 
arr = [1, 56, 34, 12]; 
console.log(arr.constructor === Array); 
Foo = () 
console.log (Foo.constructor === 関数); 
obj = Foo(); 
console.log(obj.constructor === Foo); Function); 

 

しかし、コンストラクターがプロトタイプに遭遇すると、興味深いことが起こります。
各関数にはデフォルトの属性プロトタイプがあり、このプロトタイプのコンストラクターはデフォルトでこの関数を指すことがわかっています。次の例に示すように:

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

person(名前) { 
.name = 名前; 
.prototype.getName = () { 
.name; 
; >console.log( p.constructor === 人); 
console.log(人.prototype.constructor === 人); 
console.log(p.constructor.prototype.constructor === 人); 
 
 
関数のプロトタイプを再定義したとき (注: 上記の例との違い、これは変更ではなくオーバーライドです)、コンストラクターの動作は少し奇妙でした。次の例に示します: 

コードをコピー

コードは次のとおりです: person(name ) { .name = 名前;

person.prototype = {

getName: () { 
} 
}; = 人(); 
console.log(p.constructor = == 人); 
console.log(p.constructor. prototype.constructor === 人); 

なぜですか? 
Person.prototype を上書きすると、次のコード操作と同等であることがわかります: 

コードをコピー

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

person.prototype = Object({ getName: () { .name; } }); > while コンストラクター常に自分自身を作成するコンストラクターを指すため、この時点では person.prototype.constructor === オブジェクト、つまり:

コードをコピー

 コードは以下のとおりです。 🎜>getName: () {

;
}
console.log(p.constructor === オブジェクト); console.log(person.prototype.constructor == = Object);

console.log(p.constructor.prototype.constructor === Object); この問題を解決するにはどうすればよいですか?方法も非常に簡単で、 Person.prototype.constructor を再度上書きするだけです:

 コードをコピー 


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

 
人(名前) { 
.name = 名前; 
}; 
人.prototype = Object({ 
getName: () { 
.name ; 
} 
}); 

person.prototype.constructor = 人;
console.log(p.constructor === 人); console.log(人。prototype.constructor === 人);
console.log(p.constructor.prototype.constructor === 人);