F/E 기초 - JSON

javascript 객체에 대하여

---

객체란?

객체는 관련된 데이터 아이템(프로퍼티)와 함수(메서드)의 집합이다.

객체는 각기 다른 이름(키)과 값(값)을 갖는 복수개의 멤버로 구성되며 이름과 값은 :으로 분리돤다.

const person = {
  name: ["Bob", "Smith"],
  age: 32,
  gender: "male",
  interests: ["music", "skiing"],
  bio: function () {
    alert( this.name[0] + " " + this.name[1] + " is " + this.age + " years old. He likes " + this.interests[0] + " and " + this.interests[1] + ".", );
  },
  greeting: function () {
    alert("Hi! I'm " + this.name[0] + ".");
  },
};

이렇게 객체를 생성할 때 컨텐츠를 그대로 대입하는 객체를 두고 객체 리터럴(object literal)이라고 부른다. 객체 리터럴은 클래스로부터 생성하는 방식과는 다르다. 객체 리터럴을 사용해서 객체를 생성하는 것은 연관된 데이터를 일정한 방법으로 변환하고자 할 때 많이 쓰인다. 각 아이템을 하나씩 개별발송하는 것보다 하나의 객체에 담아 전송하는 게 효율적이다. 또 키 값이 있기 때문에 배열보다 사용이 쉽다.

 

하위 namespaces

객체 멤버의 값으로 객체를 갖는 것도 가능하다. 하위 네임스페이스인 name을 작성하면 아래와 같다.

name : {
  first: 'Bob',
  last: 'Smith'
},

점 접근법

이러한 객체의 프로퍼티와 메서드에 점 표기법을 통해 접근할 수 있다. 객체 이름(person)은 네임스페이스처럼 동작한다. 점 표기법은 멤버의 이름을 동적으로 사용할 수 없고 상수 값만을 사용해야 한다.

person.name.first;
person.name.last;

괄호 표기법

person["age"];
person["name"]["first"];

객체의 값을 갱신하는 것도 물론 가능하다.

person.age = 45;
person["name"]["last"] = "Cratchit";

객체의 멤버 추가도 가능하다.

person["eyes"] = "hazel";
person.farewell = function () {
  alert("Bye everybody!");
};

아래처럼 대괄호를 사용하면 멤버의 이름도 동적으로 설정할 수 있다.

var myDataName = nameInput.value;
var myDataValue = nameValue.value;

person[myDataName] = myDataValue;

---

MDN 객체 페이지 정리

객체 생성하기

객체 초기자 == 리터럴 표기로 생성하기

객체 초기자는 표현식이며 자신이 속한 선언문이 실행될 때마다 새로운 객체를 생성한다. 초기자가 생성하는 객체는 마치 new Object() 호출을 한 것과 같이 생성된다. 즉, 객체들은 Object의 인스턴스이다. 따라서 같은 초기자가 생성한 객체끼리라도 구별 가능하며 서로 비교했을 때 거짓을 반환한다.

const myCar = {
  make: "Ford",
  model: "Mustang",
  year: 1969,
};

객체의 이름과 할당구문은 선택사항으로 생략 가능하다.
속성의 값은 식별자, 숫자, 문자열 모두 가능하다.

const obj = {
  property_1: value_1, // 식별자
  2: value_2, // 숫자
  "property n": value_n, // 문자열
  fruit: { apple: 1, banana: 2 } // fruit 속성은 자신만의 속성을 가진 객체이다.
};

객체를 생성해서 변수에 할당하는 예시

let x;
if (cond) {
  x = { greeting: "안녕하세요" };
}

객체 초기자로 배열을 생성할 수도 있다. 배열 리터럴 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Grammar_and_types#%EB%B0%B0%EC%97%B4_%EB%A6%AC%ED%84%B0%EB%9F%B4

생성자 사용하기

단계 1. 생성자 함수를 사용하여 객체 생성하기. 이 때 객체의 첫글자는 대문자로 시작하는 것이 관례.

function Car(make, model, year, owner) {
  // 함수의 파라미터를 객체 속성에 할당하기 위해 this를 사용한다.
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
}

 

단계 2. new 연산자를 사용하여 객체 인스턴스를 생성.

const car1 = new Car("Eagle", "Talon TSi", 1993, rand);

 

이 때 rand는 Person 객체이다. 객체는 다른 객체도 속성으로 가질 수 있다.
예를 들면 Person 객체는 아래처럼 생겼을 것이다.

function Person(name, age, sex) {
  this.name = name;
  this.age = age;
}
const rand = new Person("Rand McKinnon", 33);

객체의 객체의 속성 접근법

car2.owner.name;

이미 정의된 객체에 속성을 추가하는 것이 가능하다. 그러나 이 방법은 다른 객체에 영향을 주지 않는다. 같은 타입의 모든 객체에 값을 추가하려면 Car 객체 타입의 정의를 수정하면된다.

car1.color = "black";

Object.create() 사용하기

이 메서드는 생성자 함수 정의 없이도 생성할 객체의 프로토타입을 지정할 수 있다.

// 동물 속성과 메서드 캡슐화
const Animal = {
  type: "무척추동물", // 속성 기본 값
  displayType: function () {
    // 동물 종류를 출력할 메서드
    console.log(this.type);
  },
};

// animal1이라는 이름의 동물 타입 객체 생성
const animal1 = Object.create(Animal);
animal1.displayType(); // 출력: 무척추동물

// fish라는 이름의 동물 타입 객체 생성
const fish = Object.create(Animal);
fish.type = "물고기";
fish.displayType(); // 출력: 물고기

 

* prototype 속성
prototype 속성을 사용하면 이전에 정의된 객체 타입에도 속성을 추가할 수 있다. 이렇게 정의된 속성은 해당 타입의 모든 인스턴스가 공유한다. 아래 코드는 모든 Car 타입 객체에 color 속성을 추가한 후, car1 객체에 그 속성의 값을 할당하는 예제이다.

Car.prototype.color = null;
car1.color = "black";

더 자세한 내용은 https://developer.mozilla.org/ko/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

 

const myCar = new Object();
myCar.make = "Ford";
myCar.model = "Mustang";
myCar.year = 1969;

 

객체의 메서드 정의하기

메서드(method)는 객체와 연관된 함수, 다른 말로 하자면 객체 속성 중 함수인 것을 말합니다.

const myObj = {
  myMethod: function(params) {
    // 뭔가 하기...
  }

  // 이렇게도  동작해요
  myOtherMethod(params) {
    // 뭔가 다른거 하기...
  }
};

 

메서드는 다른 함수와 똑같이 정의하지만, 객체 속성에 할당한다는 점이 다릅니다.

// objectName : 이미 존재하는 객체
// methodName : 할당하려는 메서드
// functionname : 함수의 이름
objectName.methodName = functionName;

 

Car 객체의 속성을 정리해서 출력하는 함수를 정의해봅시다.

function displayCar() {
  const result = `아름다운 ${this.year} ${this.make} ${this.model}`;
  prettyPrint(result);
}

function Car(make, model, year, owner) {
  this.make = make;
  this.model = model;
  this.year = year;
  this.owner = owner;
  this.displayCar = displayCar;
}

car1.displayCar();

 

객체에 접근하기

myCar.color; // undefined // null이 아님!
myCar["make"] = "Ford"; // 속성 접근자로 접근하기

처음에 객체 속성을 인덱스로 정의했으면 항상 인덱스로만 참조해야한다. myCar[5] = '25 mpg'처럼 인덱스로 정의했으면 이후에 참조할 때도 myCar[5]로 해야한다.

* 다만 HTML 요소를 나타내는, document.forms와 같은 유사 배열 객체에는 예외로, 문서 상의 순서를 나타내는 인덱스로 접근할 수도 있고 (정의된 경우) 이름으로 접근할 수도 있다. 즉 문서의 두 번째 <form> 태그가 name="myForm" 특성을 가지고 있다면 document.forms[1], document.forms['myForm'], document.forms.myForm 모두 사용할 수 있다.

객체 속성 나열의 세 가지 방법

• for...in 반복문 // 객체와 객체의 프로토타입에 존재하는 모든 열거가능한 속성을 순회
• Object.keys(o) // 프로토타입 체인을 제외한 o객체 자신만의 열거 가능한 속성(키)를 배열로 반환
• Object.getOwnPropertyNames(o) //  o객체 자신만의 열거 불가능한 속성을 포함한 속성(키)를 배열로 반환

for...in을 사용하여 객체 속성 순회하고 속성접근자로 접근하는 예제

function showProps(obj) {
  let result = "";
  for (let i in obj) { // 키값이 i에 저장된다.
    if (obj.hasOwnProperty(i)) { // obj.hasOwnProperty()를 사용해서 객체의 프로토타입 체인에 존재하지 않는 속성을 제외
      result += `${obj[i]}\n`; // 밸류값이 조회되어 저장된다.
    }
  }
  console.log(result);
}

showProps(myCar);
// Ford
// Mustang
// 1969

 

프로토타입의 '숨은 속성'(프로토타입 체인 상의 속성 중, 같은 이름의 속성이 체인에서 앞서 존재해서 가려진 속성)을 나열하는 방법

function listAllProperties(o) {
  let objectToInspect = o;
  let result = [];

  while (objectToInspect !== null) {
    result = result.concat(Object.getOwnPropertyNames(objectToInspect));
    objectToInspect = Object.getPrototypeOf(objectToInspect);
  }

  return result;
}

 

상속

속성 삭제

상속한 속성이 아닌 경우 delete 연산자로 삭제할 수 있다.

// a와 b 두 속성의 새로운 객체 생성
const myobj = new Object();
myobj.a = 5;
myobj.b = 12;

delete myobj.a; // a 속성을 제거해서 b 속성만 남김
console.log("a" in myobj); // 출력: false

 

객체 비교

JavaScript의 객체는 참조 타입입니다. 두 개의 객체는 서로 같은 속성을 갖더라도, 자신들끼리는 절대 같지 않으며 오직 자기 자신과의 비교만 참을 반환합니다.

// 같은 값을 가진 객체
const fruit = { name: "사과" };
const fruitbear = { name: "사과" };

fruit == fruitbear; // false 반환
fruit === fruitbear; // false 반환

const fruit = { name: "사과" };
const fruitbear = fruit; // fruit 객체 참조를 할당

// fruit과 fruitbear는 같은 객체를 가리킴
fruit == fruitbear; // true 반환
fruit === fruitbear; // true 반환

---

Getter and Setter

getter는 특정 속성의 값을 반환하는 메서드이다. setter는 특정 속성의 값을 설정하는 메서드이다. 속성 추가가 가능한 객체라면 getter와 setter로 사전정의된 코어 객체와 사용자 정의 객체 모두에 속성을 추가할 수 있다.

 

getter와 생성자는...

• 객체 초기자를 사용해 정의할 수도 있고
  getter 메서드 이름 앞에 get, setter 메서드 이름 앞에 set을 붙여서 사용한다. 모든 getter 메서드는 아무 매개변수도 받지 않고, setter 메서드는 정확히 하나의 매개변수(설정할 값)만 받는다는 제한이 있다.
• 나중에 필요한 시점에 아무 객체에나 getter/setter 추가 메서드로 추가할 수 있다.

const o = {
  a: 7,
  get b() {
    return this.a + 1;
  },
  set c(x) { // o.c에 의해 50이 됨
    this.a = x / 2; // 25
  },
};

console.log(o.a); // 7
console.log(o.b); // 8 <-- 이 시점에 get b() 메서드 실행
o.c = 50; //   <-- 이 시점에 set c(x) 메서드 실행
console.log(o.a); // 25

여기서 o 객체의 속성은 다음과 같다.

• o.a — 숫자
• o.b — o.a에 1을 더한 값을 반환하는 접근자
• o.c — o.c에 설정한 값의 반을 o.a에 설정하는 설정자

객체 생성 이후에 getter와 setter 추가하기 : Object.defineProperties()

첫 번째 매개변수는 getter와 setter를 추가할 객체고,

두 번째 매개변수는 속성 이름이 추가할 getter/setter 이름, 속성 값은 getter/setter를 정의하는 객체다.

 

다음은 바로 위 예제에서 정의한 것과 같은 getter/생성자를 추가하는 코드입니다.

const o = { a: 0 };

Object.defineProperties(o, { // getter & setter를 뒤늦게 추가할 객체 o
  b: { // 추가할 getter/setter 이름
    get: function () { // getter/setter를 정의하는 객체
      return this.a + 1;
    },
  },
  c: {
    set: function (x) {
      this.a = x / 2;
    },
  },
});

o.c = 10; // setter 실행, a 속성에 10 / 2 = 5 할당
console.log(o.b); // getter 실행, a + 1 = 6 반환

두 형태 중 선택할 형태는 여러분의 프로그래밍 스타일과 현재 해야 하는 작업에 달렸습니다. 프로토타입을 정의할 때 이미 객체 초기자를 사용 중이라면 아마 대부분 간결함과 자연스러움으로 인해 처음 형태를 선택하게 될 것입니다. 그러나 객체 프토토타입을 따로 작성하지 않은 등의 이유로 나중에 getter와 setter를 추가해야 할 필요가 있으면 두 번째가 유일한 방법입니다. 두 번째 방법은 JavaScript의 동적인 모습을 가장 잘 나타내는 표현 중 하나겠지만, 읽거나 이해하기 힘든 코드를 만들기도 합니다.

---

this

this 키워드는 지금 동작하고 있는 코드를 가지고 있는 객체를 가리킨다. 위의 예제에서 this 는 person 객체와 동일하다. 그럼 왜 직접 person 객체를 쓰지 않는가? 예를 들어, 두 개의 다른 person 객체가 각각 다른 이름으로 인스턴스로 생성된 상태에서 인사말을 출력하기 위해 객체의 name 을 참조해야 한다고 생각해보자.

var person1 = {
  name: "Chris",
  greeting: function () {
    alert("Hi! I'm " + this.name + "."); // Hi! I'm Chris.
  },
};

var person2 = {
  name: "Deepti",
  greeting: function () {
    alert("Hi! I'm " + this.name + "."); // Hi! I'm Deepti
  },
};

---

생성자

객체를 만들기 위한 틀을 만들어놓고 거기에 값만 달리 적용하여 객체를 만든다고 해보자.

function createPerson(name) {
  const obj = {};
  obj.name = name;
  obj.introduceSelf = function () {
    console.log(`Hi! I'm ${this.name}.`);
  };
  return obj;
}

이 함수를 사용하여 객체를 만드는 과정은 아래와 같다. 빈 객체를 만들고, 초기화하고, 반환한다.

const salva = createPerson("Salva");
salva.introduceSelf(); // "Hi! I'm Salva."

더 괜찮은 방법은 생성자를 사용하는 것이다. 생성자는 new 키워드를 사용할 뿐인 함수이다. 생성자를 호출하면 생성자는 1. 새 객체를 만든다. 2. 새 객체와 this를 연결하여 생성자 코드 안에서 this를 사용할 수 있도록 한다. 3. 생성자 내부의 코드를 실행한다. 4. 새 객체를 반환한다.

생성자 작성 컨벤션은 다음과 같다. 생성할 객체의 이름을 따되 첫글자를 대문자로 둔다. 위에 작성한 함수를 생성자로 만들어본다면 아래와 같을 것이다.

function Person(name) {
  this.name = name;
  this.introduceSelf = function () {
    console.log(`Hi! I'm ${this.name}.`);
  };
}

이 생성자를 호출하기 위해서 우리는 new 예약어를 사용한다.

const salva = new Person("Salva");
salva.introduceSelf(); // "Hi! I'm Salva."

---

한글 번역본이 구식이라 하단에 영어본 번역을 달아두었으니 생략하고 밑에서부터 보기를 추천

프로토타입 기반 언어 object prototypes

js는 프로토타입 기반 언어라고 불린다. 모든 객체들이 메소드와 속성들을 상속 받기 위한 템플릿으로써 프로토타입 객체를 가진다는 의미이다. 프로토타입 객체도 또 다시 상위 프로토타입 객체로부터 메소드와 속성을 상속 받을 수도 있고 그 상위 프로토타입 객체도 마찬가지이다. 이를 프로토타입 체인이라 부르고 다른 객체에 정의된 메소드와 속성을 한 객체에서 사용할 수 있도록 해준다. 정확히 말하자면, 상속되는 속성과 메소드들은 각 객체가 아닌 객체의 생성자의 prototype이라는 속성에 정의 되어 있다.

객체의 프로토타입과 생성자의 프로토타입 속성의 차이를 알아야한다. 전자는 개별 객체의 속성이다. 후자는 생성자의 속성이다. 객체의 프로토타입≪Object.getPrototypeOf(obj==new Foobar())의 반환값≫은 ≪Foobar.prototype≫과 동일한 객체이다.

---

프로토타입 객체란

Person에 대한 생성자 함수를 정의하고 인스턴스를 작성하라.

// 생성자 정의
function Person(first, last, age, gender, interests) {
  // 속성과 메소드 정의
  this.first = first;
  this.last = last;
  //...
}

// 인스턴스 생성
var person1 = new Person("Bob", "Smith", 32, "male", ["music", "skiing"]);

person1의 프로토타입 객체인 Person()에 정의된 멤버들(name, age, gender, interests, bio, greeting)을 볼 수 있다. 또 watch, valueOf처럼 Person()의 프로토타입 객체인 Object에 정의된 다른 멤버들도 볼 수 있다. 이로서 프로토타입 체인이 동작함을 알 수 있다.

 

프로토타입 객체란, -프로토타입이라는 이름처럼- 객체를 생성하기 위해 사전에 짜여진 설계구조라고 생각하면 될 것 같다.

* 객체의 프로토타입 : 객체의 속성 | Person()에 정의된 멤버들 ...

* 생성자의 프로토타입 : 생성자의 속성 | Object에 정의된 멤버들 ...

 

그렇다면 Object에 정의되어 있는 메소드를 person1 객체에서 호출한다면 어떻게 될까?

person1.valueOf(); // Person {name: {…}, age: 32, gender: 'male', interests: Array(2), bio: ƒ, …}

 

 

 

이 메소드는 호출된 객체의 단순 값을 반환한다. 내부에서 일어나는 일은 다음과 같다.

1. 브라우저는 person1객체가 valueOf() 메서드를 가지고 있는지 체크한다.

2. 없으므로 person1의 프로토타입 객체(Person() 생성자의 프로토타입)에 valueOf()메소드가 있는지 체크한다.

3. 여전히 없으므로 Person() 생성자의 프로토타입 객체의 프로토타입 객체(Object() 생성자의 프로토타입)가 valueOf() 메소드를 가지고 있는지 체크한다. 여기에 있으므로, 호출하고 종료된다.

 

프로토타입 속성

prototype 속성은 하나의 객체이며 프로토타입 체인을 통해 상속하고자하는 속성과 메소드를 담아두는 버킷으루 주로 사용된다. Object.prototype.로 시작한다. 따라서 Object.prototype을 상속 받는 객체라면 어떤 객체든지 Object.prototype.watch()나 Object.prototype.valueOf()를 사용할 수 있다.

전역 객체인 String, Date, Number, Array의 프로토타입에 정의된 메소드와 속성들을 확인해보자. 이 프로토타입 객체들에는 이미 많은 수의 메소드가 정의되어 있다.

이는 아래처럼 문자열 객체를 생성 했을 때:

var myString = "This is my string.";

 

myString 인스턴스가 생성되는 즉시 split(), indexOf(), replace() 등의 유용한 메소드들을 사용할 수 있는 이유이다.

 

프로토타입 객체는 __proto__ (deprecated) 속성으로 접근 가능한 내장 객체이다. this는 현재 객체의 프로토타입을 가르키지 않는다. prototype 속성은 상속 시키려는 멤버들이 정의되어있는 객체를 가르킨다.

---

프로토타입 체인에 대하여

콘솔창에서 객체를 생성한 뒤 객체에 점 접근법을 사용해보자.

const myObject = {
  city: "Madrid",
  greet() {
    console.log(`Greetings from ${this.city}`);
  },
};

myObject.greet(); // Greetings from Madrid

myObject. 을 입력하면 우리가 정의한 city와 greet말고도 다양한 다른 속성들이 뜨는 걸 볼 수 있을 것이다. 이 값들은 어디서 왔을까? 바로 프로토타입 체인이다.

 

모든 자바스크립트 객체는 prototype이라고 불리는 내장 속성을 가지고 있다. 프로토타입은 그 자체로 객체이다. 따라서 프로토타입은 스스로의 프로토 타입을 또 가지고 있다. 이것이 프로토타입 체인을 만든다. 이 체인은 스스로의 프로토타입이 null인 프로토타입에 도달하면 종료된다.

* 스스로의 프로토타입을 가르키는 객체의 속성을 프로토타입이라고 부르지 않는다는 점을 주의하라. 대부분의 브라우저는 객체의 프로토타입에 접근하기 위해 __proto__를 보편적으로 사용하지만 정석의 접근 방법은 Object.getProptotypeOf() 메서드를 사용하는 것이다.

 

당신의 객체의 속성에 접근하려고 할 때 속성이 객체에 존재하지 않는다면 프로토타입이 점검된다. 여전히 속성이 발견되지 않는다면 프로토타입의 프로토타입이 점검된다. 속성이 찾아지든, 아니면 체인의 끝에 도달하게 되어 undefined가 반환된다.

만약 우리가 콘솔창에 myObject.toString()을 입력한다면 브라우저는

1. myObject에서 toString을 찾는다.

2. 없으므로, myObject의 프로토타입 객체에서 toString을 찾는다.

3. 여기에 있으므로 그를 호출한다.

 

엥 근데 myObject의 프로토타입이 뭐예요.

Object.getPrototypeOf(myObject); // Object { }

이건 Object.prorotype이라고 불리는 객체이다. 가장 기본이 되는 프로토타입이며 모든 객체가 기본적으로 가지고 있다. Object.prototype의 프로토타입은 null이므로, 여기가 바로 프로토타입 체인의 끝인 것이다.

객체의 프로토타입이 언제나 Object.prototype인 건 아니다.

첫번째로 Date의 프로토타입이 찍히고 그 뒤 Object의 프로토타입이 찍힌 뒤 Object의 프로토타입은 null 이므로 null이 찍혔다.

myDate의 프로토타입이 Date.prototype 객체이고, Date.prototype 객체의 프로토타입 객체가 Object.prototype임을 알 수 있다.

Shadowing properties

당신이 객체에 선언한 속성이 그 객체의 프로토타입에 동일한 이름으로 선언되었다면 어떻게 될까?

const myDate = new Date(1995, 11, 17);
console.log(myDate.getYear()); // 95

myDate.getYear = function () {
  console.log("something else!");
};
myDate.getYear(); // 'something else!'

myDate의 프로토타입이 가지고 있는 .getYear() 함수를 재정의해보았다. 그러자 재정의 된 함수가 나오는 걸 볼 수 있다. 브라우저가 getYear라는 이름을 가진 속성을 myDate에서 먼저 찾아버렸기 때문이다. (찾지 못할 경우에만 prototype을 타고 올라가므로) 이를 속성을 shadowing했다고 한다.

프로토타입 설정하기

자바스크립트에서 객체의 프로토타입을 정의하는 건 여러가지 방법이 있지만 두개만 소개하려고 한다. Object.create()와 생성자이다.

Object.create()

이 메서드는 새로운 객체를 생성한다. 그리고 당신이 새로운 객체의 프로토타입으로 사용되어질 객체를 지정하도록 허락한다.

const personPrototype = {
  greet() {
    console.log("hello!");
  },
};

const carl = Object.create(personPrototype);
carl.greet(); // hello!

이 예제에서 greet()메서드를 가지고 있는 personPrototype 객체를 생성했다. 그리고 Object.create()을 사용하여 personPrototype을 스스로의 프로토타입으로 가지는 새로운 객체 carl를 생성했다. 우리는 carl에서 greet() 메서드를 사용할 수 있다.

 

...

var person2 = Object.create(person1);
person2.__proto__;

create() 메서드는 주어진 객체를 프로토타입 객체로 삼아 새로운 객체를 생성한다. person2는 person1을 프로토타입 객체로 삼는다. 콘솔창에 person2.__proto__;를 입력하면 person1이 출력되는 걸 알 수 있다. ?

생성자 사용하기

자바스크립트에서 모든 함수들은 prototype이라는 속성을 가지고 있다. 당신이 함수를 생성자로서 호출할 때 이 prototype 속성은 새롭게 만들어진 객체의 프로토타입으로 설정되어진다. 컨벤션의 의해 속성은 __proto__라고 명명된다.

우리가 생성자의 프로토타입을 지정하면, 우리는 그 생성자를 이용해서 생성된 모든 객체는 그 프로토타입을 부여받았음을 확신할 수 있다.

// 메서드를 가진 객체 생성
const personPrototype = {
  greet() {
    console.log(`hello, my name is ${this.name}!`);
  },
};

// 생성할 사람의 이름을 초기화하는 생성자 Person()
function Person(name) {
  this.name = name;
}

// personPrototype에 정의된 메서드를 Person 함수의 프로토타입 속성에 붙임
Object.assign(Person.prototype, personPrototype);
// or
// Person.prototype.greet = personPrototype.greet;

Object.assign을 한 뒤에 Person 생성자를 사용하여 만든 객체는 모두 greet을 사용할 수 있다. Person.prototype을 그들의 prototype으로 가지게 되기 때문이다.

 

Person 생성자를 사용하여 만든 객체에는 두 가지 속성이 있다.

- name 속성(생성자에서 정의됨에 따라 Person 객체에서 바로 접근 가능)

- greet() 메서드(프로토타입에 정의됨)

여기서 name과 같이 객체에 직접 정의된 속성은 'own properties'라고 하며, Object.hasOwn() 정적 메서드를 사용하여 속성이 own property인지 여부를 확인할 수 있다.

const irma = new Person("Irma");

console.log(Object.hasOwn(irma, "name")); // true
console.log(Object.hasOwn(irma, "greet")); // false

---