JavaScript |オブジェクトのプロパティとオブジェクトの作成方法を理解する



Javascript Understanding Object Properties



JavaScriptオブジェクト指向プログラミングはもっと難しい部分です。この記事では、es5のjsのオブジェクトのみを解決し、es6構文に基づいて補足し続けます。ようこそ訂正

まず、カスタムオブジェクト表現を作成する方法は2つあります。



  • オブジェクトのインスタンスを作成します
var person = new Object() person.name = 'nice' person.age = 2 person.address = 'china' person.sayName = function () { console.log(this.name) }
  • オブジェクトリテラルで作成する
var person = { name:'hello', age:12, address:'shanghai', sayName:function () { console.log(this.name) } }

ここでは、一般的に2番目の方法を使用してカスタムオブジェクトを作成します。これは、記述が簡単だからです。

上記は、名前、年齢、住所がオブジェクトのプロパティと呼ばれる人物オブジェクトを作成しました。sayNameは明らかにオブジェクトのメソッドであり、名前を返します。



次に、esの2つのプロパティ(データプロパティとアクセサプロパティ)について説明します。

  • データ属性
    1.data属性にはデータ値が含まれます。たとえば、上記では、nameのデータ値はhelloです。
    2.データ属性には4つの特徴があります。
    a。構成可能な構成可能性:属性を削除することで属性を再定義できます
    このプロパティは、プロパティのプロパティを変更できるかどうかに関係なく、プロパティをアクセサプロパティに変更できますか?
    デフォルトはtrue
    b。 enumerable Enumerability:for inループを介してプロパティを返すことができます。デフォルトは、
    true
    c。書き込み可能な変更可能性。デフォルトはtrueです。
    d。 valueこの属性のデータ値。デフォルトは未定義です

これらの属性について説明するいくつかの例を次に示します。

  1. 構成可能なデータプロパティのデフォルトはtrueです。 Object.definePropertyによって属性の構成可能オブジェクトがfalseに変更された場合、その属性は削除できません。また、再度configurabeに戻すと、エラーがスローされます。
var person = { name:'hello', age:12, address:'shanghai', sayName:function () { console.log(this.name) } } person.name = 'world' person.sayName() // Modify the configurable property of the object. Change the name property of the person object to non-deletable. Object.defineProperty(person,'name',{ configurable:false }) delete person.name person.sayName()

実行結果はワールドの2倍に出力され、name属性が構成不可能に変更されると、deleteメソッドが無効になることを示します。



  1. 列挙可能オブジェクトをfalseに変更した後、Object.keys()メソッドを使用して列挙可能プロパティを一覧表示します。
// enumerability console.log(Object.keys(person)) Object.defineProperty(person,'name',{ enumerable:false }) console.log(Object.keys(person)) 9641837-3e4d93ddbdcb31e1.pngの結果

personオブジェクトのname属性は列挙できません。

  1. 書き込み可能はよく理解されています。falseに変更した後はデータ値を変更できません
person.sayName() Object.defineProperty(person,'name',{ Writable: false, / / ​​person's name attribute becomes unchangeable }) person.name = 'world' person.sayName()

person.nameに値を割り当てようとしても有効にならず、結果は引き続きhelloです。

  • アクセサのプロパティ

アクセサプロパティにデータ値が含まれていません。この属性には、構成可能、列挙可能、get関数、set関数の4つのプロパティがあります。一般に、アクセサプロパティは、あるプロパティの値によって別のプロパティの値が変化するシナリオで使用されます。

栗をあげる

// accessor properties var book = { _year :2004, editon:1 }

上記のbookオブジェクト、_yearおよびeditonはすべてデータ属性ですが、_yearの特別な名前は、_yearがオブジェクトメソッドを介してのみアクセスできるプロパティであることを示しており、今年がアクセサープロパティであることを意味します。

Object.defineProperty(book,'year',{ get:function () { return this._year }, set:function (newValue) { if (newValue > 2004){ this._year = newValue this.editon = newValue - 2004 + this.editon } } }) book.year = 2008 console.log(book.editon)

最後に印刷されたbook.editionの値は5です。上記のコードは、エディションのdataプロパティの値を変更し、accessorプロパティの値はsetメソッドによって変更されます。

オブジェクトを作成するNの方法、主に3つについて話しましょう

コンストラクターモード

/ / Constructor to create an object function Person(name,age,address) { this.name = name this.age = age this.address = address this.sayName = function () { console.log(this.name) } // console.log(this) } var person1 = new Person('nice',12,'china')

コンストラクターパターンを使用してインスタンスオブジェクトを作成するには、new演算子を使用する必要があります。コンストラクターは通常、大文字で始まり、他の関数とは区別されます。コンストラクターのこれは、新しいオブジェクト(生成されるインスタンスオブジェクト)を指します。

コンストラクターの問題は、各メソッドが各インスタンスで再作成されることです。つまり、異なるインスタンスオブジェクトの同じ名前の関数は等しくありません。

/The same name function using the constructor is not equal var person1 = new Person('abc',12,'china') var person2 = new Person('def',23,'english') console.log(person1.sayName == person2.sayName)

上記のコードはfalseとして出力されます。

コンストラクターにはインスタンスオブジェクトごとに異なるメソッドがあるため(メソッドの名前は同じでスペースも異なります)、プロトタイプパターンの誕生によってこの問題が解決されます。

function Animal() { } Animal.prototype.name = 'cat' Animal.prototype.age = 12 Animal.prototype.sayName = function () { console.log(this.name) } var animal1 = new Animal() var animal2 = new Animal() console.log(animal1.sayName == animal2.sayName)

上記のコード出力はtrueであり、インスタンスオブジェクトanimal1とインスタンスオブジェクトanimal2がすでにメソッドを共有していることを示しています。

まず、プロトタイプオブジェクトとは何かを理解しましょう。
関数を作成すると、その関数には、関数のプロトタイプオブジェクトを指すプロトタイププロパティがあります。このプロトタイプオブジェクトには、コンストラクター自体へのポインターであるコンストラクターと呼ばれるプロパティもあります。
次に、コンストラクターのプロトタイプオブジェクトへのポインターを持つインスタンスオブジェクトanimal1を作成します。
みんなのために絵を描いた:


コンストラクターとプロトタイプおよびインスタンスオブジェクト

したがって、インスタンスオブジェクトはコンストラクターに直接関連しておらず、プロトタイプオブジェクトはそれに関連付けられています。

次に、jsがインスタンスオブジェクトとプロトタイプオブジェクト間の関係をどのように処理するかを見てみましょう。

  • 1.インスタンスオブジェクトのプロパティに値を割り当てずにインスタンスオブジェクトを生成します。
function Animal() { } Animal.prototype.name = 'cat' Animal.prototype.age = 12 Animal.prototype.sayName = function () { console.log(this.name) } var animal1 = new Animal() animal1.sayName() // print cat
  • 2.インスタンスオブジェクトのプロパティに値を割り当てます
var animal1 = new Animal() animal1.name = 'rubbit' animal1.sayName() // print rubbit

この時点で、インスタンスオブジェクトのname属性には値rubbitが割り当てられますが、プロトタイプオブジェクトのname属性の値はまだcatです。

  • 3.プロトタイプオブジェクトには参照型属性があり、複数のインスタンスオブジェクトが参照型属性を共有しています。
animal1.friends.push('fish','duck') console.log(animal1.friends) // ['dog','bird','fish','duck'] var animal2 = new Animal() console.log(animal2.friends) //['dog','bird','fish','duck']

animal1インスタンスオブジェクトは参照型プロパティを変更し、animal2によって共有されます。ある時点で、これは私たちが望む結果ではありません。

コンストラクターとプロトタイプパターンの組み合わせ

前述のように、コンストラクターパターンはスペースを浪費し、プロトタイプパターンのプロパティはすべてのインスタンスオブジェクトで共有されますが、それぞれに欠点があります。次に、結合モードはこれら2つの問題を解決します。
コンストラクターは、インスタンスに固有のインスタンスプロパティを定義するために使用され、渡された引数を受け取ります。プロトタイプパターンは、メソッドとインスタンスのいずれか長い方で共有されるプロパティを定義するために使用されます。

// constructor pattern function Person(name,age,address) { this.name = name this.age = age this.address = address this.friends= ['bob','nicy'] } // prototype mode Person.prototype = { constructor : Person, sayName:function () { console.log(this.name) } } var person1 = new Person('cat',12,'eng') var person2 = new Person('dog',13,'cha') person1.sayName() //cat person2.sayName() // dog console.log(person1.sayName === person2.sayName) //true console.log(typeof person1) // Object person1.friends.push('van') console.log(person1.friends) // ['bob','nicy','van'] console.log(person2.friends) // ['bob','nicy']

もちろん、寄生コンストラクターパターン、安全なコンストラクターパターン、およびその他のあまり一般的ではない方法があります。利害関係者は自分で見つけることができます。

さて、ここで、オブジェクトとは何ですか。さまざまな状況でオブジェクトを作成すると、基本的には完成します。簡単に言えば、コンストラクター、プロトタイプ、およびインスタンス間の関係は、各コンストラクターにプロトタイプオブジェクトがあり、プロトタイプオブジェクトにはコンストラクターへのポインターが含まれ、これにはプロトタイプオブジェクトへの内部ポインターが含まれます。

さて、次の友達、次の友達は相続について話します。