여기에 많은 사람들이 객체 생성을위한 최선의 방법은 없다고 말하지만 2019 년 현재 JavaScript로 객체를 생성하는 방법이 너무 많은 이유에 대한 근거가 있으며, 이는 다른 반복에서 JavaScript의 진행과 관련이 있습니다 1997 년에 설립 된 EcmaScript 릴리스.

ECMAScript 5 이전에는 생성자 함수 또는 리터럴 표기법 (new Object ()에 대한 더 나은 대안)이라는 두 가지 방법으로 객체를 만들 수있었습니다. 생성자 함수 표기법을 사용하면 여러 키워드로 인스턴스화 할 수있는 객체를 만들고 (새 키워드로) 리터럴 표기법은 싱글 톤과 같은 단일 객체를 제공합니다.

// constructor function
function Person() {};

// literal notation
var Person = {};

사용하는 방법에 관계없이 JavaScript 객체는 단순히 키 값 쌍의 속성입니다.

// Method 1: dot notation
obj.firstName = 'Bob';

// Method 2: bracket notation. With bracket notation, you can use invalid characters for a javascript identifier.
obj['lastName'] = 'Smith';

// Method 3: Object.defineProperty
Object.defineProperty(obj, 'firstName', {
    value: 'Bob',
    writable: true,
    configurable: true,
    enumerable: false
})

// Method 4: Object.defineProperties
Object.defineProperties(obj, {
  firstName: {
    value: 'Bob',
    writable: true
  },
  lastName: {
    value: 'Smith',
    writable: false
  }
});

JavaScript의 초기 버전에서 클래스 기반 상속을 모방하는 유일한 방법은 생성자 함수를 사용하는 것입니다. 생성자 함수는 ‘new’키워드로 호출되는 특수 함수입니다. 관례에 따라 함수 식별자는 대문자로 표시되지만 필수는 아닙니다. 생성자 내부에서 생성자 함수가 내재적으로 생성하는 객체에 속성을 추가하기 위해 ‘this’키워드를 참조합니다. return 키워드를 명시 적으로 사용하고 다른 것을 반환하지 않는 한 생성자 함수는 채워진 속성이있는 새 객체를 암시 적으로 호출 함수에 암시 적으로 반환합니다.

function Person(firstName, lastName) {
    this.firstName = firstName;
    this.lastName = lastName;

    this.sayName = function(){
        return "My name is " + this.firstName + " " + this.lastName;
    }
}

var bob = new Person("Bob", "Smith");
bob instanceOf Person // true

sayName 메소드에 문제가 있습니다. 일반적으로 객체 지향 클래스 기반 프로그래밍 언어에서는 클래스를 팩토리로 사용하여 객체를 만듭니다. 각 객체에는 자체 인스턴스 변수가 있지만 클래스 청사진에 정의 된 메소드에 대한 포인터가 있습니다. 불행히도, JavaScript 생성자 함수를 사용할 때, 그것이 호출 될 때마다 새로 생성 된 객체에 새로운 sayName 속성을 정의합니다. 따라서 각 객체에는 고유 한 sayName 속성이 있습니다. 이것은 더 많은 메모리 리소스를 소비합니다.

증가 된 메모리 자원 외에도 생성자 함수 내에 메소드를 정의하면 상속 가능성이 제거됩니다. 이 메소드는 새로 작성된 오브젝트의 특성으로 정의되며 다른 오브젝트는 정의되지 않으므로 상속이 작동하지 않습니다. 따라서 JavaScript는 프로토 타입 체인을 상속 형태로 제공하여 JavaScript를 프로토 타입 언어로 만듭니다.

부모가 있고 부모가 자식의 많은 속성을 공유하는 경우 자식은 해당 속성을 상속해야합니다. ES5 이전에는 다음과 같이 수행되었습니다.

function Parent(eyeColor, hairColor) {
    this.eyeColor = eyeColor;
    this.hairColor = hairColor;
}

Parent.prototype.getEyeColor = function() {
  console.log('has ' + this.eyeColor);
}

Parent.prototype.getHairColor = function() {
  console.log('has ' + this.hairColor);
}

function Child(firstName, lastName) {
  Parent.call(this, arguments[2], arguments[3]);
  this.firstName = firstName;
  this.lastName = lastName;
}

Child.prototype = Parent.prototype;

var child = new Child('Bob', 'Smith', 'blue', 'blonde');
child.getEyeColor(); // has blue eyes
child.getHairColor(); // has blonde hair

위의 프로토 타입 체인을 활용 한 방식에는 단점이 있습니다. 프로토 타입은 라이브 링크이므로 프로토 타입 체인에서 한 객체의 속성을 변경하면 다른 객체의 동일한 속성도 변경됩니다. 자식의 상속 된 메소드를 변경해도 부모의 메소드는 변경되지 않아야합니다. Object.create는 폴리 필을 사용하여이 문제를 해결했습니다. 따라서 Object.create를 사용하면 프로토 타입 체인에서 부모의 동일한 속성에 영향을주지 않고 프로토 타입 체인에서 자식 속성을 안전하게 수정할 수 있습니다.

ECMAScript 5는 객체 생성을위한 생성자 함수에서 위에서 언급 한 버그를 해결하기 위해 Object.create를 도입했습니다. Object.create () 메소드는 기존 오브젝트를 새로 작성된 오브젝트의 프로토 타입으로 사용하여 새 오브젝트를 작성합니다. 새 객체가 생성되었으므로 더 이상 프로토 타입 체인에서 하위 속성을 수정하면 체인에서 해당 속성에 대한 부모의 참조가 수정되는 문제가 없습니다.

var bobSmith = {
    firstName: "Bob",
    lastName: "Smith",
    sayName: function(){
      return "My name is " + this.firstName + " " + this.lastName;
    }
}

var janeSmith = Object.create(bobSmith, {
    firstName : {  value: "Jane" }
})

console.log(bobSmith.sayName()); // My name is Bob Smith
console.log(janeSmith.sayName()); // My name is Jane Smith
janeSmith.__proto__ == bobSmith; // true
janeSmith instanceof bobSmith; // Uncaught TypeError: Right-hand side of 'instanceof' is not callable. Error occurs because bobSmith is not a constructor function.

ES6 이전에는 함수 생성자와 Object.create를 활용하는 일반적인 생성 패턴이 있습니다.

const View = function(element){
  this.element = element;
}

View.prototype = {
  getElement: function(){
    this.element
  }
}

const SubView = function(element){
  View.call(this, element);
}

SubView.prototype = Object.create(View.prototype);

이제 생성자 함수와 결합 된 Object.create는 JavaScript에서 객체 생성 및 상속에 널리 사용되었습니다. 그러나 ES6는 클래스 개념을 도입했는데, 이는 주로 JavaScript의 기존 프로토 타입 기반 상속에 비해 구문상의 설탕입니다. 클래스 구문은 JavaScript에 새로운 객체 지향 상속 모델을 도입하지 않습니다. 따라서 JavaScript는 프로토 타입 언어로 남아 있습니다.

ES6 클래스는 상속을 훨씬 쉽게 만듭니다. 더 이상 부모 클래스의 프로토 타입 함수를 수동으로 복사하고 자식 클래스의 생성자를 재설정 할 필요가 없습니다.

// create parent class
class Person {
  constructor (name) {
    this.name = name;
  }
}

// create child class and extend our parent class
class Boy extends Person {
  constructor (name, color) {
    // invoke our parent constructor function passing in any required parameters
    super(name);

    this.favoriteColor = color;
  }
}

const boy = new Boy('bob', 'blue')
boy.favoriteColor; // blue

자바 스크립트에서이 5 가지의 서로 다른 객체 생성 전략은 EcmaScript 표준의 발전과 일치했습니다.

답변

var empty = {};
console.log(empty.toString);
// . function toString(){...}
console.log(empty.toString());
// . [object Object]

var new_object = Object.create(null)

new_object.name = 'Roland'
new_object.last_name = 'Doda'
//etc

console.log("toString" in new_object) //=> false

//Object constructor
var object = new Object();

console.log("toString" in object); //=> true

//Literal constructor
var person = {
  name : "Anand",
  getName : function (){
   return this.name
  }
}

console.log("toString" in person); //=> true

//function Constructor
function Person(name){
  this.name = name
  this.getName = function(){
    return this.name
  }
}

var person = new Person ('landi')

console.log("toString" in person); //=> true

//Prototype
function Person(){};

Person.prototype.name = "Anand";

console.log("toString" in person); //=> true

//Function/Prototype combination
function Person2(name){
  this.name = name;
}

Person2.prototype.getName = function(){
  return this.name
}

var person2 = new Person2('Roland')

console.log("toString" in person2) //=> true

 for (var property in new_object) {
  if (new_object.hasOwnProperty(property)) {
    // ... this is an own property
  }
 }