|
2 | 2 |
|
3 | 3 | - [JS Object](#js-object) |
4 | 4 | - [new 연산자 역할](#new-연산자-역할) |
5 | | - - [프로퍼티의 속성](#프로퍼티의-속성) |
| 5 | + - [new 생성자 keyword로 함수를 호출시 흐름](#new-생성자-keyword로-함수를-호출시-흐름) |
| 6 | + - [프로퍼티의 속성 및 디스크립터 설정 메서드](#프로퍼티의-속성-및-디스크립터-설정-메서드) |
6 | 7 | - [유용한 Object 메소드](#유용한-object-메소드) |
7 | 8 | - [class vs function (new)](#class-vs-function-new) |
8 | | - - [this of function(method)?](#this-of-functionmethod) |
| 9 | + - [who is this of function(method)?](#who-is-this-of-functionmethod) |
9 | 10 | - [function 생성자](#function-생성자) |
10 | 11 | - [class 생성자](#class-생성자) |
11 | | - - [{} 리턴](#-리턴) |
| 12 | + - [{} 리턴 new vs don't use new keyword](#-리턴-new-vs-dont-use-new-keyword) |
12 | 13 | - [allow function](#allow-function) |
13 | 14 |
|
14 | 15 | ## new 연산자 역할 |
15 | 16 |
|
16 | 17 | ```js |
| 18 | + // 생성자 함수 |
17 | 19 | function Circle(center, radius) { |
| 20 | + // 생성자 필드 (this is newObject what is binded) |
18 | 21 | this.center = center; |
19 | 22 | this.radius = radius; |
20 | 23 | } |
| 24 | + // prototype 공간에 추가 |
21 | 25 | Circle.prototype.area = function() { |
22 | 26 | return Math.PI*this.radius*this.radius; |
23 | 27 | } |
| 28 | + |
| 29 | + var circle = new Circle({x:0,y:0},2.0); |
24 | 30 | ``` |
25 | 31 |
|
26 | | -- new 생성자 keyword로 함수를 호출시 흐름 |
| 32 | +### new 생성자 keyword로 함수를 호출시 흐름 |
27 | 33 |
|
28 | 34 | ```js |
29 | | - var circle = new Circle({x:0,y:0},2.0); |
30 | | - |
31 | | - var newObj = {}; |
32 | | - newObj.__proto__ = Cicle.prototype; |
33 | | - Circle.apply(newObj, arguments); |
34 | | - return new Obj; |
| 35 | + var newObj = {}; // 새로운 빈 객체 주소 참조 |
| 36 | + newObj.__proto__ = Cicle.prototype; // prototype 공간 주소 참조 |
| 37 | + Circle.apply(newObj, arguments); // this bind하여 arguments 정보들로 함수 실행 this bind로 인해, 생성자 필드 정보 부여가 됨 |
| 38 | + return new Obj; // 만들어진 객체 리턴 |
35 | 39 | ``` |
36 | 40 |
|
37 | | -## 프로퍼티의 속성 |
| 41 | +## 프로퍼티의 속성 및 디스크립터 설정 메서드 |
38 | 42 |
|
39 | 43 | ``` |
40 | | - writable |
41 | | - enumerable |
42 | | - configurable |
| 44 | + writable (쓰기 가능) |
| 45 | + enumerable (나열 가능) |
| 46 | + configurable (재정의) |
43 | 47 | ``` |
44 | 48 |
|
45 | 49 | - 데이터 프로퍼티 |
|
49 | 53 | - configurable |
50 | 54 |
|
51 | 55 | - 접근자 프로퍼티 |
52 | | - - get |
53 | | - - set |
| 56 | + - `get` |
| 57 | + - `set` |
54 | 58 | - enumerable |
55 | 59 | - configurable |
56 | 60 |
|
57 | 61 | ```js |
58 | 62 | Object.getOwnPropertyDescriptor(obj, propertyName) // 디스크립터 (상속 관계 프로퍼티는 undefined) |
59 | 63 | Object.defineProperty(obj, propertyName, descriptor) // 프로퍼티 디스크립터 설정 |
60 | 64 | Object.defineProperties(obj, descriptor) // 여러 개 프로퍼티 디스크립터 설정 |
61 | | - Object.create(obj, descriptor) // 첫 번 째 해당 인수로 상속을 받는다, 두 번 째 인수에서는 프로퍼티 디스크립터를 작성하여 자신의 프로퍼티로 갖게 된다. |
| 65 | + Object.create(obj, descriptor) // 첫 번 째 인수로 상속을 받는다, 두 번 째 인수에서는 프로퍼티 디스크립터를 작성하여 자신의 프로퍼티로 갖게 된다. |
62 | 66 | ``` |
63 | 67 |
|
64 | 68 | ## 유용한 Object 메소드 |
65 | 69 |
|
66 | 70 | ```js |
67 | | - Object.keys // method returns an array of a given object's own enumerable property |
68 | | - Object.getOwnProperyNames // method returns an array of all properties (including non-enumerable properties except for those which use Symbol) |
| 71 | + Object.keys() // method returns an array of a given object's own enumerable property |
| 72 | + Object.getOwnProperyNames() // method returns an array of all properties (including non-enumerable properties except for those which use Symbol) |
69 | 73 |
|
70 | | - Object.preventExtensions // 추가 [불가] |
71 | | - Object.seal // 추가,삭제, 재정의(configuable) [불가] |
72 | | - Object.freeze // 재정의,추가,삭제,수정 [불가] |
| 74 | + Object.preventExtensions() // 추가 [불가] |
| 75 | + Object.seal() // 추가,삭제, 재정의(configuable) [불가] |
| 76 | + Object.freeze() // 재정의,추가,삭제,수정 [불가] |
73 | 77 | ``` |
74 | 78 |
|
75 | 79 | ## class vs function (new) |
|
81 | 85 | - Species |
82 | 86 | - super 를 통한 상위 클래스 호출 |
83 | 87 | - Mix-ins |
| 88 | +- [javascript info](https://ko.javascript.info/class) |
| 89 | + - **`클래스 필드`** |
| 90 | + ```js |
| 91 | + class MyClass { |
| 92 | + prop = value; // 프로퍼티 |
| 93 | + |
| 94 | + constructor(...) { // 생성자 메서드 |
| 95 | + // ... |
| 96 | + } |
| 97 | + |
| 98 | + method(...) {} // 메서드 |
84 | 99 |
|
85 | | -## this of function(method)? |
| 100 | + get something(...) {} // getter 메서드 |
| 101 | + set something(...) {} // setter 메서드 |
| 102 | + |
| 103 | + [Symbol.iterator]() {} // 계산된 이름(computed name)을 사용해 만드는 메서드 (심볼) |
| 104 | + // ... |
| 105 | + } |
| 106 | + ``` |
| 107 | +- [javascript info](https://ko.javascript.info/class-inheritance#ref-69) |
| 108 | + - **`super 키워드와 [[HomeObject]]`** |
| 109 | + |
| 110 | + |
| 111 | +## who is this of function(method)? |
86 | 112 |
|
87 | 113 | ### function 생성자 |
88 | 114 |
|
|
135 | 161 | ``` |
136 | 162 |
|
137 | 163 | - method get method of refernceType |
| 164 | + - 객체 메서드를 여기저기 전달해 전혀 다른 컨텍스트에서 호출하게 되면 this는 원래 객체를 참조하지 않습니다. |
138 | 165 |
|
139 | 166 | ```js |
140 | 167 | var who = a.who() |
141 | 168 | who() // undefined => class is use stric mode |
142 | 169 | ``` |
143 | 170 |
|
144 | | -### {} 리턴 |
| 171 | +### {} 리턴 new vs don't use new keyword |
145 | 172 |
|
146 | 173 | ```js |
147 | 174 | function A(params) { |
148 | 175 | this.name = params.name; |
149 | 176 | function what() { |
150 | 177 | return this.name; |
151 | 178 | } |
152 | | - function who(){ |
| 179 | + function who() { |
153 | 180 | return this; |
154 | 181 | } |
155 | 182 | return { |
|
161 | 188 |
|
162 | 189 | - [new 연산자 역할 참고](#new-연산자-역할) |
163 | 190 | - return newObj 하기전 apply에서 이미 `{} 리터럴` 리턴 됨 |
| 191 | +- 객체를 return 한다면, this 대신 객체가 반환 |
| 192 | +- 원시형을 return 한다면, return문이 무시 |
164 | 193 |
|
165 | 194 | ```js |
166 | | - var a = new A({name:"yjkwon07"}); |
| 195 | + var a = new A({name:"yjkwon07"}); // new obj |
167 | 196 | a.what() // undefined |
168 | 197 | a.who() // { what, who } |
| 198 | + window.name // undefined |
169 | 199 | ``` |
170 | 200 |
|
171 | 201 | - new 생성자 키워드를 사용하지 않았기 때문에 window 전역 객체에 name 프로퍼티가 생성된다. |
172 | 202 |
|
173 | 203 | ```js |
174 | | - var a = A({name:"yjkwon07"}); |
| 204 | + var a = A({name:"yjkwon07"}); // new obj |
175 | 205 | a.what() // undefined |
176 | 206 | a.who() // { what, who } |
177 | 207 | window.name // "yjkwon07" |
|
0 commit comments