자바스크립트로 객체를 생성하는 3가지 방법

이 글에서는 js에서 객체를 생성하는 다양한 방법과 각 방법의 장단점을 공유합니다.

객체를 생성하는 첫 번째 방법:

만들기 JSON 객체
권장 사용 사례: 함수의 매개변수로 일시적으로 한 번만 사용됩니다. 예를 들어, 함수 프로토타입 객체를 설정합니다.

var object = {
 name: "Eric",
 age: 24,
 sayHi: function(){
  console.log("My name is "+ this.name + " this year is " + this.age + "years old.")
 }
};

객체를 생성하는 두 번째 방법:

객체 객체 생성

var object = new Object();
object.name = "Eric";
object.age = 24;
object.sayHi = function(){....};

위의 두 가지 객체 생성 방법의 단점: 객체 생성을 위한 템플릿으로 사용할 수 없습니다. 즉, new로 새 객체를 구성할 수 없습니다.

객체를 생성하는 세 번째 방법:

function Person() {
 this.name = "Eric";
 this.age = 24;
 this.sayHi = function(){
  console.log(this.name);
 }
}
 
var object1 = new Person();
var object2 = new Person();

이러한 객체 생성 방법은 처음 두 가지 방법의 단점을 해결합니다. 객체 생성을 위한 템플릿이므로 여러 객체를 생성하는 데 재사용할 수 있습니다.

new 연산자의 역할:

생성자(new 다음 함수)를 실행하고 생성자 내부에 빈 객체를 생성합니다.
이전 부분에서 생성한 빈 객체를 생성합니다. 함수의 프로토타입 객체
그리고 이를 현재 빈 객체를 가리킨다
생성자가 실행된 후 반환값이 없으면 빈 객체를 객체로 반환

new의 원리 연산자

세 번째 방법에는 단점이 있습니다. 객체의 내부 기능이 각 객체에 저장되므로 많은 객체가 생성되면 엄청난 메모리 낭비가 됩니다. 함수의 동작은 모든 개체가 공유할 수 있으며 각 개체가 복사본을 저장할 필요가 없다는 것입니다. 따라서 선언을 위해 프로토타입에 함수를 넣을 수 있습니다. 그러면 모든 개체가 공용 함수를 갖게 되며 하나의 복사본만 메모리에 보관됩니다. 모든 속성은 객체 내부에 기록됩니다

세 번째 방법 beta1:

function Person() {
 this.name = 'Eric';
 this.age = 24;
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person();
var object2 = new Person();

beta2 계속 업그레이드:

function Person(name,age) {
 this.name = name || "";
 this.age = age || "";
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person(name1,age1);
var object2 = new Person(name2,age2);

문제: 1. 호출자가 매개변수 전달 순서를 변경하면 소용이 없습니다.
문제: 2. 매개변수를 늘리거나 줄이면 오류가 발생합니다. 변경할 함수 선언도 변경될 수 있습니다.

해결 방법: 베타3 계속 업그레이드:

function Person(option) { //用一个对象把所有参数覆盖
 this.name = option.name || "";
 this.age = option.age || "";
}
Person.prototype = {
 sayHi: function() {
 },
};
 
var object1 = new Person({
  name: "Eric",
  age: 24
 });
var object2 = new Person({
  name: "XXX",
  age: xx
 });

계속 최적화하고 초기화 코드를 init 함수에 넣습니다.

베타4 계속 업그레이드:

function Person(option) {
 this._init(option);
}
Person.prototype = {
 _init: function (option){
  this.name = option.name;
  this.age = option.age;
 },
 sayHi: function(){
  console.log("HI");
 }
};
 
var object1 = new Person({
  name: "Eric";
  age: 24
 });
object1.sayHi();