Skip to content

Commit c7fc05e

Browse files
committed
Object README [U]
1 parent a9ee1ee commit c7fc05e

2 files changed

Lines changed: 59 additions & 28 deletions

File tree

Modern JS/JS_Object.md

Lines changed: 57 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -2,44 +2,48 @@
22

33
- [JS Object](#js-object)
44
- [new 연산자 역할](#new-연산자-역할)
5-
- [프로퍼티의 속성](#프로퍼티의-속성)
5+
- [new 생성자 keyword로 함수를 호출시 흐름](#new-생성자-keyword로-함수를-호출시-흐름)
6+
- [프로퍼티의 속성 및 디스크립터 설정 메서드](#프로퍼티의-속성-및-디스크립터-설정-메서드)
67
- [유용한 Object 메소드](#유용한-object-메소드)
78
- [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)
910
- [function 생성자](#function-생성자)
1011
- [class 생성자](#class-생성자)
11-
- [{} 리턴](#-리턴)
12+
- [{} 리턴 new vs don't use new keyword](#-리턴-new-vs-dont-use-new-keyword)
1213
- [allow function](#allow-function)
1314

1415
## new 연산자 역할
1516

1617
```js
18+
// 생성자 함수
1719
function Circle(center, radius) {
20+
// 생성자 필드 (this is newObject what is binded)
1821
this.center = center;
1922
this.radius = radius;
2023
}
24+
// prototype 공간에 추가
2125
Circle.prototype.area = function() {
2226
return Math.PI*this.radius*this.radius;
2327
}
28+
29+
var circle = new Circle({x:0,y:0},2.0);
2430
```
2531

26-
- new 생성자 keyword로 함수를 호출시 흐름
32+
### new 생성자 keyword로 함수를 호출시 흐름
2733

2834
```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; // 만들어진 객체 리턴
3539
```
3640

37-
## 프로퍼티의 속성
41+
## 프로퍼티의 속성 및 디스크립터 설정 메서드
3842

3943
```
40-
writable
41-
enumerable
42-
configurable
44+
writable (쓰기 가능)
45+
enumerable (나열 가능)
46+
configurable (재정의)
4347
```
4448

4549
- 데이터 프로퍼티
@@ -49,27 +53,27 @@
4953
- configurable
5054

5155
- 접근자 프로퍼티
52-
- get
53-
- set
56+
- `get`
57+
- `set`
5458
- enumerable
5559
- configurable
5660

5761
```js
5862
Object.getOwnPropertyDescriptor(obj, propertyName) // 디스크립터 (상속 관계 프로퍼티는 undefined)
5963
Object.defineProperty(obj, propertyName, descriptor) // 프로퍼티 디스크립터 설정
6064
Object.defineProperties(obj, descriptor) // 여러 개 프로퍼티 디스크립터 설정
61-
Object.create(obj, descriptor) // 첫 번 째 해당 인수로 상속을 받는다, 두 번 째 인수에서는 프로퍼티 디스크립터를 작성하여 자신의 프로퍼티로 갖게 된다.
65+
Object.create(obj, descriptor) // 첫 번 째 인수로 상속을 받는다, 두 번 째 인수에서는 프로퍼티 디스크립터를 작성하여 자신의 프로퍼티로 갖게 된다.
6266
```
6367

6468
## 유용한 Object 메소드
6569

6670
```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)
6973

70-
Object.preventExtensions // 추가 [불가]
71-
Object.seal // 추가,삭제, 재정의(configuable) [불가]
72-
Object.freeze // 재정의,추가,삭제,수정 [불가]
74+
Object.preventExtensions() // 추가 [불가]
75+
Object.seal() // 추가,삭제, 재정의(configuable) [불가]
76+
Object.freeze() // 재정의,추가,삭제,수정 [불가]
7377
```
7478

7579
## class vs function (new)
@@ -81,8 +85,30 @@
8185
- Species
8286
- super 를 통한 상위 클래스 호출
8387
- 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(...) {} // 메서드
8499

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)?
86112

87113
### function 생성자
88114

@@ -135,21 +161,22 @@
135161
```
136162

137163
- method get method of refernceType
164+
- 객체 메서드를 여기저기 전달해 전혀 다른 컨텍스트에서 호출하게 되면 this는 원래 객체를 참조하지 않습니다.
138165

139166
```js
140167
var who = a.who()
141168
who() // undefined => class is use stric mode
142169
```
143170

144-
### {} 리턴
171+
### {} 리턴 new vs don't use new keyword
145172

146173
```js
147174
function A(params) {
148175
this.name = params.name;
149176
function what() {
150177
return this.name;
151178
}
152-
function who(){
179+
function who() {
153180
return this;
154181
}
155182
return {
@@ -161,17 +188,20 @@
161188

162189
- [new 연산자 역할 참고](#new-연산자-역할)
163190
- return newObj 하기전 apply에서 이미 `{} 리터럴` 리턴 됨
191+
- 객체를 return 한다면, this 대신 객체가 반환
192+
- 원시형을 return 한다면, return문이 무시
164193

165194
```js
166-
var a = new A({name:"yjkwon07"});
195+
var a = new A({name:"yjkwon07"}); // new obj
167196
a.what() // undefined
168197
a.who() // { what, who }
198+
window.name // undefined
169199
```
170200

171201
- new 생성자 키워드를 사용하지 않았기 때문에 window 전역 객체에 name 프로퍼티가 생성된다.
172202

173203
```js
174-
var a = A({name:"yjkwon07"});
204+
var a = A({name:"yjkwon07"}); // new obj
175205
a.what() // undefined
176206
a.who() // { what, who }
177207
window.name // "yjkwon07"

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -82,4 +82,5 @@
8282

8383
- [JavaScropt 33가지 개념](https://velog.io/@jakeseo_me/series/33conceptsofjavascript)
8484
- [Poiemaweb](https://poiemaweb.com/)
85-
- [Frontend Developers](https://github.com/FEDevelopers)
85+
- [Frontend Developers](https://github.com/FEDevelopers)
86+
- [JavaScropt Info](https://ko.javascript.info)

0 commit comments

Comments
 (0)