JavaScript

Prototype 기반 언어 Prototype :  원래의 형태 또는 전형적인 예, 기초 또는 표준

JavaScript는 원형 객체로 새로운 객체를 생성하는 Prototype(원형) 기반 언어이다.

 

객체(客體)란

 

객체 : 客 손 객 體 몸 체 

 

객지(客地)에 있는 몸. 생각과 행동의 목적물 주체에 대하여 작용의 대상이 되는 쪽

 

프로토타입 기반언어는 클래스 기반 언어에서 상속을 받는 것과 다르게, 객체를 원형으로 하는 복제 과정을 통해 객체의 동작 방식을 재사용 할 수 있게 한다.

 

// 프로토 타입 기만 언어는 원형 객체를 복제하여 새로운 객체를 형성하는 언어이다. 하지만 자바스크립트는 복제가 아닌 프로토타입 링크를 통해 원형을 참조한다.

---

자바스크립트의 객체

자바스크립트의 객체는 원시 타입(Primitives)를 제외한 나머지 값들은 모두 객체이다

원시타입 : String, Number, Boolean, Null, Undefined, Binint, Symbol

 

Link : https://developer.mozilla.org/ko/docs/Glossary/Primitive

 

자바스크립트에서 객체는 원형 객체로부터 생성되며, 생성된 객체는 프로토타입 링크 __proto__를 갖게 된다.

원형 또한 객체 이기 때문에 다른 원형을 참조하며 프로토타입 링크를 통해 자바스크립트의 최종 원형인 Object.prototype까지 연결되게 된다.

 

const protoA = {
  findProto: () => {
    console.log(protoA.__proto__);
  },
  name: "Prototype of a",
};

// 객체 a 생성
const a = new Object({
  findProto: () => {
    console.log(a.__proto__);
  },
});

// a 는 빈 배열
console.log(a); { }
// a의 프로토는 Javascript의 원형 객체
// 기본 Javascript에서 제공하는 Object prototype을 __proto__로 가지고 태어남
console.log("원형 객체 : ", a.__proto__); // [Object:null prototype] {}

// a에 __proto__에 원형값 대입
a.__proto__ = protoA;
console.log("a의 프로토타입는 protoA : ", a.__proto__); // protoA가 prototype  {findProto: [Function:findProto], name: 'Prototype of a'}

// a의 name을 찾아가 보면 내 원형에 name이 붙어 있으니 값이 나옴!!
console.log(a.name); // Prototype of a

// 원형 Object Prototype
a.findProto(); // protoA가 prototype  {findProto: [Function:findProto], name: 'Prototype of a'}


/*
    Object.prototype 객체에는 toString, hasOwnProperty 함수 등과 같이 
    자바스크립트 객체에서 흔히 사용하던 속성들이 정의되어 있고,
    그로 인해 모든 객체에서 해당 속성들을 사용할 수 있다.
*/

---

Prototype chain 구현하기

// Object.create 함수는 ES5부터 지원하는 함수이며, 인자로 전달된 객체를 원형으로 하는 새로운 객체를 생성하는 기능을 한다.

var foo = {
  init: function (who) {
    this.me = who;
  },
  identify: function () {
    return "I am " + this.me;
  },
};
console.log(foo.identify);

// foo 객체는 최종 원형 객체인 Object.prototype을 참조 하고 있다.
console.log(foo.__proto__); // [Object: null prototype] {}

var bar = Object.create(foo);

bar.speak = function () {
  return "Hello," + this.identify();
};

// bar 객체의 원형 객체는 foo 객체이다
console.log(bar.__proto__); // {init: [Function : init ], identify: [Function : identify]}

const baz = Object.create(bar);

// baz의 원형 객체는 bar이다.
console.log(baz.__proto__); // { init: [Function: init], identify: [Function: identify] } { speak: [Function (anonymous)] }

baz.init("baz");
console.log(baz.speak()); // Hello, I am baz

---

 

P . S

거의 화살표 함수만 사용해와서 문제가 없었는데 에러가 떠서 당황했다.

 

var foo = {
  init: (who) => {
    this.me = who;
  },
  identify: () => {
    return "I am " + this.me;
  },
};

var bar = Object.create(foo);

// error this.identify() is not a function
bar.speak = () => {
  return "Hello," + this.identify();
};

 

화살표 함수에는 없는 것: 함수 이름, this, arguments

화살표 함수 - JavaScript | MDN

 

 

---

프로토타입 기반 언어, 자바스크립트