プロトタイプとは何ですか?プロトタイプとはJSの基礎学習では触れなかった概念です プロトタイプとは主に以下を含む総称です。 プロトタイプオブジェクト(プロトタイプ) 、 オブジェクトのプロトタイプ (__proto__) 、 プロトタイプチェーン 統計によると、これらの概念は面接でもよく聞かれるので、プロトタイプの関連知識を理解し、習得するのに役立ちます。これで混乱することはなくなります。
私たちは Java、C++ などの多くのオブジェクト指向言語を研究してきましたが、ES6 より前にはクラスという概念がありませんでした。 ES6 より前では、インスタンス化されたオブジェクトを作成するためにコンストラクターを使用していました。コンストラクターは、オブジェクトの公開特性を含む特別な関数であり、 newと組み合わせて使用することにのみ意味があります。
<script>の
function Animal(name,age){ //コンストラクター名の最初の文字は大文字になります this.name=name;
this.age=年齢;
this.eat=function(){
console.log('私は食べています');
}
}
var Dog=new Animal('Wangcai',3) //オブジェクトを作成するために new と一緒に使用されます console.log(dog.name);
コンソール.ログ(犬の年齢);
犬.食べる()
</script>
<script>を通じてアクセスできません。
関数 動物(名前,年齢){
this.name=名前;
this.age=年齢;
}
var Dog=新しいAnimal('Wangcai',3)
console.log(犬の名前);
console.log(動物の名前);
</script>
<script>
関数 動物(名前,年齢){
this.name=名前;
this.age=年齢;
}
var Dog=新しいAnimal('Wangcai',3)
Animal.color='黒'
console.log(動物.色);
console.log(犬の色);
</script>
オブジェクトとは何かを説明する前に、先ほども同様に Animal クラスの場合を説明します。インスタンス化されたオブジェクトを比較した結果、 false が出力されたことがわかりました。つまり、2 つの複合データ型のアドレスが異なるのはなぜでしょうか。
<スクリプト>
関数 動物(名前,年齢){
this.name=名前;
this.age=年齢;
this.eat=function(){
console.log('私は食べています');
}
}
var Dog=新しいAnimal('Wangcai',3)
var cat=new Animal('ミミ',3)
var pig=新しいAnimal('humhem',3)
var Fish=新しいAnimal('Gulu',3)
var 羊=新しい動物('咩咩',3)
console.log(dog.eat==cat.eat);
</script>
インスタンス化されたオブジェクトを作成するとき、新しいプロセスは最初に新しいオブジェクトを作成しますが、複雑なデータ型により格納するスペース (オブジェクト、メソッド) が開かれるため、コンストラクターのブロック メモリ内に同じメソッドが無数に開くことになります。極度のメモリの浪費を引き起こす
コンストラクター プロトタイプ プロトタイプは、コンストラクター内の属性であり、このオブジェクトに格納されているメソッドは、コンストラクターを通じてインスタンスを作成するために使用されます。オブジェクトの変換時にパブリックに使用できるため、複数の同一の複合データ型に対して複数の重複したメモリ空間を開く必要がありません。前述のメモリの無駄の問題を解決するために、プロトタイプ オブジェクトを直接呼び出すこともできます。
解決策: プロトタイプ オブジェクトを使用してパブリック メソッドを格納し、インスタンス化されたオブジェクトにメソッドを呼び出して、2 つのアドレスが同じであるかどうかを比較します
。<script>
関数 動物(名前,年齢){
this.name=名前;
this.age=年齢;
}
Animal.prototype.eat=function(){
console.log('私は食べています');
}
var Dog=新しいAnimal('Wangcai',3)
var cat=new Animal('ミミ',3)
犬.食べる()
cat.eat()
console.log(dog.eat==cat.eat);
このメソッドが正常に呼び出されただけでなく、呼び出した 2 つのメソッドのアドレスが同じであることがわかりました。これにより、そのパブリック複合データ型はメモリ空間を解放するだけであり、書き込まれるパブリック メソッドの数が減ったことが証明されました
。
関数内のリソースの浪費の問題。
オブジェクト プロトタイプ __proto__ の機能は、オブジェクトをインスタンス化するときに、コンストラクターのプロトタイプ属性に追加されたメソッドがなぜ使用できるのかという疑問を理解できるようにすることです。これは、すべてのオブジェクトに __proto__ 属性があるためです (前後に 2 つのアンダースコアがあることに注意してください)。この属性は、対応するコンストラクターのプロトタイプ オブジェクト プロトタイプを指すポインターでもあり、インスタンス化されたオブジェクトでメソッドを呼び出すことができる理由を説明しています。プロトタイプオブジェクト。
オブジェクト プロトタイプ __protp__ の機能は、プロトタイプ オブジェクト内のコンテンツを検索するための指示を提供するだけであることに注意する必要があります。これを使用する必要はなく、覚えておく必要があるだけです。プロトタイプ オブジェクトのプロトタイプは、
プロトタイプ、プロトタイプ オブジェクトの
メソッドを検索します。コンストラクター属性なので、コンストラクターと呼ばれます。 この属性は、対応するコンストラクター自体を指すため、主に、インスタンス化されたオブジェクトがどのコンストラクターを参照するかを記録し、両方のコンストラクター属性を出力するために使用され
ます
関数 動物(名前,年齢){
this.name=名前;
this.age=年齢;
}
Animal.prototype.eat=function(){
console.log('私は食べています');
}
var Dog=新しいAnimal('Wangcai',4)
console.log(dog.__proto__.constructor);
console.log(Animal.prototype.constructor);
</script>
出力された結果は確かにコンストラクターそのものであることがわかりました