문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판 이전 판 다음 판 | 이전 판 | ||
javascript:기초 [2011/11/07 21:51] kwon37xi [Class 없이 객체 생성하고 메소드 추가하기] |
javascript:기초 [2022/01/22 12:44] (현재) kwon37xi |
||
---|---|---|---|
줄 1: | 줄 1: | ||
====== Javascript 기초 ====== | ====== Javascript 기초 ====== | ||
* [[https:// | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
+ | * [[https:// | ||
* [[http:// | * [[http:// | ||
- | + | | |
- | ===== 객체지향 프로그래밍 ===== | + | |
- | | + | |
- | * [[https:// | + | |
- | * [[http:// | + | |
- | + | ||
- | ==== 클래스 만들기 ==== | + | |
- | 원칙적으로 말해서 JS에는 class는 존재하지 않는다. 단지, 생성자 함수만 존재할 뿐이다. | + | |
- | + | ||
- | 아래는 Pet 이라는 클래스를 생성한다. | + | |
- | + | ||
- | <code javascript> | + | |
- | function Pet(name) { | + | |
- | this.name = name; // name 필드 생성 | + | |
- | } | + | |
- | + | ||
- | Pet.prototype.age = 0; // age 필드 생성 | + | |
- | + | ||
- | // toString 메소드 생성 | + | |
- | Pet.prototype.toString = function() { | + | |
- | return "Pet name : " + this.name + ", age : " + this.age; | + | |
- | } | + | |
- | + | ||
- | var mong = new Pet(" | + | |
- | mong.age = 6; | + | |
- | alert(mong); | + | |
- | </ | + | |
- | + | ||
- | ==== 상속 ==== | + | |
- | 상속할 때 중요한 부분은 '' | + | |
- | + | ||
- | <code javascript> | + | |
- | // 위에서 이어서, Pet을 상속하는 Dog 생성 | + | |
- | function Dog(name, age, breed) { | + | |
- | Pet.call(this, | + | |
- | this.age = age; | + | |
- | this.breed = breed; | + | |
- | } | + | |
- | + | ||
- | // Dog.prototype이 Pet.prototype으로부터 상속하도록 한다. | + | |
- | Dog.prototype = new Pet(); | + | |
- | + | ||
- | // Pet 함수를 가리키는 생성자를 Dog 함수를 가리키도록 변경한다. | + | |
- | Dog.prototype.constructor = Dog; | + | |
- | + | ||
- | // toString() 메소드 오버라이드 | + | |
- | Dog.prototype.toString = function() { | + | |
- | // 필요할 경우 부모클래스 메소드도 호출 가능 | + | |
- | return "Dog " + Pet.prototype.toString.call(this) + ", breed : " + this.breed; | + | |
- | } | + | |
- | + | ||
- | var miro = new Dog(" | + | |
- | alert(miro); | + | |
- | + | ||
- | alert(" | + | |
- | alert(" | + | |
- | alert(" | + | |
- | </ | + | |
- | + | ||
- | ==== Class 없이 객체 생성하고 메소드 추가하기 ==== | + | |
- | [[http://www.2ality.com/2011/11/ | + | |
- | + | ||
- | * 마치 class를 통해 생성한 객체처럼 필드와 메소드를 둘 수 있다. 메소드에서는 '' | + | |
- | + | ||
- | var jane = { | + | |
- | name: " | + | |
- | describe: function() { | + | |
- | return " | + | |
- | } | + | |
- | }; | + | |
- | + | ||
- | console.log(jane.describe()); | + | |
- | </ | + | |
- | * 클래스 없이 상속도 쉽게 가능하다.< | + | |
- | var PersonProto = { | + | |
- | describe: function () { | + | |
- | return " | + | |
- | } | + | |
- | }; | + | |
- | var jane = { | + | |
- | __proto__: PersonProto, | + | |
- | name: " | + | |
- | }; | + | |
- | var tarzan = { | + | |
- | __proto__: PersonProto, | + | |
- | name: " | + | |
- | }; | + | |
- | console.log(jane.describe()); | + | |
- | console.log(tarzan.describe()); | + | |
- | </ | + |