이번 포스팅은 생성장 함수에 대해 알아보겠습니다. 굉장히 간단하게 여러 변수를 만들어낼 수 있습니다.
천천히 한번 읽어보세요.
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
31
32
33
|
생성자 함수
function User(name, age) {
this.name = name;
this.age = age;
};
let user1 = new User('mike', 30);
let user2 = new User('jane', 20);
let user3 = new User('jun', 27);
// 1) 함수 이름의 첫 글자를 대문자로 바꿔준다.
// 2) new 연산자를 사용하여 호출한 형태다.
// 3) 순식간에 비슷한 객체 3개를 만들수 있다.
user1 === {name: 'mike', age: 30}
user2 === {name: 'jane', age: 20}
user3 === {name: 'jun', age: 27}
생성자 함수는 붕어빵 틀이라고 생각하면된다.
필요한 재료들을 넣어주고 찍어준다.
여기서 필요한 재료는 name과 age 이다.
function User(name, age) {
this.name = name;
this.age = age;
this.sayName = funtion() {
console.log(this.name);
}
};
let user5 = new('Han', 40)
user5.sayName(); // 'Han'이 개발자 도구에 뜨게된다.
|
cs |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
ex)
function Item(title, price) {
this.title = title;
this.price = price;
this.showPrice = function() {
console.log('가격은 ${price}원 입니다.');
}
}
const item1 = new Item("인형", 3000);
const item1 = new Item("가방", 40000);
const item1 = new Item("카드", 9000);
이렇게 개발자 도구에 친다면 어떤것이 나올까요?
item3.showPrice(); ==> 가격은 9000원 입니다.
|
cs |
코지코더의 자바스크립트 중급 강의를 보고 공부한 내용입니다.
반응형
'개발 공부 > 웹개발' 카테고리의 다른 글
react 컴포넌트와 props로 데이터 보내기 (0) | 2021.05.12 |
---|---|
자바스크립트_14개의 숫자와 수학 method 정리_toFixed_isNaN_Math.random_parseFloat (2) | 2021.05.11 |
자바스크립트 식별자 API 개념정리(1)_getElementById, className, classList 사용법 (0) | 2021.05.10 |
Dom 기본개념 정리(2)_알아두면 좋은 이벤트와 이벤트의 기본 문법, value와 textContent의 차이 (0) | 2021.05.10 |
react 리액트 반복문 만들기 map (0) | 2021.05.10 |
댓글