|
1 | 1 | # JS Object |
2 | 2 |
|
| 3 | +- [JS Object](#js-object) |
| 4 | + - [new 연산자 역할](#new-연산자-역할) |
| 5 | + - [프로퍼티의 속성](#프로퍼티의-속성) |
| 6 | + - [유용한 Object 메소드](#유용한-object-메소드) |
| 7 | + - [class vs function (new)](#class-vs-function-new) |
| 8 | + - [this of function(method)?](#this-of-functionmethod) |
| 9 | + - [function 생성자](#function-생성자) |
| 10 | + - [class 생성자](#class-생성자) |
| 11 | + - [{} 리턴](#-리턴) |
| 12 | + - [allow function](#allow-function) |
| 13 | + |
3 | 14 | ## new 연산자 역할 |
4 | 15 |
|
5 | 16 | ```js |
|
10 | 21 | Circle.prototype.area = function() { |
11 | 22 | return Math.PI*this.radius*this.radius; |
12 | 23 | } |
| 24 | +``` |
13 | 25 |
|
14 | | - var c = new Circle({x:0,y:0},2.0) |
15 | | - var newObj = {}; |
| 26 | +- new 생성자 keyword로 함수를 호출시 흐름 |
| 27 | + |
| 28 | +```js |
| 29 | + var circle = new Circle({x:0,y:0},2.0); |
16 | 30 |
|
17 | | - newObj.__proto__ = Cicle,prototype; |
| 31 | + var newObj = {}; |
| 32 | + newObj.__proto__ = Cicle.prototype; |
18 | 33 | Circle.apply(newObj, arguments); |
19 | 34 | return new Obj; |
20 | 35 | ``` |
21 | 36 |
|
| 37 | +## 프로퍼티의 속성 |
| 38 | + |
| 39 | +``` |
| 40 | + writable |
| 41 | + enumerable |
| 42 | + configurable |
| 43 | +``` |
| 44 | + |
| 45 | +- 데이터 프로퍼티 |
| 46 | + - value |
| 47 | + - writable |
| 48 | + - enumerable |
| 49 | + - configurable |
| 50 | + |
| 51 | +- 접근자 프로퍼티 |
| 52 | + - get |
| 53 | + - set |
| 54 | + - enumerable |
| 55 | + - configurable |
| 56 | + |
| 57 | +```js |
| 58 | + Object.getOwnPropertyDescriptor(obj, propertyName) // 디스크립터 (상속 관계 프로퍼티는 undefined) |
| 59 | + Object.defineProperty(obj, propertyName, descriptor) // 프로퍼티 디스크립터 설정 |
| 60 | + Object.defineProperties(obj, descriptor) // 여러 개 프로퍼티 디스크립터 설정 |
| 61 | + Object.create(obj, descriptor) // 첫 번 째 해당 인수로 상속을 받는다, 두 번 째 인수에서는 프로퍼티 디스크립터를 작성하여 자신의 프로퍼티로 갖게 된다. |
| 62 | +``` |
| 63 | + |
| 64 | +## 유용한 Object 메소드 |
| 65 | + |
| 66 | +```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) |
| 69 | + |
| 70 | + Object.preventExtensions // 추가 [불가] |
| 71 | + Object.seal // 추가,삭제, 재정의(configuable) [불가] |
| 72 | + Object.freeze // 재정의,추가,삭제,수정 [불가] |
| 73 | +``` |
| 74 | + |
| 75 | +## class vs function (new) |
| 76 | + |
| 77 | +- [MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Classes) |
| 78 | + - Class 정의 |
| 79 | + - Class body 와 method 정의 |
| 80 | + - extends를 통한 클래스 상속(sub classing) |
| 81 | + - Species |
| 82 | + - super 를 통한 상위 클래스 호출 |
| 83 | + - Mix-ins |
| 84 | + |
| 85 | +## this of function(method)? |
| 86 | + |
| 87 | +### function 생성자 |
| 88 | + |
| 89 | +```js |
| 90 | + function A(params) { |
| 91 | + this.name = params.name; |
| 92 | + } |
| 93 | + |
| 94 | + A.prototype.what = function () { |
| 95 | + return this.name; |
| 96 | + } |
| 97 | + A.prototype.who = function () { |
| 98 | + return this; |
| 99 | + } |
| 100 | +``` |
| 101 | + |
22 | 102 | ```js |
23 | | - Object.keys |
24 | | - Object.getOwnProperyNames |
| 103 | + var a = new A({name:"yjkwon07"}); |
| 104 | + a.what() // "yjkwon07" |
| 105 | + a.who() // A {name: "yjkwon07"} |
| 106 | +``` |
25 | 107 |
|
| 108 | +- method get method of refernceType |
26 | 109 |
|
27 | | - Object.preventExtensions // 추가 |
28 | | - Object.seal // 추가,삭제,수정 |
29 | | - Object.freeze // 재정의,추가,삭제,수정 |
| 110 | +```js |
| 111 | + var who = a.who() |
| 112 | + who() // global this |
30 | 113 | ``` |
31 | 114 |
|
| 115 | +### class 생성자 |
| 116 | + |
| 117 | +```js |
| 118 | + class A { |
| 119 | + constructor(params) { |
| 120 | + this.name = params.name; |
| 121 | + } |
| 122 | + what() { |
| 123 | + return this.name; |
| 124 | + } |
| 125 | + who() { |
| 126 | + return this; |
| 127 | + } |
| 128 | + } |
| 129 | +``` |
| 130 | + |
| 131 | +```js |
| 132 | + var a = new A({name:"yjkwon07"}); |
| 133 | + a.what() // "yjkwon07" |
| 134 | + a.who() // A {name: "yjkwon07"} |
| 135 | +``` |
| 136 | + |
| 137 | +- method get method of refernceType |
| 138 | + |
| 139 | +```js |
| 140 | + var who = a.who() |
| 141 | + who() // undefined => class is use stric mode |
| 142 | +``` |
| 143 | + |
| 144 | +### {} 리턴 |
| 145 | + |
| 146 | +```js |
| 147 | + function A(params) { |
| 148 | + this.name = params.name; |
| 149 | + function what() { |
| 150 | + return this.name; |
| 151 | + } |
| 152 | + function who(){ |
| 153 | + return this; |
| 154 | + } |
| 155 | + return { |
| 156 | + what, |
| 157 | + who |
| 158 | + } |
| 159 | + } |
| 160 | +``` |
| 161 | + |
| 162 | +- [new 연산자 역할 참고](#new-연산자-역할) |
| 163 | +- return newObj 하기전 apply에서 이미 `{} 리터럴` 리턴 됨 |
| 164 | + |
| 165 | +```js |
| 166 | + var a = new A({name:"yjkwon07"}); |
| 167 | + a.what() // undefined |
| 168 | + a.who() // { what, who } |
| 169 | +``` |
| 170 | + |
| 171 | +- new 생성자 키워드를 사용하지 않았기 때문에 window 전역 객체에 name 프로퍼티가 생성된다. |
| 172 | + |
| 173 | +```js |
| 174 | + var a = A({name:"yjkwon07"}); |
| 175 | + a.what() // undefined |
| 176 | + a.who() // { what, who } |
| 177 | + window.name // "yjkwon07" |
| 178 | +``` |
| 179 | + |
| 180 | +## allow function |
| 181 | + |
| 182 | +- [화살표 함수](../ES2018/4.화살표%20함수.js) |
| 183 | +- [MDN](https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Functions/%EC%95%A0%EB%A1%9C%EC%9A%B0_%ED%8E%91%EC%85%98) |
| 184 | + - 화살표 함수 표현(arrow function expression)은 function 표현에 비해 구문이 짧고 자신의 this, arguments, super 또는 new.target을 바인딩 하지 않는다. |
| 185 | + - 화살표 함수는 항상 익명이다. 이 함수 표현은 메소드 함수가 아닌 곳에 가장 적합하다. 그래서 생성자로서 사용할 수 없다. |
0 commit comments