J39 オブジェクト指向

オブジェクト指向

1. プログラミング言語

• OOP オブジェクト指向プログラミング
  • Java
  • PHP
  • python / go / ruby
  • javascript / node.
• POP プロセス指向プログラミング
  • C

2.マークアップ言語：

• HTML5
• CSS3

オブジェクト指向プログラミングの3大概念

• 1.オブジェクト：一般的な参照、JSの操作とトランザクションの研究はオブジェクトです。
• 2.クラス：抽象的なオブジェクトは、カテゴリの数に分け、詳細な分割の機能的特徴に応じて
• 3.例：各カテゴリーにおける具体的な取引

JS組み込みクラス

クラスは、JSのトランザクションの特徴に従って分類され、デフォルトで分類されるクラスは、組み込みクラスです。

• データ型の組み込みクラス

  • 数クラス：すべての数はこのクラスのインスタンスです。
  • String
  • Boolean
  • Null / Undefined
  • Symbol
  • Object オブジェクト・データ型クラス： すべてのオブジェクト・データ型はこのクラスのインスタンスです。
    • Object {} 通常のオブジェクトはこのクラスのインスタンスです。
    • Array 各配列は Array クラスのインスタンスであり、Object クラスのインスタンスでもあります。
    • RegExp
    • Date
    • ...
  • 関数クラス：すべての関数はこのクラスのインスタンスです。

• DOM 要素オブジェクトや DOM 要素コレクションにも、独自の組み込みクラスがあります。

  • Node ノードクラス
    • Element 要素タグクラス
      • HTMLElement HTML要素タグクラス
        • HTMLDivElement 各 DIV 要素オブジェクトのインスタンスです。
        • HTMLAnchorElement 各 A 要素オブジェクトは、このクラスのインスタンスです。
        • 各要素タグオブジェクトは、それ自身の組み込みクラスを持っています。
      • XMLElement
      • ...
    • Text Text ノードクラス
    • Document Document ノードクラスです。
      • HTMLDocument 各ドキュメントは ... のインスタンスです。
    • ...
  • HTMLCollection要素コレクションクラス：要素のコレクションを取得するgetElementsByTagNameと他のメソッドに基づいて、それのインスタンスです。
  • NodeListノードコレクションクラス

<div id="box">DIV</div>
<a href="" id="link"></a>
<!-- IMPORT JS -->
<script>
let box = document.getElementById('box');
console.dir(box);//HTMLCollection 要素コレクションクラス
console.dir(link); //=>HTMLAnchorElement
//構造体がロードされた後にJSコードが実行された場合、要素IDを直接使用して要素オブジェクトを表すことができる。*/
console.dir(document.getElementsByTagName('*'));////length: 10 ページ内のすべてのタグを取得する
// 0: html
// 1: head
// 2: meta
// 3: meta
// 4: meta
// 5: title
// 6: body
// 7: div#box
// 8: a#link
// 9: script
// viewport: meta
// box: div#box
// link: a#link
// __proto__: HTMLCollection
// pushArrayクラスのインスタンスがこれらのメソッドを呼び出すことができる限り、Arrayはメソッドによって提供されるクラスである
let arr = [10, 20];
arr.push(30);
console.log(arr); //=>[]
// ARGUMENTSArrayのインスタンスでない場合は、Arrayが提供するメソッドを呼び出すことはできない。
function func() {
// ARGUMENTS実パラメータ・コレクションは、渡された実パラメータに関する情報を格納する、クラスの配列である。
arguments.push(30); //=>Uncaught TypeError: arguments.push is not a function
console.log(arguments);
}
func(10, 20); 

学習方法

JS自体は、言語のうち、"オブジェクト指向の考え方 "の設計に従っているので、それはJSを勉強して学ぶことであるかどうか、またはプロジェクト開発の仕事の将来的には、また、オブジェクト指向の考え方に従って学習し、開発する必要があります、例えば：私は、アレイの勉強をしたいです

• 1.各配列はArrayクラスのインスタンスであり、各インスタンスは独立したエンティティです。

let arr1=[12,23];
let arr2=[12,23];
console.log(arr1===arr2); //=>false 異なるヒープメモリアドレス

• 2.1つのインスタンスを取り上げ、その特性と構造を分析し、次に同じ特性と構造を持つArrayの他のインスタンスを分析します。

// pushArrayクラスのインスタンスがこれらのメソッドを呼び出すことができる限り、Arrayはメソッドによって提供されるクラスである
let arr = [10, 20];
arr.push(30);
console.log(arr); //=>[]

• 3.配列には、クラスがインスタンスに提供する多くのブラウザ組み込みメソッドがあり、すべてのインスタンスはこれらのメソッドを持ち、使用することができます。

// ARGUMENTSArrayのインスタンスでない場合は、Arrayが提供するメソッドを呼び出すことはできない。
function func() {
// ARGUMENTS実パラメータ・コレクションは、渡された実パラメータに関する情報を格納する、クラスの配列である。
arguments.push(30); //=>Uncaught TypeError: arguments.push is not a function
console.log(arguments);
}
func(10, 20);