毎日のJavaScript学習まとめ（オブジェクト指向プログラミング）_JavaScriptスキル
1. オブジェクト指向ファクトリメソッド
function createPerson(name, age, job){
var o = new Object();
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var person1 = createPerson("Nicholas", 29, "Software Engineer");
var person2 = createPerson("Greg", 27, "Doctor");
person1.sayName(); //"Nicholas"
person2.sayName(); //"Greg"ファクトリ モデル方式の欠点は、重複コードが大量に生成されることです。
2. コンストラクター パターンはオブジェクトを作成します
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); //"Nicholas"
person2.sayName(); //"Greg"
alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true
alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true
alert(person1.sayName == person2.sayName); //false new キーワードを使用してオブジェクトを作成するには、次の 4 つのプロセスを経ます
- 1. 新しいオブジェクトを作成します
- 2. コンストラクターのスコープを新しいオブジェクトに割り当てます (つまり、これはこの新しいオブジェクトを指します)
- 3. コンストラクターを実行するメソッド (この新しいオブジェクトに値を代入します)
- 4. 新しいオブジェクトを返す
3. コンストラクターを関数として使用します
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = function(){
alert(this.name);
};
}
var person = new Person("Nicholas", 29, "Software Engineer");
person.sayName(); //"Nicholas"
Person("Greg", 27, "Doctor"); //adds to window
window.sayName(); //"Greg"
var o = new Object();
Person.call(o, "Kristen", 25, "Nurse");
o.sayName(); //"Kristen"
関数として使用する場合、コンストラクターは通常の関数と変わりません。これは、window オブジェクトの下に追加される単なるメソッドです。コンストラクターによって作成されたオブジェクトは実際には新しいオブジェクトを作成するため、この 2 つは本質的に異なり、分離されており、メソッドも依然として異なります。
4. 共通の方法を使用して、矛盾した問題をグローバルに解決します
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.sayName = sayName;
}
function sayName(){
alert(this.name);
}
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.sayName(); //"Nicholas"
person2.sayName(); //"Greg"
alert(person1 instanceof Object); //true
alert(person1 instanceof Person); //true
alert(person2 instanceof Object); //true
alert(person2 instanceof Person); //true
alert(person1.constructor == Person); //true
alert(person2.constructor == Person); //true
alert(person1.sayName == person2.sayName); //true 上記のメソッドは同じ問題を解決しますが、定義されたグローバル メソッド自体はウィンドウに属しているため、ローカルとグローバルの間に分離はありません。したがって、この方法はほとんど使用されません。どちらもお勧めしません。
5. プロトタイプモード
私たちが作成する関数にはプロトタイプ オブジェクトがあります。この属性はオブジェクトを指すポインターであり、このオブジェクトの機能は、特定の型のすべてのインスタンスで共有できるメソッドを持つことです。
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
person1.sayName(); //"Nicholas"
var person2 = new Person();
person2.sayName(); //"Nicholas"
alert(person1.sayName == person2.sayName); //true
alert(Person.prototype.isPrototypeOf(person1)); //true
alert(Person.prototype.isPrototypeOf(person2)); //true
//only works if Object.getPrototypeOf() is available
if (Object.getPrototypeOf){
alert(Object.getPrototypeOf(person1) == Person.prototype); //true
alert(Object.getPrototypeOf(person1).name); //"Nicholas"
}
プロトタイプを理解する
関数が作成されるたびに、関数のプロトタイプ オブジェクトを指すプロトタイプ プロパティが作成されます。デフォルトでは、プロトタイプ オブジェクトにはコンストラクター (コンストラクター属性) が含まれます。このコンストラクターには、プロトタイプ属性が配置されている関数へのポインターが含まれます。
属性の読み取り順序
コードはオブジェクトのプロパティを読み取るたびに、指定された名前のプロパティから検索を実行します (存在する場合)。そうでない場合は、プロトタイプ チェーンの最外層が検索されるまで、オブジェクトの検索が続けられます。
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg" 来自实例
alert(person2.name); //"Nicholas" 来自原型
この要素のインスタンス属性が削除された場合
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
person1.name = "Greg";
alert(person1.name); //"Greg" ?from instance
alert(person2.name); //"Nicholas" ?from prototype
delete person1.name;
alert(person1.name); //"Nicholas" - from the prototype
6. hasOwnProperty メソッド
このメソッドは、プロパティがインスタンスに存在するかプロトタイプに存在するかを検出できます。 hasOwnProperty は Object から継承され、指定されたプロパティがオブジェクト インスタンスに存在する限り true を返します。
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var person1 = new Person();
var person2 = new Person();
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
person1.name = "Greg";
alert(person1.name); //"Greg" ?from instance
alert(person1.hasOwnProperty("name")); //true
alert("name" in person1); //true
alert(person2.name); //"Nicholas" ?from prototype
alert(person2.hasOwnProperty("name")); //false
alert("name" in person2); //true
delete person1.name;
alert(person1.name); //"Nicholas" - from the prototype
alert(person1.hasOwnProperty("name")); //false
alert("name" in person1); //true
7. Object.keys() 列挙可能プロパティ メソッド
このメソッドはパラメータとしてオブジェクトを受け取り、すべての列挙可能なプロパティを含む文字列配列を返します
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var keys = Object.keys(Person.prototype);
alert(keys); //"name,age,job,sayName"
如果想得到所有实例的属性，无论它是否可以枚举都可以使用这个方法来获取
function Person(){
}
Person.prototype.name = "Nicholas";
Person.prototype.age = 29;
Person.prototype.job = "Software Engineer";
Person.prototype.sayName = function(){
alert(this.name);
};
var keys = Object.getOwnPropertyNames(Person.prototype);
alert(keys); //"constructor,name,age,job,sayName"
このメソッドは、上位バージョンのブラウザでのみサポートされています
8. 簡単なプロトタイプの書き方
function Person(){
}
Person.prototype = {
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
alert(this.name);
}
};
var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //false
alert(friend.constructor == Object); //true
プロトタイプの書き換えは、デフォルトのプロトタイプ メソッドを上書きすることと同じであり、同じ構築メソッドも書き換えられ、書き換えられた構築メソッドは Object オブジェクトを指します。元のオブジェクト Person
の代わりに前のコンストラクターをまだ参照したい場合は、それを明示的に指定できます
function Person(){
}
Person.prototype = {
constructor : Person,
name : "Nicholas",
age : 29,
job: "Software Engineer",
sayName : function () {
alert(this.name);
}
};
var friend = new Person();
alert(friend instanceof Object); //true
alert(friend instanceof Person); //true
alert(friend.constructor == Person); //true
alert(friend.constructor == Object); //false
9. プロトタイプメソッドの動的追加
function Person(){
}
Person.prototype = {
constructor: Person,
name : "Nicholas",
age : 29,
job : "Software Engineer",
sayName : function () {
alert(this.name);
}
};
var friend = new Person();
Person.prototype.sayHi = function(){
alert("hi");
};
friend.sayHi(); //"hi" ?works!
10. ネイティブオブジェクトのプロトタイプメソッド
alert(typeof Array.prototype.sort); //"function"
alert(typeof String.prototype.substring); //"function"
String.prototype.startsWith = function (text) {//修改原生对象的原型方法
return this.indexOf(text) == 0;
};
var msg = "Hello world!";
alert(msg.startsWith("Hello")); //true
11. コンストラクターとプロトタイプ パターンの組み合わせを使用してオブジェクトを作成します
//构造函数模式
function Person(name, age, job){
this.name = name;
this.age = age;
this.job = job;
this.friends = ["Shelby", "Court"];
}
//原型模式
Person.prototype = {
constructor: Person,
sayName : function () {
alert(this.name);
}
};
var person1 = new Person("Nicholas", 29, "Software Engineer");
var person2 = new Person("Greg", 27, "Doctor");
person1.friends.push("Van");
alert(person1.friends); //"Shelby,Court,Van"
alert(person2.friends); //"Shelby,Court"
alert(person1.friends === person2.friends); //false
alert(person1.sayName === person2.sayName); //true
12. 動的プロトタイプモード
function Person(name, age, job){
//properties
this.name = name;
this.age = age;
this.job = job;
//methods
if (typeof this.sayName != "function"){
Person.prototype.sayName = function(){
alert(this.name);
};
}
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName();
13. 寄生コンストラクターパターン
function Person(name, age, job){
var o = new Object();//依赖全局对象初始化一个对象，然后再返回这个对象
o.name = name;
o.age = age;
o.job = job;
o.sayName = function(){
alert(this.name);
};
return o;
}
var friend = new Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"
function SpecialArray(){
//create the array
var values = new Array();
//add the values
values.push.apply(values, arguments);
//assign the method
values.toPipedString = function(){
return this.join("|");
};
//return it
return values;
}
var colors = new SpecialArray("red", "blue", "green");
alert(colors.toPipedString()); //"red|blue|green"
alert(colors instanceof SpecialArray);
アピール メソッドについて少し説明します。このメソッドは外部オブジェクトに依存して新しいオブジェクトを作成するため、instanceof メソッドに依存してプロパティとメソッドのソースを決定することはできません。実際にはコンストラクターとは何の関係もありません。
14. 安全なコンストラクターパターン
function Person(name, age, job){
var o = new Object();
o.sayName = function(){
alert(name);
};
return o;
}
var friend = Person("Nicholas", 29, "Software Engineer");
friend.sayName(); //"Nicholas"
このメソッドは、新しい this キーワードに依存しません。オブジェクトのメソッドとプロパティにアクセスしたい場合は、オブジェクトが定義したメソッドを通じてのみ取得できます。
15. 継承
JavaScript はプロトタイプ チェーンを介して継承を実装します
function SuperType(){
this.property = true;//定义一个属性
}
SuperType.prototype.getSuperValue = function(){//定义的原型方法
return this.property;
};
function SubType(){
this.subproperty = false;
}
//inherit from SuperType
SubType.prototype = new SuperType();
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
var instance = new SubType();
alert(instance.getSuperValue()); //true
alert(instance instanceof Object); //true
alert(instance instanceof SuperType); //true
alert(instance instanceof SubType); //true
alert(Object.prototype.isPrototypeOf(instance)); //true
alert(SuperType.prototype.isPrototypeOf(instance)); //true
alert(SubType.prototype.isPrototypeOf(instance)); //true
SubType继承SuperType的方法和属性，因此当instance可以直接调用SuperType的方法！
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//inherit from SuperType
SubType.prototype = new SuperType();
//new method
SubType.prototype.getSubValue = function (){
return this.subproperty;
};
//override existing method
SubType.prototype.getSuperValue = function (){
return false;
};
var instance = new SubType();
alert(instance.getSuperValue()); //false
上記の例は、オーバーライドされたプロトタイプが以前に継承されたプロトタイプを上書きし、返される最終結果は多くの場合予期した効果ではないことを示しています
function SuperType(){
this.property = true;
}
SuperType.prototype.getSuperValue = function(){
return this.property;
};
function SubType(){
this.subproperty = false;
}
//inherit from SuperType
SubType.prototype = new SuperType();
//使用字面量添加的方法导致上面的方法失效了
SubType.prototype = {
getSubValue : function (){
return this.subproperty;
},
someOtherMethod : function (){
return false;
}
};
var instance = new SubType();
console.log(instance);
alert(instance.getSuperValue()); //error!
次の例は、プロトタイプの書き換えのリスクも示しています
function SuperType(){
this.colors = ["red", "blue", "green"];
}
function SubType(){
}
//inherit from SuperType
SubType.prototype = new SuperType();
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green,black"
原型共享导致两个不同的对象调用的同一个数据
16、借用构造函数来实现继承
function SuperType(){
this.colors = ["red", "blue", "green"];
}
function SubType(){
//inherit from SuperType
SuperType.call(this);
}
var instance1 = new SubType();
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
var instance2 = new SubType();
alert(instance2.colors); //"red,blue,green"
传递参数
function SuperType(name){
this.name = name;
}
function SubType(){
//inherit from SuperType passing in an argument
SuperType.call(this, "Nicholas");
//instance property
this.age = 29;
}
var instance = new SubType();
alert(instance.name); //"Nicholas";
alert(instance.age); //29
17、组合继承方式
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
18、原型继承
function object(o){
function F(){}
F.prototype = o;
return new F();
}
var person = {
name: "Nicholas",
friends: ["Shelby", "Court", "Van"]
};
var anotherPerson = object(person);
anotherPerson.name = "Greg";
anotherPerson.friends.push("Rob");
19、寄生组合式继承
function object(o){
function F(){}
F.prototype = o;
return new F();
}
function inheritPrototype(subType, superType){
var prototype = object(superType.prototype); //create object
prototype.constructor = subType; //augment object
subType.prototype = prototype; //assign object
}
function SuperType(name){
this.name = name;
this.colors = ["red", "blue", "green"];
}
SuperType.prototype.sayName = function(){
alert(this.name);
};
function SubType(name, age){
SuperType.call(this, name);
this.age = age;
}
inheritPrototype(SubType, SuperType);
SubType.prototype.sayAge = function(){
alert(this.age);
};
var instance1 = new SubType("Nicholas", 29);
instance1.colors.push("black");
alert(instance1.colors); //"red,blue,green,black"
instance1.sayName(); //"Nicholas";
instance1.sayAge(); //29
var instance2 = new SubType("Greg", 27);
alert(instance2.colors); //"red,blue,green"
instance2.sayName(); //"Greg";
instance2.sayAge(); //27
以上就是今天的javascript学习小结，之后每天还会继续更新，希望大家继续关注。
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7393
15
1630
14
1358
52
1268
25
1217
29
PHP MVC アーキテクチャ: 将来に向けた Web アプリケーションの構築
Mar 03, 2024 am 09:01 AM
はじめに 今日の急速に進化するデジタル世界では、堅牢かつ柔軟で保守可能な WEB アプリケーションを構築することが重要です。 PHPmvc アーキテクチャは、この目標を達成するための理想的なソリューションを提供します。 MVC (Model-View-Controller) は、アプリケーションのさまざまな側面を独立したコンポーネントに分離する、広く使用されている設計パターンです。 MVC アーキテクチャの基礎 MVC アーキテクチャの核となる原則は、関心事の分離です。 モデル: アプリケーションのデータとビジネス ロジックをカプセル化します。ビュー: データの表示とユーザー インタラクションの処理を担当します。コントローラー: モデルとビュー間の対話を調整し、ユーザーのリクエストとビジネス ロジックを管理します。 PHPMVC アーキテクチャ phpMVC アーキテクチャは従来の MVC パターンに従いますが、言語固有の機能も導入しています。以下はPHPMVCです
「PHP オブジェクト指向プログラミングのデザイン パターン: SOLID 原則とその応用について理解する」
Feb 25, 2024 pm 09:20 PM
SOLID 原則は、ソフトウェア設計の品質と保守性を向上させることを目的としたオブジェクト指向プログラミング設計パターンの一連の指針です。 Robert C. Martin によって提案された SOLID 原則には次のものが含まれます。 単一責任原則 (SRP): クラスは 1 つのタスクのみを担当し、このタスクはクラス内にカプセル化する必要があります。これにより、クラスの保守性と再利用性が向上します。 classUser{private$id;private$name;private$email;publicfunction__construct($id,$nam
オブジェクト指向プログラミングにおける同時実行性の高いシナリオでの golang 関数の適用
Apr 30, 2024 pm 01:33 PM
オブジェクト指向プログラミングの同時実行性の高いシナリオでは、Go 言語で関数が広く使用されています。 メソッドとしての関数: 関数を構造体にアタッチしてオブジェクト指向プログラミングを実装し、構造体データを便利に操作して特定の関数を提供できます。同時実行本体としての関数: 関数を goroutine 実行本体として使用して、タスクの同時実行を実装し、プログラムの効率を向上させることができます。コールバックとしての関数: 関数をパラメーターとして他の関数に渡し、特定のイベントまたは操作が発生したときに呼び出すことができるため、柔軟なコールバック メカニズムが提供されます。
Python 入門から熟練度まで: 基礎ゼロからプロジェクト開発まで
Feb 20, 2024 am 11:42 AM
1. Python の概要 Python は、1991 年に Guido van Rossum によって作成された、習得が簡単で強力な汎用プログラミング言語です。 Python の設計哲学はコードの可読性を重視しており、さまざまなアプリケーションを迅速かつ効率的に構築できる豊富なライブラリとツールを開発者に提供します。 2. Python の基本構文 Python の基本構文は、変数、データ型、演算子、制御フロー ステートメントなどを含む他のプログラミング言語と似ています。変数はデータを格納するために使用されます。データ型は、変数が格納できるデータ型を定義します。演算子は、データに対してさまざまな操作を実行するために使用されます。制御フロー ステートメントは、プログラムの実行フローを制御するために使用されます。 3.Python の Python データ型
PHP のオブジェクト指向プログラミング パラダイムは、プロジェクト管理と組織に利点をもたらします
Sep 08, 2023 am 08:15 AM
PHP のオブジェクト指向プログラミング パラダイムは、プロジェクト管理と組織化に利点をもたらします。 インターネットの急速な発展に伴い、あらゆる規模の Web サイトやアプリケーションが登場しました。増大するニーズに応え、開発効率と保守性を向上させるために、オブジェクト指向プログラミング (Object-Oriented Programming、略して OOP) の使用が現代のソフトウェア開発の主流になっています。 PHP のような動的スクリプト言語では、OOP はプロジェクト管理と組織に多くの利点をもたらします。
PHP 拡張機能の開発: オブジェクト指向プログラミングをサポートするカスタム関数を設計するにはどうすればよいですか?
Jun 01, 2024 pm 03:40 PM
PHP 拡張機能は、オブジェクトの作成、プロパティへのアクセス、メソッドの呼び出しを行うカスタム関数を設計することで、オブジェクト指向プログラミングをサポートできます。まずオブジェクトをインスタンス化するカスタム関数を作成し、次にプロパティを取得してメソッドを呼び出す関数を定義します。実際の戦闘では、関数をカスタマイズして MyClass オブジェクトを作成し、その my_property 属性を取得し、その my_method メソッドを呼び出すことができます。
「PHP によるオブジェクト指向プログラミング入門: 概念から実践まで」
Feb 25, 2024 pm 09:04 PM
オブジェクト指向プログラミングとは何ですか?オブジェクト指向プログラミング (OOP) は、現実世界のエンティティをクラスに抽象化し、オブジェクトを使用してこれらのエンティティを表すプログラミング パラダイムです。クラスはオブジェクトのプロパティと動作を定義し、オブジェクトはクラスをインスタンス化します。 OOP の主な利点は、コードの理解、保守、再利用が容易になることです。 OOP の基本概念 OOP の主な概念には、クラス、オブジェクト、プロパティ、メソッドが含まれます。クラスはオブジェクトの設計図であり、オブジェクトのプロパティと動作を定義します。オブジェクトはクラスのインスタンスであり、クラスのすべてのプロパティと動作を備えています。プロパティは、データを保存できるオブジェクトの特性です。メソッドは、オブジェクトのデータを操作できるオブジェクトの関数です。 OOP の利点 OOP の主な利点は次のとおりです。 再利用性: OOP はコードをより高度なものにすることができます。
C++ 関数はオブジェクト指向プログラミングとどう違うのでしょうか?
Apr 11, 2024 pm 09:12 PM
関数型およびオブジェクト指向プログラミング (OOP) は、C++ でさまざまなプログラミング メカニズムを提供します。 関数: 特定のタスクの実行に重点を置き、データを含まない独立したコード ブロック。 OOP: オブジェクト、クラス、継承に基づいて、データと動作がオブジェクトにカプセル化されます。実際のケースでは、正方形の面積を計算する関数メソッドはシンプルかつ直接的ですが、OOP メソッドはデータと動作をカプセル化し、オブジェクトの相互作用の管理により適しています。適切なアプローチの選択はシナリオによって異なります。関数は独立したタスクに適しており、OOP は複雑なオブジェクトの相互作用の管理に適しています。
