Skip to content

javascript_jquery_basic_5_1

KyusungDev edited this page Jun 9, 2017 · 4 revisions

๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๊ธฐ์ดˆ

์ ˆ์ฐจ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

์ ˆ์ฐจ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ๋ฌธ์ œ๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ์ž‘์€ ํ•จ์ˆ˜๋กœ ๋‚˜๋ˆ  ์ž‘์„ฑํ•˜๋ฉฐ ์ด ํ•จ์ˆ˜๋“ค์„ ์›ํ•˜๋Š” ์ˆœ์„œ์— ๋งž๊ฒŒ ์ž‘์„ฑํ•˜๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค. ์ ˆ์ฐจ์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๊ฐ€์žฅ ํฐ ํŠน์ง•์€ ์ฒ˜๋ฆฌ ๋ถ€๋ถ„์ธ ํ•จ์ˆ˜๋“ค์—์„œ ์ „์—ญ ๋ฐ์ดํ„ฐ๋ฅผ ๊ณต์œ ํ•ด์„œ ์‚ฌ์šฉํ•œ๋‹ค๋Š” ์ ์ด๋‹ค. ๋ฐ์ดํ„ฐ๋Š” ์ผ๋ฐ˜์ ์œผ๋กœ ์ „์—ญ ๋ฐ์ดํ„ฐ๋กœ ๋งŒ๋“ค์–ด์ง€๋ฉฐ ํ•จ์ˆ˜ ํ˜ธ์ถœ์‹œ ๊ณต์œ  ๋ฐ์ดํ„ฐ๋ฅผ ๋งค๊ฐœ๋ณ€์ˆ˜ ๊ฐ’์œผ๋กœ ๋„˜๊ธฐ๋Š” ๊ตฌ์กฐ๋กœ ๋˜์–ด์žˆ๋‹ค.

๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ

๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์€ ๋ฌธ์ œ๋ฅผ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๊ฐ์ฒด ๋‹จ์œ„๋กœ ๋‚˜๋ˆ  ์ž‘์—…ํ•˜๋Š” ๋ฐฉ์‹์„ ๋งํ•œ๋‹ค. ์ด ๋ฐฉ์‹์€ ์˜ค๋Š˜๋‚  ๊ฐ€์žฅ ๋งŽ์ด ์‚ฌ์šฉํ•˜๋Š” ๋Œ€ํ‘œ์ ์ธ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ๋ฐฉ์‹์ด๋‹ค. ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ๊ฐ€์žฅ ํฐ ํŠน์ง•์€ ํด๋ž˜์Šค๋ฅผ ์ด์šฉํ•ด ์—ฐ๊ด€ ์žˆ๋Š” ์ฒ˜๋ฆฌ๋ถ€๋ถ„(ํ•จ์ˆ˜)๊ณผ ๋ฐ์ดํ„ฐ ๋ถ€๋ถ„(๋ณ€์ˆ˜)๋ฅผ ํ•˜๋‚˜๋กœ ๋ฌถ์–ด ๊ฐ์ฒด(์ธ์Šคํ„ด์Šค)๋ฅผ ์ƒ์„ฑํ•ด ์‚ฌ์šฉํ•œ๋‹ค๋Š” ์ ์ด๋‹ค.

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์ธ๊ฐ€?

์ž๋ฐ”์Šคํฌ๋ฆฝํŠธ๋Š” ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด๊ฐ€ ์•„๋‹ˆ๋‹ค. ๊ทธ๋Ÿฌ๋‚˜ ES6 ๋ถ€ํ„ฐ ๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ ์–ธ์–ด์— ํ•„์š”ํ•œ ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•˜๋ฏ€๋กœ์จ ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด๋กœ ๋ณ€ํ™”ํ•ด๊ฐ€๊ณ  ์žˆ๋‹ค.

๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ํŠน์ง•

๊ฐ์ฒด์ง€ํ–ฅ ํ”„๋กœ๊ทธ๋ž˜๋ฐ์ด๋ž€ ์ผ์ข…์˜ ๋…ผ๋ฌธ๊ณผ๋„ ๊ฐ™์€ ์—ฐ๊ตฌ ๊ฒฐ๊ณผ์˜ ์‚ฐ๋ฌผ์ด๋‹ค. ์œ ์ง€๋ณด์ˆ˜ํ•˜๊ธฐ ์‰ฝ๊ณ  ๋ƒ„์ƒˆ ๋‚˜์ง€ ์•Š๋Š” ๋ฉ‹์ง„ ์ฝ”๋“œ๋ฅผ ๋งŒ๋“ค ์ˆ˜ ์žˆ์„๊นŒ ์ˆ˜์—†์ด ๋…ธ๋ ฅํ•œ ๋์— ์™„์„ฑํ•œ ์ตœ์ƒ์˜ ๊ฒฐ๊ณผ๋ฌผ์ด๋‹ค. ๊ฐ์ฒด์ง€ํ–ฅ ์–ธ์–ด๋Š” ์•„๋ž˜ ๋„ค ๊ฐ€์ง€ ํŠน์ง•์„ ๊ตฌํ˜„ํ•  ์ˆ˜ ์žˆ๋Š” ๊ธฐ๋Šฅ์„ ์ œ๊ณตํ•ด์•ผ ํ•œ๋‹ค.

  • ์ถ”์ƒํ™”
  • ์บก์Аํ™”
  • ์ƒ์†
  • ๋‹คํ˜•์„ฑ

์ถ”์ƒํ™”

์ถ”์ƒํ™”๋Š” ์„ค๊ณ„ํ•˜๋Š” ์ž‘์—… ์ž์ฒด๋ฅผ ๋‚˜ํƒ€๋‚ธ๋‹ค. ์ถ”์ƒํ™”์˜ ๊ฐ€์žฅ ํฐ ํŠน์ง•์€ ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ์˜ ์ด๋ฆ„์„ ์ž‘์„ฑํ•˜๋Š” ์„ ์–ธ ๋ถ€๋ถ„๋งŒ ๋งŒ๋“ค ๋ฟ ๊ตฌํ˜„ ์†Œ์Šค๋ฅผ ๊ตฌํ˜„ํ•˜์ง€ ์•Š๋Š”๋‹ค๋Š” ์ ์ด๋‹ค.

์˜ˆ์ œ: ES5 ๊ธฐ๋ฐ˜ ์ถ”์ƒํด๋ž˜์Šค์™€ ์ถ”์ƒ๋ฉ”์„œ๋“œ ๊ตฌํ˜„

์บก์Аํ™”

์ถ”์ƒํ™” ์ž‘์—… ๋‚ด์šฉ์ค‘ ์–ด๋–ค ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋Š” ์™ธ๋ถ€์—์„œ ์ ‘๊ทผ ๊ฐ€๋Šฅํ•˜๊ณ  ๋˜ ์–ด๋–ค ํ”„๋กœํผํ‹ฐ์™€ ๋ฉ”์„œ๋“œ๋Š” ์™ธ๋ถ€์—์„œ ์ ‘๊ทผํ•˜์ง€ ๋ชปํ•˜๊ฒŒ ํ•ด์•ผ ํ•˜๋Š” ๊ฒฝ์šฐ๊ฐ€ ์žˆ๋‹ค. ์ด ์ž‘์—…์„ ์บก์Аํ™”๋ผ๊ณ  ํ•œ๋‹ค.

์˜ˆ์ œ: ES5 ๊ธฐ๋ฐ˜ ์ ‘๊ทผ์ง€์ •์ž ๊ตฌํ˜„

์ƒ์†

์ƒ์†์€ ํŠน์ • ํด๋ž˜์Šค(๋ถ€๋ชจ ํด๋ž˜์Šค)์˜ ์†์„ฑ๊ณผ ๋ฉ”์„œ๋“œ๋ฅผ ํ•˜์œ„(์ž์‹) ํด๋ž˜์Šค๊ฐ€ ๋ฌผ๋ ค๋ฐ›๋Š” ๊ฒƒ์„ ์˜๋ฏธํ•œ๋‹ค.

์˜ˆ์ œ: ES5 ๊ธฐ๋ฐ˜ ์ƒ์† ๊ตฌํ˜„
์˜ˆ์ œ: ES6 ๊ธฐ๋ฐ˜ ์ƒ์† ๊ตฌํ˜„

๋‹คํ˜•์„ฑ

๋‹คํ˜•์„ฑ์€ ํŠน์ • ๊ธฐ๋Šฅ์„ ์„ ์–ธ(์„ค๊ณ„)๋ถ€๋ถ„๊ณผ ๊ตฌํ˜„(๋™์ž‘)๋ถ€๋ถ„์œผ๋กœ ๋ถ„๋ฆฌํ•œ ํ›„ ๊ตฌํ˜„๋ถ€๋ถ„์„ ๋‹ค์–‘ํ•œ ๋ฐฉ๋ฒ•์œผ๋กœ ๋งŒ๋“ค์–ด ์„ ํƒํ•ด์„œ ์‚ฌ์šฉํ•  ์ˆ˜ ์žˆ๊ฒŒ ํ•˜๋Š” ๊ธฐ๋Šฅ์ด๋‹ค. ์—ฌ๊ธฐ์„œ ์„ ์–ธ ๋ถ€๋ถ„์€ ์ธํ„ฐํŽ˜์ด์Šค๋ผ๊ณ ๋„ ํ•œ๋‹ค.

์˜ˆ์ œ: this๋ฅผ ์ด์šฉํ•œ ๋‹คํ˜•์„ฑ ๊ตฌํ˜„
์˜ˆ์ œ: ์ƒ์†์˜ ๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋ผ์ด๋“œ๋ฅผ ์ด์šฉํ•œ ๋‹คํ˜•์„ฑ ๊ตฌํ˜„

๋ฉ”์„œ๋“œ์˜ค๋ฒ„๋ผ์ด๋“œ

๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋ผ์ด๋“œ๋Š” ์ž์‹ ํด๋ž˜์Šค์—์„œ ๋ถ€๋ชจ ํด๋ž˜์Šค์˜ ๊ธฐ๋Šฅ์„ ์žฌ์ •์˜ํ•  ๋•Œ ์‚ฌ์šฉํ•˜๋Š” ๊ธฐ๋Šฅ์ด๋‹ค.

๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋กœ๋”ฉ

๋ฉ”์„œ๋“œ ์˜ค๋ฒ„๋กœ๋”ฉ์€ ๋™์ผํ•œ ์ด๋ฆ„์„ ๊ฐ€์ง„ ์—ฌ๋Ÿฌ ๊ฐœ์˜ ๋ฉ”์„œ๋“œ๋ฅผ ๋งŒ๋“  ํ›„ ๋งค๊ฐœ๋ณ€์ˆ˜ ํƒ€์ž…๊ณผ ๊ฐœ์ˆ˜์— ๋งž๋Š” ๋ฉ”์„œ๋“œ๊ฐ€ ์ž๋™์œผ๋กœ ํ˜ธ์ถœ๋˜๋Š” ๊ธฐ๋Šฅ์„ ๋œปํ•œ๋‹ค.

constructor ํ”„๋กœํผํ‹ฐ

ํด๋ž˜์Šค ์ƒ์† ๊ทœ์น™

ํ•ฉ์„ฑ

๊ฐ์ฒด์ง€ํ–ฅ ์„ค๊ณ„๋Š” ํ”„๋กœ๊ทธ๋ž˜๋ฐ์˜ ์˜์—ญ์„ ๋„˜์–ด์„  ์˜ˆ์ˆ ์˜ ์˜์—ญ์ด๋‹ค.

http://woowabros.github.io/study/2016/07/07/think_object_oriented.html

Clone this wiki locally