- Published on
javascript class
- Author
- Name
- yceffort
Class
ํด๋์ค๋ ๊ธฐ๋ณธ์ ์ผ๋ก ์ด๋ ๊ฒ ์๊ฒผ๋ค.
class Member {
getName() {
return '์ด๋ฆ'
}
}
let obj = new Member()
console.log(obj.getName())
ํน์ง
1. strict ๋ชจ๋์์ ์คํ
๋ฑํ 'use strict';
๋ฅผ ์ ์ธํ์ง ์์๋, ํด๋์ค์ ์ฝ๋๋ ๊ธฐ๋ณธ์ ์ผ๋ก strict
๋ชจ๋์์ ์คํ๋๋ค. ๊ทธ๋ ๊ฒ ๋๋ฉด, ๋น์ฐํ strict
๋ชจ๋์ ์ฌ๋ฌ๊ฐ์ง ํน์ง์ ์๋์ผ๋ก ๋ฐ๋ฅด๊ฒ ๋๋ค.
2. ํด๋์ค ๋ด ๋ฉ์๋ ์์ฑ
class Member {
setName(name) {
this.name = name
}
getName(name) {
this.name = name
}
}
๋ณด์ด๋ ๊ฒ์ฒ๋ผ, function
ํค์๋์ :
๊ฐ ์์ด ๋ฉ์๋ ์ด๋ฆ๋ง ์ฌ์ฉํ๋ค. ๊ทธ๋ฆฌ๊ณ ๋ฉ์๋ ์ฌ์ด์ ;
๊ฐ ๋ถํ์ํ๋ค. ๋ค๋ง function ์ ์ ์ธํ๋ฉด ๊ธ๋ก๋ฒ ์ค๋ธ์ ํธ์ ์ค์ ๋๋ ๊ฒ๊ณผ ๋ค๋ฅด๊ฒ, class๋ ๊ทธ๋ ์ง ์๋ค. ๊ทธ๋ฆฌ๊ณ class์ object property๋ for()๋ฌธ ๋ฑ์ผ๋ก ์ด๊ฑฐํ ์ ์๋ค.
3. ํ๋กํผํฐ์ ์ฐ๊ฒฐ
class Member {
setName(name) {
this.name = name
}
}
์ ์ฝ๋์
Member.prototype.setName = function (namn) {
this.name = name
}
์ ์ฝ๋๋ ๊ฐ๋ค.
Constructor
constructor
๋ ํด๋์ค ์ธ์คํด์ค๋ฅผ ์์ฑํ๊ณ , ์์ฑํ ์ธ์คํด์ค๋ฅผ ์ด๊ธฐํํ๋ ์ญํ ์ ํ๋ค. new Member()
๋ฅผ ์คํํ๋ฉด, Member.prototype.constructor
๊ฐ ๋จผ์ ํธ์ถ๋๋ค. ํด๋์ค์ ์ด๋ฅผ ์์ฑํ์ง ์์ผ๋ฉด, prototype
์ ๋ํดํธ constructor
๊ฐ ํธ์ถ๋๋ค. ๊ทธ๋ฆฌ๊ณ ์ด constructor
๊ฐ ์์ผ๋ฉด ์ธ์คํด์ค๋ฅผ ์์ฑํ ์ ์๋ค. ๊ธฐ์กด es5๋ฌธ๋ฒ์์๋ ์๋ฐ์คํฌ๋ฆฝํธ ์์ง์ด ๋ํดํธ constructor
๋ฅผ ํธ์ถํด์ ์ด๋ฅผ ํ์ฉํ ์ ์์์ง๋ง, es6์์ ๋ถํฐ๋ ๊ฐ๋ฐ์๊ฐ ์ด๋ฅผ ์ ์ํ ์ ์๊ฒ ๋์๋ค.
class Member {
constructor(name) {
this.name = name
}
getName() {
return this.name
}
}
let newMember = new Member('๋ผ์ด์ค๋ฌ ๋ฉง์')
console.log(newMember.getName())
๋ง์ฝ constructor
์์ ์ด์ํ ๊ฐ์ ๋ฐํํ๋ฉด ์ด๋ป๊ฒ ๋ ๊น?
constructor() {
return 1;
}
constructor
์์ number
๋ string
์ ๋ฐํํ๋ฉด, ์ด๋ฅผ ๋ฌด์ํ๊ณ ์์ฑํ ์ธ์คํด์ค๋ฅผ ๋ฐํํ๊ฒ ๋๋ค.
๊ทธ๋ฌ๋ object
๋ฅผ ๋ฐํํ๋ฉด ์ด๋ป๊ฒ ๋ ๊น?
class Member {
constructor(name) {
return {name: '๋ฉ์ผํธ'}
}
getName() {
return this.name
}
}
let newMember = new Member('๋ผ์ด์ค๋ฌ ๋ฉง์')
console.log(newMember.name)
console.log(newMember.getName)
๋ฉ์ผํธ
undefined
name์ด ๋ฉ์ผํธ์ธ object๋ฅผ ๋ฐํํ๋ฉด์, newMember ํด๋์ค์๋ name๋ฐ์ ๋จ์ง ์๊ฒ ๋์๋ค. ๊ทธ๋ฆฌ๊ณ getName์ ์กด์ฌํ์ง ์์์ undefined๊ฐ ์ถ๋ ฅ๋๋ค.
getter, setter
class Member {
set setName(name) {
this.name = name
}
get getName(name) {
return this.name
}
}