はじめに
私たちのプログラミング言語は、「マシン指向」から「プロセス指向」、そして「オブジェクト指向」へのプロセスを経てきました。 JavaScript は、プロセス指向とオブジェクト指向の中間のオブジェクトベースの言語です。 JavaScript を学習するプロセスにおいて、OOP は非常に重要な部分です。JS におけるオブジェクト指向のアプローチについて説明しましょう。 ！ ！
1.1 プロセス指向とオブジェクト指向とは何ですか? プロセス指向: 問題を解決する方法のプロセスステップに焦点を当てます。プログラミングの特徴は、クラスやオブジェクトの概念を持たず、処理の各ステップを一つ一つ関数で実装することです。
オブジェクト指向: どのオブジェクトが問題を解決するかに焦点を当てます。プログラミングの特徴は、クラスが次々と現れ、そのクラスからオブジェクトを取得して特定の問題を解決することです。
呼び出し元にとって、プロセス指向では、呼び出し元がさまざまな関数を自分で実装する必要があります。一方、オブジェクト指向では、呼び出し元がメソッドの実装の詳細を理解する必要がなく、オブジェクト内の特定のメソッドの機能を呼び出し元に伝えるだけで済みます。
1.2 オブジェクト指向の3大特徴 継承、カプセル化、ポリモーフィズム
1.3 クラスとオブジェクトの関係 ① カテゴリ : 同じ特性 (プロパティ) と動作 (メソッド) を持つクラスのコレクション。
例：人間→属性：身長、体重、性別メソッド：食べる、話す、歩く
② オブジェクト ：クラスから、特定の属性値を持つ個体を取り出すと方法。
例: Zhang San --> 属性: 身長 180、体重 180 メソッド: Talk --> 私の名前は Zhang San、身長 180 です
③ クラスとオブジェクトの関係
クラス それは抽象的であり、オブジェクトは具体的です（クラスはオブジェクトの抽象化であり、オブジェクトはクラスの具体化です）
説明:
クラスは抽象的な概念であるとしか言えません。クラスには属性とメソッドがありますが、属性に特定の値を割り当てることはできません。たとえば、人間には名前がありますが、その名前が何であるかを言うことはできません。 。 。
オブジェクトは特定のインスタンス、つまりクラス内の属性に特定の値を割り当てる個体です。たとえば、張三が一人の人間である場合、張三の名前は張三であると言えます。つまり、張三は人間の各属性に特定の割り当てを行っているため、張三は人間によって生成されたオブジェクトです。
2.1 クラスとオブジェクトを作成する手順 ①クラス(コンストラクター)を作成します:クラス名は必ず指定してくださいCamelCase を使用します。つまり、各単語の最初の文字を大文字にする必要があります。
1 function 类名(属性1){
2 this.属性1 = 属性1;
3 this.方法 = function(){
4 //方法中要调用自身属性，必须要使用this.属性
5 }
6 } ログイン後にコピー
② クラスを通じてオブジェクトをインスタンス化（新規）します。
var obj = new 类名(属性1的具体值);
obj.属性; 调用属性
obj.方法(); 调用方法 ログイン後にコピー
③注意事項
>>>クラス名を通じてオブジェクトを作成するプロセスを「クラスのインスタンス化」と呼びます
>>>クラス内のこれはインスタンス化されると、新しく作成されたオブジェクトを指します。したがって、this.property と this.method は実際に、新しく作成されるオブジェクトにプロパティとメソッドをバインドします。
>>>クラスで独自のプロパティを呼び出すには、this.property 名を使用する必要があります。変数名を直接使用すると、対応するプロパティにアクセスできません。
>>>クラス名はビッグキャメルケースルールを使用する必要があり、通常の関数との違いに注意してください。
2.22つの重要な属性constructorとinstanceof ①constructor: 現在のオブジェクトのコンストラクターを返します
>>>zhangsan.constructor =人;
②instanceof: オブジェクトがクラスのインスタンスであるかどうかを検出します
>>>lisiinstanceof Person √ lisi は新しい Person クラスを通じて作成されます
>>> ;lisi オブジェクトのインスタンス √ すべてのオブジェクトはオブジェクトのインスタンスです
>>>オブジェクトのインスタンスインスタンス √ 関数自体もオブジェクトです
3. JavaScript におけるこの指摘の問題 在上一部分中，我们创建了一个类，并通过这个类new出了一个对象。 但是，这里面出现了大量的this。 很多同学就要懵逼了，this不是“这个”的意思吗？为什么我在函数里面写的this定义的属性，最后到了函数new出的对象呢？？
3.1 谁最终调用函数，this就指向谁！ ① this指向谁，不应该考虑函数在哪声明，而应该考虑函数在哪调用！！ ② this指向的，永远只可能是对象，不可能是函数！！ ③ this指向的对象，叫做函数的上下文context，也叫函数的调用者。
3.2 this指向的规律(与函数的调用方式息息相关！) ① 通过函数名()调用的，this永远指向window
func(); // this--->window//【解释】 我们直接用一个函数名()调用，函数里面的this，永远指向window。 ログイン後にコピー
// 狭义对象
var obj = {
name:"obj",
func1 :func
};
obj.func1(); // this--->obj//【解释】我们将func函数名，当做了obj这个对象的一个方法，然后使用对象名.方法名， 这时候函数里面的this指向这个obj对象。
// 广义对象
document.getElementById("p").onclick = function(){
this.style.backgroundColor = "red";
}; // this--->p//【解释】对象打点调用还有一个情况，我们使用getElementById取到一个p控件，也是一种广义的对象，用它打点调用函数，则函数中的this指向这个p对象。 ログイン後にコピー
var arr = [func,1,2,3];
arr[0](); // this--->arr//【解释】这个，我们把函数名，当做数组中的一个元素。使用数组下标调用，则函数中的this将指向这个数组arr。 ログイン後にコピー
setTimeout(func,1000);// this--->window//setInterval(func,1000);//【解释】使用setTimeout、setInterval等window内置函数调用函数，则函数中的this指向window。 ログイン後にコピー
var obj = new func(); //this--->new出的新obj//【解释】这个就是第二部分我们使用构造函数new对象的语句，将函数用new关键字调用，则函数中的this指向新new出的对象。 ログイン後にコピー
3.3 关于this问题的面试题
var fullname = 'John Doe';var obj = {
fullname: 'Colin Ihrig',
prop: {
fullname: 'Aurelio De Rosa',
getFullname: function() {
return this.fullname;
}
}
};
console.log(obj.prop.getFullname());
// 函数的最终调用者 obj.prop
var test = obj.prop.getFullname;
console.log(test());
// 函数的最终调用者 test() this-> window obj.func = obj.prop.getFullname;
console.log(obj.func());
// 函数最终调用者是obj
var arr = [obj.prop.getFullname,1,2];
arr.fullname = "JiangHao";
console.log(arr[0]());// 函数最终调用者数组 ログイン後にコピー
以上がJavaScript オブジェクト指向の基本とこの問題点を理解する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
推奨: 優れた JS オープンソースの顔検出および認識プロジェクト
Apr 03, 2024 am 11:55 AM
顔の検出および認識テクノロジーは、すでに比較的成熟しており、広く使用されているテクノロジーです。現在、最も広く使用されているインターネット アプリケーション言語は JS ですが、Web フロントエンドでの顔検出と認識の実装には、バックエンドの顔認識と比較して利点と欠点があります。利点としては、ネットワーク インタラクションの削減とリアルタイム認識により、ユーザーの待ち時間が大幅に短縮され、ユーザー エクスペリエンスが向上することが挙げられます。欠点としては、モデル サイズによって制限されるため、精度も制限されることが挙げられます。 js を使用して Web 上に顔検出を実装するにはどうすればよいですか? Web 上で顔認識を実装するには、JavaScript、HTML、CSS、WebRTC など、関連するプログラミング言語とテクノロジに精通している必要があります。同時に、関連するコンピューター ビジョンと人工知能テクノロジーを習得する必要もあります。 Web 側の設計により、次の点に注意してください。
MySQLクエリ結果の配列をオブジェクトに変換するにはどうすればよいですか?
Apr 29, 2024 pm 01:09 PM
MySQL クエリ結果の配列をオブジェクトに変換する方法は次のとおりです。 空のオブジェクト配列を作成します。結果の配列をループし、行ごとに新しいオブジェクトを作成します。 foreach ループを使用して、各行のキーと値のペアを新しいオブジェクトの対応するプロパティに割り当てます。新しいオブジェクトをオブジェクト配列に追加します。データベース接続を閉じます。
PHP および JS 開発のヒント: 株価ローソク足チャートの描画方法をマスターする
Dec 18, 2023 pm 03:39 PM
インターネット金融の急速な発展に伴い、株式投資を選択する人がますます増えています。株式取引では、ローソク足チャートは一般的に使用されるテクニカル分析手法であり、株価の変化傾向を示し、投資家がより正確な意思決定を行うのに役立ちます。この記事では、PHP と JS の開発スキルを紹介し、株価ローソク足チャートの描画方法を読者に理解してもらい、具体的なコード例を示します。 1. 株のローソク足チャートを理解する 株のローソク足チャートの描き方を紹介する前に、まずローソク足チャートとは何かを理解する必要があります。ローソク足チャートは日本人が開発した
簡単な JavaScript チュートリアル: HTTP ステータス コードを取得する方法
Jan 05, 2024 pm 06:08 PM
JavaScript チュートリアル: HTTP ステータス コードを取得する方法、特定のコード例が必要です 序文: Web 開発では、サーバーとのデータ対話が頻繁に発生します。サーバーと通信するとき、多くの場合、返された HTTP ステータス コードを取得して操作が成功したかどうかを判断し、さまざまなステータス コードに基づいて対応する処理を実行する必要があります。この記事では、JavaScript を使用して HTTP ステータス コードを取得する方法を説明し、いくつかの実用的なコード例を示します。 XMLHttpRequestの使用
jsとvueの関係
Mar 11, 2024 pm 05:21 PM
js と vue の関係: 1. Web 開発の基礎としての JS、2. フロントエンド フレームワークとしての Vue.js の台頭、3. JS と Vue の補完関係、4. JS と Vue の実用化ビュー。
PHP における配列とオブジェクトの違いは何ですか?
Apr 29, 2024 pm 02:39 PM
PHP では、配列は順序付けられたシーケンスであり、要素はインデックスによってアクセスされます。オブジェクトは、new キーワードによって作成されたプロパティとメソッドを持つエンティティです。配列へのアクセスはインデックス経由で、オブジェクトへのアクセスはプロパティ/メソッド経由で行われます。配列値が渡され、オブジェクト参照が渡されます。
PHP の Request オブジェクトとは何ですか?
Feb 27, 2024 pm 09:06 PM
PHP の Request オブジェクトは、クライアントからサーバーに送信される HTTP リクエストを処理するために使用されるオブジェクトです。 Request オブジェクトを通じて、リクエストを処理して応答するために、リクエスト メソッド、リクエスト ヘッダー情報、リクエスト パラメータなどのクライアントのリクエスト情報を取得できます。 PHP では、$_REQUEST、$_GET、$_POST などのグローバル変数を使用して、要求された情報を取得できますが、これらの変数はオブジェクトではなく配列です。リクエスト情報をより柔軟かつ便利に処理するために、次のことができます。
C++ 関数がオブジェクトを返すときは何に注意する必要がありますか?
Apr 19, 2024 pm 12:15 PM
C++ では、関数がオブジェクトを返すときに注意する点が 3 つあります。 オブジェクトのライフサイクルは、メモリ リークを防ぐために呼び出し元によって管理されます。ぶら下がりポインタを回避し、動的にメモリを割り当てるかオブジェクト自体を返すことにより、関数が戻った後もオブジェクトが有効なままであることを確認します。コンパイラーは、パフォーマンスを向上させるために、返されたオブジェクトのコピー生成を最適化する場合がありますが、オブジェクトが値セマンティクスによって渡される場合、コピー生成は必要ありません。
See all articles
