ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript でのクラスとインスタンスの実装メソッド

JavaScript でのクラスとインスタンスの実装メソッド

PHPz
リリース: 2018-09-29 16:20:23
オリジナル
1393 人が閲覧しました

この記事では主に JavaScript でのクラスとインスタンスの実装方法を紹介します。詳細は次のとおりです。 🎜>

JavaScript には、親クラス、サブクラス、またはクラスとインスタンスの概念がありません。オブジェクトのプロパティを探すとき、JavaScript はプロトタイプ チェーンを上方向にたどります。対応するプロパティが見つかります。JavaScript でクラスとインスタンスの概念をシミュレートするにはいくつかの方法があります。

1. コンストラクターを直接使用してオブジェクトを作成し、コンストラクター内でこれを使用して参照します。

function Animal() {  
 this.name = "animal";  
 }  
 Animal.prototype.makeSound = function() {  
 console.log("animal sound");  
 }  
[Function]  
 var animal1 = new Animal();  
 animal1.name;  
'animal'  
 animal1.makeSound();  
animal sound
ログイン後にコピー
別の例を見てください:

function Point(x, y) {  
 this.x = x;  
 this.y = y;  
 }  
 Point.prototype = {  
 method1: function() { console.log("method1"); },  
 method2: function() { console.log("method2"); },  
 }  
{ method1: [Function], method2: [Function] }  
 var point1 = new Point(10, 20);  
 point1.method1();  
method1  
 point1.method2();  
method2
ログイン後にコピー
上記では、最初にコンストラクター オブジェクトのプロトタイプ属性を指定し、次に、コンストラクター オブジェクトの新しいインスタンスを作成します。


2. Object.create() メソッドを使用してオブジェクト

var Animal = {  
 name: "animal",  
 makeSound: function() { console.log("animal sound"); },  
 }  
 var animal2 = Object.create(Animal);  
 animal2.name;  
'animal'  
 console.log(animal2.name);  
animal  
 animal2.makeSound();  
animal sound
ログイン後にコピー
を作成します。メソッドはコンストラクター メソッドよりも単純ですが、プライベート プロパティとプライベート メソッドは実装できず、インスタンス オブジェクト間でデータを共有できません。また、クラスのシミュレーションはまだ十分に包括的ではありません。


3. オランダのプログラマー、Gabor de Mooij によって提案されたミニマリストのアプローチ。

var Animal = {  
 init: function() {  
 var animal = {};  
 animal.name = "animal";  
 animal.makeSound = function() { console.log("animal sound"); };  
 return animal;  
 }  
 };  
 var animal3 = Animal.init();  
 animal3.name;  
'animal'  
 animal3.makeSound();  
animal sound
ログイン後にコピー
プロトタイプとこれを使用せず、継承の実装も必要です。非常に簡単です。

var Cat = {  
 init: function() {  
 var cat = Animal.init();  
 cat.name2 = "cat";  
 cat.makeSound = function() { console.log("cat sound"); };  
 cat.sleep = function() { console.log("cat sleep"); };  
 return cat;  
 }  
 }  
 var cat = Cat.init();  
 cat.name; // 'animal'  
 cat.name2; // 'cat'  
 cat.makeSound(); // 类似于方法的重载  
cat sound  
 cat.sleep();  
cat sleep
ログイン後にコピー
プライベート属性とプライベート メソッドの使用:

var Animal = {  
 init: function() {  
 var animal = {};  
 var sound = "private animal sound"; // 私有属性  
 animal.makeSound = function() { console.log(sound); };  
 return animal;  
 }  
 };  
 var animal4 = Animal.init();  
 Animal.sound; // undefined 私有属性只能通过对象自身的方法来读取.  
 animal.sound; // undefined 私有属性只能通过对象自身的方法来读取  
 animal4.makeSound();  
private animal sound
ログイン後にコピー
属性とメソッドが動物オブジェクトで定義されていない限り、それらはプライベートであり、使用できません。

クラスとインスタンスの間でデータ共有を実現できます。

var Animal = {  
 sound: "common animal sound",  
 init: function() {  
 var animal = {};  
 animal.commonSound = function() { console.log(Animal.sound); };  
 animal.changeSound = function() { Animal.sound = "common animal sound changed"; };  
 return animal;  
 }  
 }  
 var animal5 = Animal.init();  
 var animal6 = Animal.init();  
 Animal.sound; // 可以视为类属性  
'common animal sound'  
 animal5.sound; // 实例对象不能访问类属性  
undefined  
 animal6.sound;  
undefined  
 animal5.commonSound();  
common animal sound  
 animal6.commonSound();  
common animal sound  
 animal5.changeSound(); // 修改类属性  
undefined  
 Animal.sound;  
'common animal sound'  
 animal5.commonSound();  
common animal sound  
 animal6.commonSound();  
common animal sound
ログイン後にコピー
たとえば、Animal.sound はクラスとインスタンスの共通属性であり、クラスとみなすことができます。

インスタンスが共通属性を変更すると、それに応じてクラスと他のインスタンスの共通属性も変更されます。

まとめると、これが概念と使用法です。この記事が皆さんの JavaScript プログラミングに役立つことを願っています。その他の関連チュートリアルについては、

JavaScript ビデオ チュートリアル をご覧ください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート