JS オブジェクトの詳細な説明

JS オブジェクトの詳細な説明

jsのオブジェクトは何ですか? jsのオブジェクト型は何ですか? 具体例は?

1. ECMA-262 の JS オブジェクトの定義:

それぞれがプリミティブ値、オブジェクト、または関数を格納する、順序付けされていない属性のコレクションです。
オブジェクトは、特定の順序ではない値の配列です。
オブジェクトは、複数のメンバーを含むことができる特別なデータ型です。

オブジェクト メンバー: プロパティ、メソッド。(オブジェクト=プロパティ+メソッド)
プロパティ(Property):オブジェクト名、プロパティ名。オブジェクトに関連する値を表す、オブジェクトのデータをカプセル化します;
メソッド (メソッド): オブジェクト名、メソッド名。オブジェクトの動作をカプセル化して、オブジェクトが実行できる動作または完了できる機能を示します。

2. JS のオブジェクト タイプ:

1. 内部オブジェクト: ネイティブ オブジェクト/組み込みオブジェクト

1) ネイティブ オブジェクト、使用する前にインスタンス化 (新規) する必要がある ECMAScript によって提供されるオブジェクト

Object オブジェクト、Function オブジェクト、Array オブジェクト、Boolean オブジェクト、Date オブジェクト、Number オブジェクト、String オブジェクト、RegExp オブジェクト、演算子、Error、Set オブジェクト、Map オブジェクト、Proxy オブジェクト

      原生对象常用方法:
      
      ①、Object.assign() 方法用于将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
      
      ②、Object.create() 方法用于创建一个新对象。被创建的对象会继承另一个对象的原型,在创建新对象时还可以指定一些属性。
      
      ③、Object.defineProperties() 直接在一个对象上定义新的属性或修改现有属性,并返回该对象。
      
      ④、Object.keys() 遍历对象,返回一个数组,包含了该对象自身的所有可枚举属性名
      
      ⑤、Object.getOwnPropertyNames() 遍历对象,返回一个数组,包含了该对象自身的可枚举和不可枚举属性名
      
      ⑥、Object.is() 方法用于判断两个值是否是相同的值
      
      ⑦、Object.entries() 方法返回一个给定对象自身可枚举属性的键值对数组,其排列与使用
      for...in循环遍历该对象时返回的顺序一致
      
      ⑧、Object.freeze()
      方法可以冻结一个对象。一个被冻结的对象再也不能被修改;冻结了一个对象则不能向这个对象添加新的属性,不能删除已有属性,不能修改该对象已有属性的可枚举性、可配置性、可写性,以及不能修改已有属性的值。
      
      此外,冻结一个对象后该对象的原型也不能被修改。freeze() 返回和传入的参数相同的对象。

2) 組み込みオブジェクト、インスタンス化せずに使用できる ECMAScript によって提供されるオブジェクト

Global (グローバル オブジェクト) と Math オブジェクト

2. ホスト オブジェクト

ホストオブジェクトは、JSスクリプトの実行環境が提供するオブジェクトであり、ブラウザが提供するオブジェクトであり、ECMAScriptの実行環境を改善するために使用されます。初期には大きな互換性の問題がありましたが、主要なオブジェクトの一部は現在、ほとんどのブラウザーと互換性があり、次の 2 つのカテゴリに分類されます。 1)
BOM オブジェクト (ブラウザー オブジェクト モデル)

ウィンドウ、ナビゲーター、画面、履歴、場所

2) DOM オブジェクト (Document Object Model)

Document、Anchor、Area、Base、Body、Button、Canvas、Event、Frame、Frameset、IFrame、Image、Link、Meta、Style、Form、Input Button、Input CheckBox、Input File、Input Hidden、Input Password、Input Radio、入力リセット、入力送信、入力テキスト、オプション、選択、Textare、Table、TableCell、TableRow

3.カスタムオブジェクト

開発者自身が定義したオブジェクト。カスタム オブジェクトのメソッドは次のとおりです。

(1) オブジェクトリテラル方式(JSONでオブジェクトを作成)
var obj1 = {
    
    }var obj2 = {
    
    x:0,y:0}var obj3 = {
    
    name:‘Mary’,age:18}

短所: 同じインターフェイスを使用して多くのオブジェクトを作成すると、多くの重複コードが生成されます。

(2) 工場モード。
function createPerson(name,age,actor){
    
    
 var person = new Object();
 person.name = "rose";
 person.age = 18;
 person.job = "actor";
 person.sayName = function () {
    
    
  console.log(this.name);
 };
 return person
}
console.log(p1 instanceof Object);//true
console.log(p1 instanceof createPerson);//false

①ファクトリーモードとは、オブジェクトを作成する文を関数に入れ、パラメータを渡すことで特定のオブジェクトを作成し、最後に作成したオブジェクトを返す方法です。

関数 createPerson() は、受け取ったパラメーターに従って、必要なすべての情報を含む Person オブジェクトを構築できます。

この関数は何度でも呼び出すことができ、そのたびに 2 つのプロパティとメソッドを持つオブジェクトが返されます。

②短所:ファクトリパターンは似たようなオブジェクトを複数作ることができるが、オブジェクト識別の問題、つまりオブジェクトの型をどうやって知るかという問題を解決できない。

(3) Object インスタンスを作成する
var person = new Object();
person.name = "rose";
person.age = 18;
person.job = "actor";
person.sayName = function () {
    
    
 console.log(this.name);
};
console.log(person); 
(4) コンストラクタモード
var obj1 = new Arrayvar obj2 = new Date();

①短所: コンストラクターを使用する際の主な問題は、各インスタンスで各メソッドを作成する必要があることです。

②ECMAScriptでは関数はオブジェクトなので、関数を定義するたびにオブジェクトがインスタンス化されます。

③ つまり、コンストラクターを介してインスタンス化された複数のオブジェクトのメソッドは複数の異なるメソッドですが、それらの内部コードと実装された機能は同じであり、リソースの特定の浪費を引き起こします。

(5) プロトタイプモード
function Student() {
    
    }
Person.prototype.name = "rose";
Person.prototype.age = 18;
Person.prototype.sayName = function () {
    
    
 console.log(this.name);
};
var p = new Student();
console.log(p);

①jsでは各関数にprototype属性があり、これはプロトタイプオブジェクトと呼ばれるオブジェクトへのポインタです。
ここに画像の説明を挿入

②プロトタイプモードを使用すると、すべてのインスタンスがプロトタイプオブジェクトのプロパティとメソッドを共有できます。つまり、コンストラクターでオブジェクトインスタンスの情報を定義する必要はありません。

③短所:コンストラクタの初期化パラメータを渡すリンクが省略され、その結果、すべてのインスタンスがデフォルトで同じ属性値を取得します。

Prototype パターンの最大の問題は、共有された性質によって引き起こされます。プロトタイプのすべてのプロパティは多くのインスタンスで共有されます.
この種の共有は関数に非常に適しています. この問題は、参照型を含むプロパティでより顕著になります。したがって、プロトタイプ パターンが単独で使用されることはほとんどありません。

(6) コンストラクタモードとプロトタイプモードの併用
function Person(name, age) {
    
    
 this.name = name;
 this.age = age;
}
Person.prototype.sayName = function () {
    
    
 console.log(this.name);
};
var p = new Person("rose", 18);
console.log(p);

① コンストラクター モードとプロトタイプ モードの組み合わせは、カスタム型を作成する最も一般的な方法です。オブジェクトがそのプロパティを参照すると、オブジェクトのプロトタイプが見つかるまで、プロトタイプ チェーンに従って検索されます。

②インスタンスのプロパティを定義するのはコンストラクタモード、メソッドや共有プロパティを定義するのはプロトタイプモード。

③ その結果、各インスタンスはインスタンス属性の独自のコピーを持ちますが、同時にメソッドへの参照を共有し、メモリを最大限に節約します。
ここに画像の説明を挿入

(7) その他のモード

①動的プロトタイプモード:コンストラクターが最初に呼び出されたときのみ、プロトタイプオブジェクトの対応するプロパティにメソッドが割り当てられ、他の例はコンストラクターモードと同じように処理されます

②寄生コンストラクターモード: オブジェクトを作成するコードのみをカプセル化し、新しく作成されたオブジェクトを返します。引き続き new 演算子を使用して呼び出します

③ セーフ コンストラクタ モード: public プロパティはなく、private 変数とメソッドだけがあり、private 変数を処理する get/set メソッドがいくつかあります。

おすすめ

転載: blog.csdn.net/Maybe_ss/article/details/125055493