일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | |||||
3 | 4 | 5 | 6 | 7 | 8 | 9 |
10 | 11 | 12 | 13 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | 21 | 22 | 23 |
24 | 25 | 26 | 27 | 28 | 29 | 30 |
- for문
- 유튜브 올리버쌤
- 이클립스
- java
- Step2
- array
- position
- spread operator
- 유뷰브 올리버쌤
- Youtube 올리버쌤
- web
- 전자정부프레임워크
- 한큐에자바
- continue문
- hanq
- 자바스크립트
- 올리버쌤
- es6
- 취업반
- javascript
- Event
- 이벤트
- JDK
- egov
- 삼항연산자
- 자바
- 한큐
- 이벤트핸들러
- math
- break문
- Today
- Total
호다닥
초보자를 위한 Javascript: 'new' 예약어 본문
JavaScript For Beginners: the 'new' operator
출처 : codeburst.io, Brandon Morelli
해당 내용은 Brandon Morelli의 article을 개인적으로 번역한 내용이며, 잘못 번역된 부분이 있을 수 있습니다. 원문은 위에 적힌 주소에서 확인하실 수 있습니다.
4가지 법칙
new 예악어가 무엇인지 이해하는 것은 new 예악어를 이해하는 가장 간단한 방법이다.
new 예악어를 사용할 때, 4가지의 일들이 발생한다.
- 새로운 빈 객체를 만들어낸다.
- this를 새로 만들어진 객체에 bind한다.
- 새로 만들어진 객체에 "__proto__"라 불리는 property를 더한다. 이것은 constructor 함수의 prototype 객체를 의미한다.
- return this를 함수의 끝에 추가한다. 때문에 객체는 함수로부터 return되어 만들어진 것이다.
function Student(name, age) {
this.name = name;
this.age = age;
}
이제 new 예악어로 생성자 함수를 호출해보자. 우리는 'John'과 26이라는 두개의 argument들을 넣을 것이다.
var first = new Student('John', 26);
이 코드를 실행한다면 어떤 일이 일어날 것인가?
- 새로운 객체를 만들어낸다 ― first 객체
- this는 first 객체에 bound된다. 때문에 this에 대한 참조는 first를 향할 것이다.
- __proto__가 추가된다. first.__proto__는 이제 student.prototype을 가리킨다.
- 모든 것이 완료된 후에 새로운 first 객체는 새로운 first 변수에 return된다.
이제 우리는 console.log 선언문을 실행함으로써 이것이 제대로 동작하는지 확인할 것이다.
console.log(first.name);
// John
console.log(first.age);
// 26
이제 new keyword의 __proto__ 부분에 대해 더 깊이 알아보도록 하자.
Prototypes
모든 자바스크립트 객체들은 prototype을 가지고 있다. 자바스크립트의 모든 객체들은 자신의 prototype으로 부터 method들과 property들을 상속받는다.
이를 확인하기 위해 크롬 개발자를 열고 이 글의 앞에 있는 Student 함수를 type해보자.
function Student(name, age) {
this.name = name;
this.age = age;
}
모든 객체들의 prototype을 가지고 있음을 증명하기 위해 이제 아래 코드를 입력해보자.
Student.prototype;
// Object {...}
그러면 이제 객체가 return된다. 이제 새로운 student를 만들어보자.
var second = new Student('Jeff', 50);
우리는 Jeff라는 이름의 두번째 학생을 만들기 위해 Student 생성자 함수를 사용했다. 그리고 new예악어를 사용했기 때문에 __proto__ property는 second 객체에 추가되었다. 이것은 부모 생성자를 가리킨다. 아래 코드를 실행해봄으로써 이것을 확인할 수 있다.
second.__proto__ === Student.prototype;
// true
Student.prototype.constructor은 Student 생성자 함수를 의미한다.
Student.prototype.constructor;
// function Student(name, age) {
// this.name = name;
// this.age = age;
// }
위 그림에서 보이듯이 Student 생성자 함수는 .prototype이라는 property를 가지고 있다. 이 prototype은 생성자함수를 다시 가리키는 .constructor이라는 객체를 가지고 있다.
이것은 loop이다. 그러므로 우리가 new 예악어를 사용하여 새로운 객체를 생성할 때, 각 객체는 Student.prototype로 되돌아가는 새로운 객체와 연결된 .__proto__ property를 가지고 있다.
상속의 개념을 가지고 있는 이것은 매우 중요하다. prototype 객체는 생성자 함수로 만들어진 모든 객체들 사이에서 사용된다. 이것은 우리가 사용하는 모든 객체들의 prototype에 함수와 property들을 추가할 수 있다는 것을 의미한다.
위 예시들에서 우리는 오직 두개의 Student 객체들을 만들었다.
In our above examples, we only created two Student
objects, but what if instead of two students, we have 20,000? All of a sudden, we’re saving a ton of processing power by putting shared functions on the prototype instead of in each of the student objects.
좀더 깊이 살펴보기 위해 다른 예제를 살펴보자. 콘솔에 다음 코드를 입력해보자.
Student.prototype.sayInfo = function(){
console.log(this.name + ' is ' + this.age + ' years old');
}
우리는 다시 한번 Student prototype에 함수를 추가했다. 우리가 새로 추가하거나 이미 추가된 student는 이제 세번째 .sayInfo 함수에 접근이 가능해졌다. 아래 코드를 통해 테스트해보자.
second.sayInfo();
// Jeff is 50 years old
새로운 student를 추가하고 한번 더 테스트 해보자.
var third = new Student('Tracy', 15);
// Now if we log third out, we see the object only has two
// properties, age and name. Yet, we still have access to the
// sayInfo function:
third;
// Student {name: "Tracy", age: 15}
third.sayInfo();
// Tracy is 15 years old
var name = {
toString: function(){
console.log('Not a good idea');
}
};
name.toString();
// Not a good idea
결론
'Javascript' 카테고리의 다른 글
Javascript: 초보자를 위한 템플릿 리터럴 & 태그 기능 (0) | 2018.08.09 |
---|---|
Javascript: 초보자를 위한 정규식(Regular Expressions) 배우기 (0) | 2018.08.07 |
Javascript : 도대체 IIFE가 뭐야? (0) | 2018.07.26 |
Javascript : 초보자를 위한 화살표 함수 (0) | 2018.07.21 |
Javascript : 초보자를 위한 'This' (0) | 2018.07.17 |