検索
ホームページウェブフロントエンドjsチュートリアルJavaScript カスタム タイプ_JavaScript スキル

1. パターンを直接作成します。これは最も単純で簡単なパターンです。最初に参照型のオブジェクトを作成し、それにカスタム プロパティとメソッドを追加します。サンプル コードは次のとおりです。

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

var person = new Object();
person.name = "サム";
person.speak = function(){
alert(this.name) age "year old") ;
}
person.speak();

ご覧のとおり、上で Object 型のオブジェクトが作成され、次に name 属性と age 属性が作成されます。とspeakメソッドが追加されます。パターンを直接作成するのは簡単ですが、その欠点は明らかです。同じオブジェクトを多数作成する必要がある場合、毎回コードを繰り返し書かなければなりません。この問題を解決するには、オブジェクトを作成するプロセスをカプセル化することができるため、次のファクトリ パターンを用意します。
2. ファクトリーモード。ファクトリ パターンは、プログラミングでよく使用されるデザイン パターンで、主にオブジェクトの作成プロセスをカプセル化します。サンプル コードは次のとおりです。


function createperson(name, age){
var person = new Object();
person.name = name; 🎜 >person.age = age;
person.speak = function(){
alert(this.name " is " this.age " years old");
return person; 🎜 >}
var person1 = createperson("Sam", 16);
var person2 = createperson("Jack", 18);


ファクトリ パターンを使用した後、同じ型のオブジェクトがよりシンプルになります。しかし、ファクトリ パターンではオブジェクトの識別の問題は解決されません。つまり、作成されたオブジェクトの特定のタイプを決定することができません。オブジェクト指向プログラミングの経験のある開発者は、オブジェクトの作成はクラスに基づいて行う必要があることを知っています。特定のカスタム クラスを取得したら、そのクラスのオブジェクトを作成できます。幸いなことに、JavaScript では、コンストラクター パターンを通じてクラスをシミュレートできます。
3. コンストラクターパターン。コンストラクターと通常の関数の間に違いはありません。 new 演算子が使用されている限り、任意の通常の関数をコンストラクターとして使用できます。また、任意のコンストラクターを通常の関数として呼び出すこともできます。ただし、JavaScript では、コンストラクターとして使用される関数名の最初の文字を大文字にする必要があるという規則があります。サンプル コードは次のとおりです。




コードをコピー
コードは次のとおりです。 function person(name, age){ this.name = name; this.speak = function(){
alert(this.name "は " .age "歳" );
}
}
var person1 = 新しい人("サム", 16)
var person2 = 新しい人("ジャック", 18); >

ご覧のとおり、コンストラクター内でこれを使用してプロパティとメソッドを追加しています。 Person オブジェクトを作成するとき、これは作成されたオブジェクトを指します。これで、オブジェクト person1 と person2 の特定のタイプを識別できるようになりました。 alert(person1 instanceOf Person) を使用すると、出力値が true であることがわかります。ただし、コンストラクター パターンには独自の欠点もあります。つまり、コンストラクター内で宣言されたメソッドは、新しいオブジェクトが作成されるたびに再作成されます (JavaScript では、関数もオブジェクトです)。つまり、コンストラクター内のメソッドは、クラスではなくオブジェクトにバインドされます。以下のコードの出力で推論を検証できます。
alert(person1.speak == person2.speak); // false この欠点を解決する比較的簡単な方法は、関数宣言をコンストラクターの外側に置くことです。つまり、




コードをコピー


コードは次のとおりです。function speech(){
alert(this.name "は " this.age " 歳です");
}
var person1 = 新しい人物("サム", 16);
var person2 = 新しい人物("ジャック", 18)
alert(person1.speak == person2.speak); ; // 真


問題は解決されましたが、この方法では新たな問題が生じます。まず、関数 speech はグローバル スコープで宣言されていますが、グローバル スコープに配置すると誤用の危険性があります。次に、カスタム タイプに多くのメソッドがある場合、次のようにする必要があります。多くのグローバル関数を宣言すると、グローバル スコープの汚染につながるだけでなく、コードのカプセル化にも役立ちません。それでは、グローバル スコープを汚さずにクラスにバインドされたカスタム型メソッドを作成する方法はあるのでしょうか?答えは、プロトタイプ パターンを使用することです。
4. プロトタイプモード。新しい関数を宣言すると、その関数 (JavaScript では関数もオブジェクトです) はプロトタイプ属性を持ちます。プロトタイプは、この関数によって作成されたすべてのオブジェクトが所有するパブリック プロパティとメソッドを表すオブジェクトです。サンプル コードは次のとおりです。

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

function person(){ }
person.prototype.name="サム";
person.prototype.age=16;
person.prototype.speak = function(){
alert( this.name "は " この .age " 歳です");
}
var person1 = new Person();
var person2 = new Person();
alert(person1. speech == person2.speak); // true


speak メソッドはコンストラクターで宣言されていませんが、作成したオブジェクト person1 がこれは、JavaScript には検索ルールがあるため、最初にインスタンスの属性とメソッドを検索し、見つからない場合はそれらを返し、プロトタイプ内を検索します。プロトタイプ パターンでは、メソッドがクラスに関連付けられ、グローバル スコープを汚染しませんが、独自の欠点もあります。まず、すべてのプロパティもクラスに関連付けられます。つまり、すべてのオブジェクトがプロパティを共有することになります。これは明らかに不合理です。 ; 次に、初期化データをコンストラクターに渡す方法がありません。解決策は簡単で、コンストラクター パターンとプロトタイプ パターンを組み合わせて使用​​するだけです。
5. 組み合わせモード。サンプル コードは次のとおりです。


コードをコピー コードは次のとおりです。
関数 人(名前, 年齢){
この.名前 = 名前;
この.年齢 = 年齢;
人.prototype.speak = function(){
アラート(この.name "は " この .age " 歳です");
var person1 = new person();
var person2 = new person(); 🎜>alert(person1.speak == person2.speak); // true


組み合わせモードがすべてのニーズを満たしていることを見つけるのは難しくありません。また、それは現在使用されているモードでもあります。広く使用されています。オブジェクト指向プログラミングの経験のある開発者にとっては、プロトタイプ宣言をコンストラクターの外に置くのは少し面倒に感じるかもしれませんが、コンストラクターの中に置くことはできますか?答えは「はい」です。動的結合モードを使用してください。
6. ダイナミック結合モード。原則として、まずプロトタイプ内の特定の属性またはメソッドが宣言されているかどうかを判断し、宣言されていない場合はプロトタイプ全体を宣言し、何も実行しません。サンプル コードは次のとおりです。




コードをコピー
コードは次のとおりです。 関数 人(名前, 年齢){ この.名前 = 名前; この.年齢 = 年齢;
if (人.prototype.speak == "未定義"){
人.プロトタイプ.speak = function() {
alert(this.name "は " this.age " 歳です")
}
}
}

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
如何使用 Go 语言定义和使用自定义类型?如何使用 Go 语言定义和使用自定义类型?Jun 05, 2024 pm 12:41 PM

在Go中,自定义类型可使用type关键字定义(struct),包含命名字段。它们可以通过字段访问运算符访问,并可附加方法来操作实例状态。在实际应用中,自定义类型用于组织复杂数据和简化操作。例如,学生管理系统使用自定义类型Student存储学生信息,并提供计算平均成绩和出勤率的方法。

C++ 函数返回自定义类型时有什么要求?C++ 函数返回自定义类型时有什么要求?Apr 19, 2024 pm 03:33 PM

C++函数可以返回自定义类型,满足如下要求:类型完整定义。默认构造函数。值类型需要复制构造函数。

如何在 Golang 中创建不可变自定义类型?如何在 Golang 中创建不可变自定义类型?Jun 02, 2024 am 09:41 AM

是的,在Go中创建不可变的自定义类型可以提供许多好处,包括线程安全性、易于推理和更强的错误处理。要创建不可变类型,需要遵循以下步骤:定义类型:声明一个包含成员变量的自定义类型,不应包括指针。声明不可变性:确保所有成员变量都是基础类型或其他不可变类型,避免使用切片、映射或指针。使用值接收器方法:为与类型关联的方法使用值接收器,禁止结构体字面量分配,强制方法仅对自身进行操作。

在 Golang 中,如何比较自定义类型的值?在 Golang 中,如何比较自定义类型的值?Jun 05, 2024 pm 01:04 PM

在Golang中,可通过以下方式比较自定义类型的值:对于具有相同底层表示形式的类型,直接使用==操作符进行比较。对于更复杂的类型,使用reflect.DeepEqual函数递归比较两个值的全部内容。

使用 Golang 时如何对自定义类型进行序列化?使用 Golang 时如何对自定义类型进行序列化?Jun 03, 2024 pm 05:07 PM

在Go中,序列化自定义类型的方法有:使用JSON序列化时实现json.Marshaler接口,使用Gob序列化时实现encoding/gob包中的GobEncoder和GobDecoder接口。

深入探究Go语言中的自定义类型方法深入探究Go语言中的自定义类型方法Mar 24, 2024 am 09:45 AM

深入探究Go语言中的自定义类型方法在Go语言中,我们可以为自定义类型添加方法,以扩展该自定义类型的功能。通过在类型上定义方法,我们可以实现面向对象编程的特性,使代码更加模块化和可维护。本文将深入探究在Go语言中自定义类型方法的使用,同时提供具体的代码示例。1.什么是自定义类型方法在Go语言中,我们可以通过在结构体上定义方法,实现自定义类型的方法。这些方法可

如何在Go中实现自定义类型?如何在Go中实现自定义类型?May 10, 2023 pm 03:34 PM

Go是一种面向对象的静态类型编程语言,因此允许开发者通过自定义类型来简化代码并提高可读性。在本文中,我们将探讨如何在Go中实现自定义类型,以便开发者可以更好地利用这个特性。结构体Go中的结构体是一种自定义类型,它允许开发者通过将不同类型的变量组合在一起来实现更复杂的数据结构。以下是一个结构体的示例:typePersonstruct{name

如何在 Golang 中为自定义类型定义方法?如何在 Golang 中为自定义类型定义方法?Jun 03, 2024 am 11:08 AM

在Go中,可以为自定义类型定义方法,即方法接收者。只需定义接收器类型、方法名和参数,即可为特定类型添加相应行为。

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール