prototype
자바스크립트는 prototype기반의 언어라고 한다. 그럼 prototype은 무엇을 말하는걸까?
mdn에서 prototype을 이렇게 말하고 있다.
Javascript는 엄밀히 말해서 하위클래스(sub-class)객체가 없기에, prototype은 객체 역할을 하는 특정 함수의 "기반 클래스" 객체를 만드는 유용한 차선책 입니다.
"특정 함수의 기반클래스 객체를 만드는" 이 부분이 포인트인것 같다.
new 키워드로 객체를 만들어낼수있는 constructor function을 예를 들어,
var Person = function() {
this.canTalk = true;
};
console.dir(Person)
console.dir(Person.prototype)
을 보면 이런식으로 나온다.
Person은 함수고, property로 prototype을 가지고 있다. 그 property로 console.dir() 해보면 Object라는 객체라고 나온다.
결국 prototype은 어떤 객체를 가리키고 있는 특정 함수의 프로퍼티라고 할수 있겠다.
다만 그 기능이 특정 함수의 "기반" 이 되는 객체를 가리킨다고 할수 있겠다.
결국 기반이 되는 객체가 상위 객체인것이다.
이것이 javascript가 prototype기반 언어라는 말인것이다.
이 prototype에 속성과 매소드를 만들어 넣으면,
Person.prototype.greet = function() {
if (this.canTalk) {
console.log('Hi, I am ' + this.name);
}
};
prototype의 메소드로 들어가고 사용은 해당 initiation객체에서 쓸수가 있다.
이 부분은 아래쪽에서 한번 더 설명할것이다.
__proto__
constructor function으로 객체를 생성하고 console.dir() 을 해보자.
내부를보면 __proto__라는 property 가 있다. __proto__를 보면 constructor 와 다시 __proto__가 있다.
__proto__ 이녀석은 해당 constructor function (여기서는 Person) 의 prototype과 동일한 녀석이다.(같은 기반객체를 가리킨다고 보면 된다.)
이를 그림으로 표현해보면,
이런식이 될것이다.
그렇다면 이전에 prototype에 greet 함수를 추가 시켯으니 해당 객체의 __proto__에서도 이 함수를 볼수가 있을것이다.
그렇기 때문에 해당 객체에서 이 함수를 사용할수가 있는것이다.
constructor
constructor는 말하자면 만들어진 인스턴스가 누구에 의해 만들어 졌는지 알수있는 것을 말한다.
그림으로 보면,
이런식으로 될것같다.
'Frontend > JAVASCRIPT' 카테고리의 다른 글
[Javascript] class inheritance in ES6 (0) | 2020.02.14 |
---|---|
[Javascript] Object.create( ) 과 prototype chaining (0) | 2020.02.14 |
[Javascript] callBack은 call me back (0) | 2020.01.26 |
[Javasvript] this는 가리킬뿐, this의 4가지 바인딩 (0) | 2020.01.26 |
[Javascript] 객체를 만드는 방법, (class, function) (0) | 2020.01.20 |