2013. 1. 27. 21:14
Languages/CoffeeScript
객체의 function으로 호출될 때 this. 값을 어떻게 줄여서 표현 하는지와 prototype 도 알아보자. 또한 extends를 어떻게 사용하는지도 알아본다
1) this.name = name 표현하기
- this. 을 @ 로 표현한다
// prototype.coffee
###
function Dog (name) {
this.name = name;
}
Dog.prototype.growl = function() {
console.log("*growl*");
}
r = new Dog("Dowon");
r.growl();
###
Dog = (name) ->
@name = name # this.name = name
d = new Dog 'Dowon'
console.log d.name
console.log '----same thing----'
Dog2 = (@name) -> # 파라미터로 @name을 쓰면 위와 같은 표현임
d2 = new Dog2 'Dowon'
console.log d2.name
// 결과
D:\Development\coffeescript\3>coffee prototype
Dowon
----same thing----
Dowon
// prototype.js 컴파일 내역
(function() {
var Dog, Dog2, d, d2;
Dog = function(name) {
return this.name = name;
};
d = new Dog('Dowon');
console.log(d.name);
console.log('----same thing----');
Dog2 = function(name) {
this.name = name;
};
d2 = new Dog2('Dowon');
console.log(d2.name);
}).call(this);
- Tip : 만일 (function(){ 코딩내역 }).call(this) 을 없애고 싶다면 --bare 옵션을 사용하면 됨
2) prototype. 표현하기
- prototype. 을 :: 로 표현한다
// prototype2.coffee
Dog = (@name) ->
Dog.prototype.growl = ->
console.log '*growl*'
d = new Dog 'Dowon'
d.growl()
console.log '----same thing----'
Dog2 = (@name) ->
Dog2::growl = -> # :: 로 표현한다
console.log '*growl*'
d2 = new Dog2 'Dowon'
d2.growl()
//결과
D:\Development\coffeescript\3>coffee prototype2
*growl*
----same thing----
*growl*
// 컴파일 내역 : prototype2.js
// Generated by CoffeeScript 1.4.0
(function() {
var Dog, Dog2, d, d2;
Dog = function(name) {
this.name = name;
};
Dog.prototype.growl = function() {
return console.log('*growl*');
};
d = new Dog('Dowon');
d.growl();
console.log('----same thing----');
Dog2 = function(name) {
this.name = name;
};
Dog2.prototype.growl = function() {
return console.log('*growl*');
};
d2 = new Dog2('Dowon');
d2.growl();
}).call(this);
3) 상속에 대한 표현
- extends 를 통하여 상속받기
// extend.coffee
Dog = (@name) ->
Dog.prototype.growl = ->
console.log '*growl*'
BorderCollie = (@name, @tricks) ->
BorderCollie extends Dog
BorderCollie::perform = (trick) ->
if trick in @tricks
console.log "#{@name} is #{trick}"
else
console.log '*whine*'
dowon = new BorderCollie 'Dowon', ['playing dead', 'catching', 'rolling']
dowon.perform 'catching'
dowon.growl()
// 결과
D:\Development\coffeescript\3>coffee extend
Dowon is catching
*growl*
// 컴파일 내역 : extend.js
// Generated by CoffeeScript 1.4.0
(function() {
var BorderCollie, Dog, dowon,
__hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; },
__indexOf = [].indexOf || function(item) { for (var i = 0, l = this.length; i < l; i++) { if (i in this && this[i] === item) return i; } return -1; };
Dog = function(name) {
this.name = name;
};
Dog.prototype.growl = function() {
return console.log('*growl*');
};
BorderCollie = function(name, tricks) {
this.name = name;
this.tricks = tricks;
};
__extends(BorderCollie, Dog);
BorderCollie.prototype.perform = function(trick) {
if (__indexOf.call(this.tricks, trick) >= 0) {
return console.log("" + this.name + " is " + trick);
} else {
return console.log('*whine*');
}
};
dowon = new BorderCollie('Dowon', ['playing dead', 'catching', 'rolling']);
dowon.perform('catching');
dowon.growl();
}).call(this);
@ :: extends 를 익히자 ^^
coffeescript-3.zip'Languages > CoffeeScript' 카테고리의 다른 글
| [CoffeeScript] 문법 사용하기 (5) - regex, html (0) | 2013.01.29 |
|---|---|
| [CoffeeScript] 문법 사용하기 (4) - class, extends (0) | 2013.01.27 |
| [CoffeeScript] 문법 사용하기 (2) - 조건, 반복문 (0) | 2013.01.24 |
| [CoffeeScript] 문법 사용하기 (1) (0) | 2013.01.24 |
| [CoffeeScript] 설치하고 간단 사용하기 (0) | 2013.01.24 |
