용오름체험휴양마을영농조합법인 / 홍천 용오름캠핑장 팸투어 다녀왔어요.

용오름체험휴양마을영농조합법인 / 홍천 용오름캠핑장 팸투어 다녀왔어요.강원도 홍천 서석면에 위치해있으며 1급수 용오름계곡 바로 옆에 있습니다.홍천군 1등 마을로 마을에서 직접 관리하는 용오름캠핑장,펜션 10개를 운영하고 있으며 각종 모임이 가능하도록 식당,회의실,야외무대가 설치되어 있습니다.홍천군 1등 마을답게 캠핑장,펜션 마을 전지역 wi-fi 사용이 가능하며 매년 봄 팸투어 실시, 여름엔 마을에서 재배한 홉으로 직접만든 맥주축제,마리소리 음악축제 를 열고 있습니다.계곡의 경우 수심이 다양하여 다이빙 포인트가 2곳이 있으며 아이들이 안전하게 물놀이를 할 수 있는 곳도 여러 곳 있습니다.홍천 용오름캠핑장 팸투어 다녀왔어요.요즘은 농산촌체험마을에서 캠핑과 여러프로그램을 같이 하는 곳이 추세더라고요. 아미산이 둘러쌓인 청정계곡이 흐르는 아름다운 용오름체험휴양마을 에서 운영하는 홍천 용오름캠핑장 팸투어 다녀왔어요. 테크 앞 강이...붕어빵 가족의 담너머 세상구경https://m.blog.naver.com/1092119/220711235599가을여행-홍천여행- 홍천 용오름 마을 첫째날여행의 계절 가을입니다. 요즘 저희는 강원도에 꽃힌 상태인지라...카페 행복한 이티씨와 함께하는 홍천 용오름 마을 1박2일 체험에 참가를 하였답니다! 평소 체험 시간보다 조금 늦은 출발을 해서 차가 밀리지 않으려나...귀여운 단지https://m.blog.naver.com/sanguidan/50181593653용오름마을 캠핑장여름휴가의 시즌이다.. 강원도의 계곡과 시원함을 만끽하기 위해 캠핑장을 검색하다 우연히 알게 된 홍천의 용오름 캠핑장.. 성수기라 캠핑장 요금들이 사악하다 용오름캠핑장 옆엔 해미르 캠핑장이 있는데...★살로몬의 잇츠캠핑★https://m.blog.naver.com/freeguy9040/20163628934맥주효모로 만든 용오름맥주마을 바쏘 맥주샴푸와 맥주마스크팩...1988년까지 맥주 원료인 홉을 재배하며 번성했던 강원도 홍천군 서석면 용오름 마을이란 곳이 있었습니다…

프로토타입과 클래스

프로토타입과 클래스

객체 생성자

프로토타입과 클래스에 대해서 알아보기 전에 우선 객체 생성자라는 것을 알아봅시다.

객체 생성자는 함수를 통해서 새로운 객체를 만들고 그 안에 넣고 싶은 값 혹은 함수들을 구현할 수 있게 해줍니다.

다음 코드를 입력해보세요.

function Animal (type, name, sound) { this.type = type; this.name = name; this.sound = sound; this.say = function() { console.log(this.sound); }; } const dog = new Animal ('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); cat.say();

결과물은 다음과 같습니다.

멍멍 야옹

객체 생성자를 사용 할 때는 보통 함수의 이름을 대문자로 시작학, 새로운 객체를 만들 때에는 new키워드를 앞에 붙여주어야 합니다.

지금 위 코드를 보시면, dog가 가지고 있는 say함수와 cat이 가지고 있는 수행하는 코드가 똑같음에도 불구하고 객체가 생성 될 때 마다 함수도 새로 만들어져서 this.say로 설정이 되고 있습니다.

같은 객체 생성자 함수를 사용하는 경우, 특정 함수 또는 값을 재사용 할 수 있는데 바로 프로토타입입니다.

프로토타입

프로토타입은 다음과 같이 객체 생성자 함수 아래에 .prototype.[원하는키] = 코드를 입력하여 설정 할 수 있습니다.

function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; } Animal.prototype.say = function() { console.log(this.sound); }; Animal.prototype.sharedValue = 1; const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); cat.say(); console.log(dog.sharedValue); console.log(cat.sharedValue);

결과는 다음과 같습니다.

멍멍 야옹 1 1

객체 생성자 상속받기

예를 들어서 우리가 Cat 하고 Dog라는 새로운 객체 생성자를 만든다고 가정 해봅시다,

그리고, 해당 객체 생성자들에서 Animal의 기능을 재사용한다고 가정 해봅시다. 그렇다면 다음과 같이 구현이 됩니다.

function Animal(type, name, sound) { this.type = type; this.name = name; this.sound = sound; } Animal.prototype.say = function() { console.log(this.sound); }; Animal.prototype.sharedValue = 1; function Dog(name, sound) { Animal.call(this, '개', name, sound); } Dog.prototype = Animal.prototype; function Cat(name, sound) { Animal.call(this, '고양이', name, sound); } Cat.prototype = Animal.prototype; const dog = new Dog('멍멍이', '멍멍'); const cat = new Cat('야옹이', '야옹'); dog.say(); cat.say();

새로 만든 Dog 와 Cat 함수에서 Animal.call을 호출해주고 있는데요, 여기서 첫 번째 인자에는 this를 넣어주어야 하고, 그 이후에는 Animal 객체 생성자 함수에서 필요로 하는 파라미터를 넣어주어야 합니다.

추가적으로 prototype을 공유해야 하기 때문에 상속받은 객체 생성자 함수를 만들고나서 prototype 값을 Animal.prototype으로 설정해주었습니다.

클래스

클래스라는 기능은 C++, Java, C#, PHP등의 다른 프로그래밍 언어에는 있는 기능인데 자바스크립트에는 없었기 때문에

예전 자바스크립트(ES5)에서는 클래스 문법이 따로 없었기 때문에 위에서 작성한 코드처럼 객체 생성자 함수를 사용하여 비슷한 작업을 구현해왔습니다.

ES6에서부터는 class라는 문법이 추가되었는데요, 우리가 객체 생성자로 구현했던 코드를 조금 더 명확하고, 깔끔하게 구현 할 수 있게 해줍니다. 추가적으로, 상속도 훨씬 쉽게 해줄 수 있습니다.

class Animal { constructor (type, name, sound) { this.type = type; this.name = name; this.sound = sound; } say() { console.log(this.sound); } } const dog = new Animal('개', '멍멍이', '멍멍'); const cat = new Animal('고양이', '야옹이', '야옹'); dog.say(); cat.say();

여기서 우리가 say라는 함수를 클래스 내부에 선언하였는데요, 클래스 내부의 함수를 '메서드'라고 부릅니다.

이렇게 메서드를 만들면 자동으로 prototype으로 등록이 됩니다. 결과는 다음과 같습니다.

멍멍 야옹

class를 사용했을 때에는, 다른 클래스를 쉽게 상속 할 수 있습니다.

class Animal { constructor(type, name, sound) { this.type = type; this.name = name; this.sound = sound; } say(){ console.log(this.sound); } } class Dog extends Animal { constructor(name, sound) { super('개', name, sound); } } class Cat extends Animal{ constructor(name, sound) { super('고양이', name, sound); } } const dog = new Dog('멍멍이', '멍멍'); const cat = new Cat('야옹이', '야옹'); dog.say(); cat.say();

결과물은 다음과 같습니다.

멍멍 야옹

상속을 할 때는 extends 키워드를 사용하며, constructor에서 사용하는 super() 함수가 상속받은 클래스의 생성자를 가르킵니다.

class Animal { constructor(type, name, sound) { this.type = type; this.name = name; this.sound = sound; } say(){ console.log(this.sound); } } class Dog extends Animal { constructor(name, sound) { super('개', name, sound); } } class Cat extends Animal{ constructor(name, sound) { super('고양이', name, sound); } } const dog = new Dog('멍멍이', '멍멍'); const dog2 = new Dog('왈왈이', '왈왈'); const cat = new Cat('야옹이', '야옹'); const cat2 = new Cat('냐옹이', '냐옹'); dog.say(); dog2.say(); cat.say(); cat2.say();

마지막으로 연습을 한번 해보겠습니다.

class Food { constructor(name) { this.name = name; this.brands = []; } addBrand(brand){ this.brands.push(brand) } print() { console.log(`${this.name}을/를 파는 음식점들:`) console.log(this.brands.join(', ')); } } const pizza = new Food('피자'); pizza.addBrand('피자헛'); pizza.addBrand('도미노피자'); const chicken = new Food('치킨'); chicken.addBrand('굽네치킨'); chicken.addBrand('BBQ'); pizza.print(); chicken.print();

이런식으로, 클래스를 만들어서 사용하면 같은 형태를 지닌 객체들을 만들 때 객체들이 지닌 값과 함수를 보기 좋은 형태로 쉽게 관리 할 수 있습니다.

from http://dsaako1117.tistory.com/14 by ccl(A) rewrite - 2020-03-20 14:20:08

댓글

이 블로그의 인기 게시물

용오름체험휴양마을영농조합법인 / 홍천 용오름캠핑장 팸투어 다녀왔어요.

[C언어] 백준 알고리즘 - 숫자의 개수(2577번)

[2020 정보처리기사 실기 - 프로그래밍 언어 활용] 2. 언어 특성 활용...