対象の概念を整理する

JavaScriptはほとんどのものが対象と考えられます.非オブジェクトは固定されています.基本データ型boolean、number、string、特殊値null、undefinedです.その他、関数、配列などのJavaScript要素はすべてオブジェクトです.

対象とは？

オブジェクト=「{key:value}」形式のPropertiesを格納するコンテナ.

Property:JavaScriptでは、オブジェクトはPropertyで構成され、キー:値の形式で指定され、関数も指定できます.オブジェクトに関数を指定する場合は、メソッドと呼ばれます.

const Data = {
	car: 'pontiac',
    animal: 'Egyptian vulture',
    color: 'green'
}

ここのキーはcar,mobile,color,valueはpontiac,エジプトハゲワシ,greenです.

キャビネットが入った箱がDataです.そしてそのデータには3つのファイルが入っています.このファイルが鍵です.car、mobile、colorというファイルがコンテナにあります.しかも中にはたくさんの価値があります.
これらの整理されたオブジェクトを使用して、無数の値をキーインデックスに挿入し、迅速かつ正確に見つけることができます.

オブジェクトの読み取り、書き込み、変更

1)オブジェクトの作成

const Data = {};
Data.car = 'Pontiac';
Data.animal = 'Egytian vulture';
Data.color = 'green';

Data
'Pontiac'
'Egytian vulture'
'Green'
{ car:'Pontiac', animal: 'Egytian vulture', color:'green' }

データを括弧で宣言します.(オブジェクトを表す)各キーを空のオブジェクトに追加します.点を上にして、コロンの後ろに「value」と書きます.
2)オブジェクトの読み取り

const Data = {
	car: 'pontiac',
    animal: 'Egytian vulture',
    color: 'green'
}
Data.car
Data.animal
Data.color
or
Data['car']
Data['animal']
Data['color']

作成したオブジェクトの値がロードされたとき.円と括弧の使用
.温度:オブジェクトの作成時と同様にvalueを読み込むことができます.
[]大かっこ:スペースを含むキーは大かっこでアクセスし、数値のキー値は大かっこでアクセスする必要があります.引用符を付けなければなりません.
3)オブジェクトへのキーとbellクラス値の追加
配列を追加できますか?オブジェクトを追加できますか?すべてが可能だ.

const Data = {
	car: 'pontiac',
    animal: 'Egytian vulture',
    color: 'green'
}

Data.array = '[1,2,3]'
Data.person = {}; // person이라는 객체를 객체 안에 생성 
Data.person.name='Edie' // person이라는 객체 안에 key+value 추가 
Data.person.gender = 'female' // person이라는 객체 안에 key+value 추가

'[1,2,3]'
{}
'Edie'
'female'

const Data = {
	...
    array: [1,2,3]
    person: {name: 'Edie', gender: 'female'}
}

生成されたデータにarrayキーを作成し、配列に入れます.次に、オブジェクトを再び挿入するには、personという名前のキーをオブジェクトとして宣言し、personという名前のオブジェクトにkeyとvalue値を挿入します.
ここで注意したいのは、Dataです.鍵personをオブジェクトのデータとして宣言しません.person.直接名前をつけることはできません.まず客体として宣言しなければならない.
4)すべてのキー、valueを読み込む
オブジェクトを読み込むときに一度に処理したい場合は?for inを使いましょう

for (key in Data) {
	console.log(key) // 'car', 'animal', 'green'
    value = Data[key]
    console.log(value) // 'Pontiac', 'Egyptian vulture', 'green'
}

5)オブジェクトに関するアプローチ
オブジェクトに関連するメソッドを使用できます!

Object.keys()
このオブジェクトメソッドは、パラメータとして渡されるオブジェクトのすべてのキーを配列形式で表示します.
['car', 'animal', 'color']

Object.values()
すべての値を配列として表示します.
['Pontiac', 'Egytian vulture', 'Green']

Object.assign(target, source)
パラメータとして受信したオブジェクトをマージします.3つ以上のオブジェクトを入れても、すべてマージされます.ソースがなくてtargetだけが書かれている場合は、targetを直接コピーします.

const DataCopy = {name: 'Ann', gender: 'female'}
const newData = Object.assign(Data, DataCopy);
console.log(newData)

{...
name: 'Ann'
gender: 'female'
}

6)オブジェクトをreprenceとして保存
相手を比較できますか?同じkey,valueをそれぞれ異なる変数名として格納する.
そのうちDatacolor==Data.nameは同じ値を持つのでtrueです.
ただし、key、valueを含む変数自体を比較するとfalseが表示されます.
why? オブジェクト文字自体を変数に格納するのではなく、オブジェクトを含むメモリの参照を格納するため、実際のデータとDataCopyの真の値は異なります.
オブジェクトオブジェクトのコンセプトと使用元

Classとは?

「クラスはオブジェクト向けプログラミングの核心です.」オブジェクト向けプログラミングという言葉では、「オブジェクト」はJavaScriptのデータ型ではなく、物事を指す.
しかし,クラスは最終的にkeyとvalueを持つobjectのフレームワークを設計するためである.ただし、このオブジェクトには、特定の論理を持つ動作(メソッド)と変更可能な状態(メンバー変数)があります.
大きなオブジェクトや似たようなシェイプのオブジェクトを作成する必要がある場合は、毎回オブジェクトを作成して使用するのではなく、classという大きな設計図でオブジェクトを作成できます.

let ray = {
	name: 'Ray',
    price: 20000,
    getName: function(){
    	return this.name;
    },
    getPrice: function(){
    	return this.price;
    },
    applyDiscount: function(discount){
    	return this.price*discount;
    }
}

このクラスではpropertyvalueに関数があります.getPrice()という関数を上から読み込むためにray.getPrice()のようにアクセスオブジェクトのようにロードできます.
メソッド:オブジェクト.保証する
オブジェクトの内部で、オブジェクトのプロパティにアクセスするには、キーワード「this」を使用します.
だからgetPriceメソッドではpriceはpriceキーに近づき、20000をもたらすことができます.

ジェネレータConstructor

オブジェクトの設計図として、クラスの構文は似ています.逆に、クラスにはconstructorという構造関数があります.クラスにコンストラクション関数名を持つ方法は、1つである必要があります.
cont変数名=新しいクラス名(key,value)
このようにクラスでオブジェクトを作成するプロセスをインスタンス化と呼びます.次に、このクラスで生成されたオブジェクトをインスタンスと呼びます.
*インスタンス:クラスのコピー

const mornig = new CarePosition('morning', 2000000);

class Car {
	constructor(name, price);
    this.name = name;
    this.price = price;
}

Carはクラスの名前です.常に大文字、CamelCaseで合成されます.

Carクラスのインスタンスが生成されるたびにconstructorメソッドが呼び出されます.

コンストラクション関数()メソッドは、name、priceというパラメータを受け入れます.

コンストラクション関数()メソッドは、このキーワードを使用します.これは、クラスの実行範囲(コンテキスト)では、オブジェクト(インスタンス)を意味します.

Conductor()からパラメータへのname、priceがCarインスタンスのname、price propertyに値を割り当てます.

のように、クラス内のステータス値(name、priceなど)およびクラス内のコンテキストの任意の場所で使用できる変数を「メンバー変数」と呼びます.

メンバー変数は、「this」キーでアクセスします.

インスタンスインスタンス

上にclassインスタンスが生成されます.
≪インスタンス｜Instance｜emdw≫
クラスによって作成されたオブジェクト.
クラスのproperty名とメソッドを持つオブジェクト.
各インスタンスには異なるproperty値があります.

インスタンスは、クラス名にnewを追加することによって作成される.

クラス名の右側に()カッコを開き、閉じます.内部コンストラクション関数は、必要な情報をパラメータとして渡します.

Carクラスのインスタンスをmorningという変数に格納します.

Carクラスの新しいインスタンスを再生成するには、newというキーワードが必要です.newキーワードはコンストラクション関数()メソッドを呼び出し、新しいインスタンスを返します.

"Morning"文字列と2000000数字をCarジェネレータに渡し、nameとprice propertyにそれぞれの値を割り当てます.

方法

メソッドは関数です.ただし、オブジェクトが持つproperty値をメソッドと呼びます.クラスのメソッドは、オブジェクトの構文と同じです.ただし、オブジェクトはカンマで区切らなければなりませんが、クラスはそうではありません.

class Car {
	constructor(name, price){
    	this.name=name;
        this.price=price;
        this.department = '선릉지점';
    }
    
    applyDiscount(discount) {
    	return this.price*discount;
    }
    changeDepartment(departmentName){
    	this.department=departmentName;
    }
}

JavaScript Class

10.プロトタイプとクラス

オブジェクト作成者

プロトタイプとクラスを理解する前に、まずオブジェクト作成者を理解します.
オブジェクト作成者は、関数を使用して新しいオブジェクトを作成し、挿入する値または関数を実装できます.

function Animal(type, name, soound) {
	this.type = type;
    this.name = name;
    this.sound = sound;
    this.say = function() {
    	console.log(this.sound);
    }
}

const dog = new Aniaml('dog', 'bow', 'bowwow');
const cat = new Animal('cat', 'miya', 'miyaaaa');

dog.say();
cat.say();

オブジェクトジェネレータを使用する場合、通常は大文字で関数の名前を先頭に置き、新しいオブジェクトを作成する場合はnewというキーワードを前に付ける必要があります.
dogが持つsay関数はcatが持つ実行コードと同じですが、オブジェクトを作成するたびに新しい関数が作成されます.sayに設定します.
同じオブジェクトを使用して関数を構築する場合は、特定の関数または値を繰り返し使用できます.これがプロトタイプです.

プロトタイプ

プロトタイプは、次のようにオブジェクト作成者関数の下にあります.prototype.「必要な鍵」=入力コードで設定できます.

function Animal(type, name, sound){
	this.type=type;
    this.name=name;
    this.sound=sound;
}

Animal.prototype.say=function(){
	console.log(this.sound);
}

Animal.prototype.sharedValue=1;

const dog = new Animal('dog', 'bowwow', 'bow');
const cat = new Animal('cat', 'miya', 'miyaa');

console.log(dog.sharedValue);
console.log(cat.sharedValue);

オブジェクト作成者の継承の取得

たとえば、CatとDogという新しいオブジェクトジェネレータを作成するとします.オブジェクト作成者がAnimalの機能を再利用する場合は、このように実現できます.

function Animal(type, name, sound){
	this.type=type;
    this.name=name;
    this.sound=sound;
}

Animal.prototype.sharedValue=1;

function Dog(name, sound){
	Animal.call(this, 'dog', name, sound);
}
Dog.prototype=Animal.prototype;

function Cat(name, sound){
	Animal.call(this, 'cat', name, sound);
}
Cat.prototype=Animal.prototype;

const dog = new Dog('bowwow', 'bow');
const cat = new Cat('cat', 'miya'):

dog.say();
dog.cat();

新しく作成したDogとCat関数でAnimalを使用します.最初のパラメータにthisとAnimalオブジェクトジェネレータ関数に必要なパラメータが含まれているcallを呼び出します.
プロトタイプを共有する必要があるため、継承されたオブジェクトジェネレータ関数を作成した後、プロトタイプ値をAnimalに設定します.プロトタイプに設定します.

カテゴリ

クラスはプログラミング言語の機能ですが、JavaScriptには含まれていません.そのため、ES 5はオブジェクト構築関数を使用して、以下に示すようなタスクを実現します.
ES 6にはclassという構文が追加され、オブジェクトジェネレータを使用して実装されたコードがより明確で簡潔で、継承しやすいようになりました.

class Animal{
	constructor(type, name, sound){
    	this.type = type;
        this.name = name;
        this.sound = sound;
    }
    say(){
    	console.log(this.sound);
    }
}

const dog = new Animal('dog', 'bow', 'bowwow');
const cat = new Animal('cat', 'miya', 'miyaaa');

dog.say();
cat.say();

//bowbwow
//miyaaa

classを使用すると、他のクラスを簡単に継承できます.

class Animal{
	constructor(type, name, sound){
    	this.type=type;
        this.name=name;
        this.sound=sound;
    }
    say(){
    	console.log(this.sound);
    }
}

class Dog extends Animal{
	constructor(name, sound){
    	super('dog', name, sound)
    }
}

class Cat extends Animal{
	construtor(name, sound){
    	super('cat', name, sound);
    }
}

const dog = new Dog('bow', 'bowwow')
const cat = new Cat('miya', 'miyaaa')

dog.say();
cat.say();

practice!

class Food{
	constructor(name){
    	this.name=name;
        this.brands = [];
    }
    addBrand(brand){
    	this.brands.push(brand);
    }
    print(){
    	console.log(`${this.name}을 파는 음식점들:`)
        console.log(this.brands.join(', '));
    }
}

const pizza = new Food('피자');
pizza.addBrand('파파존스');
pizza.addBrand('도미노');

const coffee = new Food('커피');
coffee.addBrand('starbucks');
coffee.addBrand('커피빈');