No.12オブジェクトの作成方法(class、function、new、this)

私は学習者たちと私のcobe第12題classについての内容を討論したときに思いついたので、文章を書いて整理しました!classは自分を反省し、反応にも書き、概念的にも何を書いたのか分からない.😥
📝 Classes
クラスは、オブジェクトを作成するためのテンプレートです.クラスは、データとデータを処理するコードを抽象化します.JavaScriptでは、クラスはプロトタイプを使用して作成されますが、その構文と意味はES 5のクラスとは異なります.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes
要するにclassは、複数のオブジェクトを作成するためのテンプレートと考えられ、es 6の前に関数を使用して類似のオブジェクトを作成する.

関数の使用方法🗣

function Dog(name){
	this.name = name;
}

let dog = new Dog('제톰');
console.log(dog.name);

classの使用方法🗣

class Jetom{
  constructor(age, blood){
  	this.age = age;
    this.blood = blood;
  }
}

const dog = new Jetom(5, '비숑');

console.log(dog.age, dog.blood);

書いてありますが、thisとnewの2つの言葉が目立つので、どんな仕事をしているのか見てみましょう!

これと新しい👀

ここの内容は生活コードを参考にしています▼▼
📝 new
新演算子は、カスタムオブジェクトタイプまたは組み込みオブジェクトタイプのインスタンスを生成します.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/new

//obj
const person = {};

//객체 내의 변수를 프로퍼티(property, 속성)라고 부른다.
person.name = 'jetom';

//property에 담겨 있는 함수를 메서드(method, 방법)라고 부르다.
person.introduce = function(){
	return 'My name is' +this.name;
}

//메서드 안의 this.name은 person의 객체를 가리키며 
//person.name의 값을 'jetom'으로 담아줬으니 결국 'jetom'을 호출한다.
console.log(person.introduce);

上記のサンプルコードは、「jetom」という子犬の情報のみを含むために使用されます.しかし、子犬が何匹もいたら、どうすればいいですか.このときジェネレータとnewを使用する時刻です.

コンストラクタ

コンストラクション関数は、オブジェクトを作成する関数です.JavaScriptでは、関数は再利用可能な論理の集合ではなく、オブジェクトを作成する作成者です.
https://opentutorials.org/module/532/6571

function Dog(){}

//new는 생성자 함수라고 부르며 이 때 생성되는것은 비어있는 객체이다.
//let many = {}랑 같다고 생각하면 된다.
function Dog(name){
  
  	//객체가 생성될 때마다 만들어지는 코드
    this.name = name;
    this.introduce = function(){
        return 'My name is '+' '+this.name; 
    }   
}
let many = new Dog('jetom');
console.log(many.introduce())
 
let many2 = new Dog('rari');
console.log(many2.introduce())

上記のコードでは、ジェネレータにオブジェクトのpropertyが定義されており、これを初期化(initialize)と呼びます.
📝 this
これは、関数で関数を呼び出すコンテキスト(context)を意味します.「脈絡」は、状況に応じて変化するという意味です.つまり、関数をどのように呼び出すかによって、そのオブジェクトが異なることを意味します.関数とオブジェクトの関係がばらばらなJavaScriptでは,両者を結びつける実際の接続点である.
https://opentutorials.org/module/532/6571

関数とthis

オブジェクトに属していない場合、thisはWebブラウザのグローバルオブジェクト名であるwindowを指します.したがって、以下の例ではfuncのthisはwindowであるため、windowを省略してfunc()を出力することができる.(暗黙的に使用する関数の名前はwindowです.)

function func(){
	if(window === this){
    console.log('window === this');
   }
}

//window.func()를 해도 정상적으로 작동한다.
func()

メソッドとthis
(ここではモダンJavaScriptを参考にした▼▼)

メソッドは、オブジェクトに格納された情報にアクセスしてこそ、その役割を果たすことができる.すべてのメソッドがそうではありませんが、ほとんどのメソッドではオブジェクト構成の値が使用されます.
メソッドでは、このキーワードを使用してオブジェクトにアクセスできます.
「点の前」のthisはオブジェクトを表します.正確には、メソッドを呼び出すときに使用されるオブジェクトを表します.
https://ko.javascript.info/object-methods#ref-933

let dog = {
  name: "jetom",
  age: 5,
  //객체안의 함수는 function 생략 가능
  sayHi() {
    // 'this'는 '현재 객체'인 dog를 가르킨다.
    console.log((this.name));
  }
  
};

dog.sayHi();

ジェネレータとthis

let funcThis = null;

function Func(){
    funcThis = this;
}

//new가 없으므로 일반 함수를 호출함
const o1 = Func();
if(funcThis === window){
    console.log(('window'));
}
 
//func()는 o2에서 new를 통해서 호출 했기 때문에 생성자를 호출함
const o2 = new Func();
if(funcThis === o2){
    console.log(('o2'));
}

o 1出力時にウィンドウが撮られた原因は?
Func()は一般的な関数で、前述したようにwindowは省略されているため、o 1のFunc()はfuncThisでwindowを撮影する.
o 2を出力したときになぜo 2が撮れたのですか?
コンストラクション関数としてnewを呼び出すと、JavaScriptで空のオブジェクトが作成され、空のオブジェクトはコンストラクション関数でthisになります.したがって、Funcのこの値は、条件文に従ってo 2を出力するfuncThisとなる.
したがって、コンストラクション関数として使用する場合、thisの値は作成するオブジェクトを指し、通常の関数を呼び出す場合、thisの値はwindowを指します.

书いた后にclassを起用して书く内容より、関数で実现するコードが多いことを発见します...原理は同じです.こっそり行きたい...ほほほ🙄