TIL을 적기 이전에..
오늘 TIL은 너무 이해가 잘되는 글을 봐서.. 그걸 거의 인용하여 예제를 바꿔보면서 공부해보았다. 앞으로 프로토타입을 사용하는 이유가 그러하듯이, 코드의 재사용성을 더욱 중요시하고 더 재사용을 잘하게 될 것같다.
prototype
: 자바스크립트의 모든 객체 들은 부모 역할을 하는 객체와 연결 되어 있다.
이런 부모 역할을 하는 객체를 Prototype이라고 한다.
ex) prototype을 포함하는지 console.dir을 이용해 알아보기.
$(function(){
let Student = function(value1, value2, value3, value4){
this.value1 = value1;
this.value2 = value2;
this.value3 = value3;
this.value4 = value4;
}
console.dir(Student);
});
그림 1. 프로토타입 확인할 임의의 오브젝트 하나 선언.상단 사진 중 두번째 노란줄: Student는 함수이므로 기본적으로 함수의 프로토타입을 상속받는다.
그러므로 함수의 다양한 메소드들을 사용할수있는것이며,
상단 사진 중 세번쨰 노란줄: 함수는 object에 속하기때문에 object의 프로토타입 또한 상속받는다.
그러므로 객체의 메소드들 또한 사용이 가능한것이다.
=> 이것을 prototype chaining이라 한다.
위에 평균을 구하는 함수를 추가로 작성해보겠다.
var Student45 = function(value1, value2, value3, value4){
this.value1 = value1;
this.value2 = value2;
this.value3 = value3;
this.value4 = value4;
this.average = function(){
return (this.value1+this.value2+this.value3+this.value4)/4;
}
}
그리고 생성자 함수로 새 객체를 만들고
let student1 = new Student45(34, 100, 76, 65);평균을 구해본다.
console.log(student1.average()); ==> 68.75출력그리고 이번에는 저 위의 average함수를 밖으로 빼내보는것이다.
var Student45 = function(value1, value2, value3, value4){
this.value1 = value1;
this.value2 = value2;
this.value3 = value3;
this.value4 = value4;
}
let student1 = new Student45(34, 100, 76, 65);
Student45.prototype.average = function(){
return (this.value1+this.value2+this.value3+this.value4)/4;
}
console.dir(student1);
console.log(student1.average());↓ 콘솔에 출력된걸보면, Student45의 프로토타입으로 average라는 함수가 추가되어 보인다.
Student45
value1: 34
value2: 100
value3: 76
value4: 65
__proto__:
average: ƒ ()
constructor: ƒ (value1, value2, value3, value4)
__proto__: Object즉, student1이 Student45를 생성자함수로 호출시, 우선 빈 객체가 생성이 되고,
이 객체는 Student45.prototype 객체를 자신의 프로토타입으로 설정하게 된다는거다.
그래서 매개변수값이 각각의 this에 바인딩 되는 것이다.
즉, student1.prototype이 실행시, 프로토타입 체이닝이 발생하여 prototype에 있는 average함수를 사용하게된다고 한다.
인용 출처:
https://aljjabaegi.tistory.com/295 [알짜배기 프로그래머]
