[CoffeeScript] 문법 사용하기 (3) - @ :: 표현

객체의 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