ホームページ ウェブフロントエンド jsチュートリアル JSでクラスとオブジェクトを作成する2つの異なる方法_基礎知識

JSでクラスとオブジェクトを作成する2つの異なる方法_基礎知識

May 16, 2016 pm 04:40 PM

JavaScript では、新しい関数を定義するとき、実際には新しいクラスを宣言することになり、関数自体はクラスのコンストラクターに相当します。次のコードは、新しい Person クラスを作成する 2 つの異なる方法を示しています。関数定義の後に Person.prototype の定義が続きます。

var Person = function(name) { // 一个匿名函数, 并将这个函数赋值给一个Person变量, 此时Person成为一个类 

this.name = name; 

} 

function Person(name) { // 直接定义一个叫做Person的函数表示Person类 

this.name = name; 

} 

Person.prototype = { // 定义Person的prototype域 

printName: function() { // 定义一个print函数 

alert(this.name); 

} 

}
ログイン後にコピー

関数を通じてクラスを宣言した後、new 演算子を通じてクラスをインスタンス化できます。このようにして、クラスのメンバー関数を呼び出してロジックを完成させることができます。

var person = new Person("Joe Smith"); // 使用new操作符来新建一个Person的实例, 并赋给变量person 
person.printName(); // person就可以看作是一个实例的引用(reference), 所以可以通过这个引用来调用Person类中的成员函数
ログイン後にコピー

新しいクラスのインスタンスを作成するプロセス全体と手順をまとめてみましょう:

1. 関数 (匿名または実名) を定義して、新しいクラスを宣言します。 2. 必要に応じて、この新しいクラスのプロトタイプ フィールドを定義します。 3. new 演算子の後に定義した関数を使用して、新しいクラス インスタンスを作成します。JavaScript コンパイラーが new 演算子を検出すると、実際には空のクラス インスタンス変数が作成されます。
4. このクラスのプロトタイプフィールド内のすべての属性とメソッドをこの新しいインスタンスにコピーし、そのメンバー関数内のすべてのポインターをこの新しく作成されたインスタンスを指すようにします。 5. 次に、new 演算子の直後にある関数を実行します。 6. この関数を実行するときに、存在しないプロパティに値を割り当てようとすると、JavaScript コンパイラーがこのインスタンスのスコープ内でプロパティを自動的に作成します。 7. 関数の実行後、初期化されたインスタンスを返します。

Prototype では、Class オブジェクトを使用して、比較的簡単な方法で新しいオブジェクトを宣言できます。 Class.create() を使用すると、プロトタイプはデフォルトのコンストラクター関数 initialize() を作成します。この関数を実装すると、Java のコンストラクター関数と同様の方法でクラスの新しいインスタンスを作成できます。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

ホットな記事タグ

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

JavaScriptの文字列文字を交換します JavaScriptの文字列文字を交換します Mar 11, 2025 am 12:07 AM

JavaScriptの文字列文字を交換します

カスタムGoogle検索APIセットアップチュートリアル カスタムGoogle検索APIセットアップチュートリアル Mar 04, 2025 am 01:06 AM

カスタムGoogle検索APIセットアップチュートリアル

例JSONファイルの例 例JSONファイルの例 Mar 03, 2025 am 12:35 AM

例JSONファイルの例

8見事なjQueryページレイアウトプラグイン 8見事なjQueryページレイアウトプラグイン Mar 06, 2025 am 12:48 AM

8見事なjQueryページレイアウトプラグイン

独自のAjax Webアプリケーションを構築します 独自のAjax Webアプリケーションを構築します Mar 09, 2025 am 12:11 AM

独自のAjax Webアプリケーションを構築します

' this' JavaScriptで? ' this' JavaScriptで? Mar 04, 2025 am 01:15 AM

' this' JavaScriptで?

ソースビューアーでjQueryの知識を向上させます ソースビューアーでjQueryの知識を向上させます Mar 05, 2025 am 12:54 AM

ソースビューアーでjQueryの知識を向上させます

モバイル開発用のモバイルチートシート10個 モバイル開発用のモバイルチートシート10個 Mar 05, 2025 am 12:43 AM

モバイル開発用のモバイルチートシート10個

See all articles