문서의 선택한 두 판 사이의 차이를 보여줍니다.
양쪽 이전 판 이전 판 다음 판 | 이전 판 | ||
javascript:기초 [2011/11/14 16:31] kwon37xi |
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()); | + | |
- | </ | + | |
- | + | ||
- | ==== Class 객체의 method를 Event Handler Function으로 등록하기 ==== | + | |
- | Class 객체의 method는 원칙적으로 this가 객체를 가리켜야 하지만, **이벤트 핸들러로 등록되면 이벤트를 발생시킨 객체를 this로 가지게 되는 현상이 발생한다.** | + | |
- | 이 문제를 해결하려면 [[http:// | + | |
- | + | ||
- | <code javascript> | + | |
- | ClickCounter = function(buttonId) { | + | |
- | this._clickCount = 0; | + | |
- | var that = this; | + | |
- | document.getElementById(buttonId).onclick = function(){ that.buttonClicked() }; | + | |
- | } | + | |
- | + | ||
- | ClickCounter.prototype = { | + | |
- | buttonClicked: | + | |
- | this._clickCount++; | + | |
- | alert(' | + | |
- | } | + | |
- | } | + | |
- | </ | + | |
- | + | ||
- | 핵심은 이벤트 핸들러를 등록할 때 **this를 that으로 매핑하고, | + |