11

CoffeeScriptで書かれたjQueryプラグインを読んでいるのですが、@の記述がよくわかりません。下記のような使われ方をしているのですが、これは何を表しているのでしょうか。

self = @

また、@はJavascript、jQueryにおいてどんな意味を持ちますか?
本で探しても@に関する記述がなく困っています。

1
  • 編集メモ:元の質問では「jsのプラグイン」と書かれていましたが、恐らくjQueryプラグインのことだろうと思い書き換え、それ以外の「js」を「Javascript」としました。また原題は「jqueryの"@"に関して」でしたが、質問文からして実際にはjQueryだけでなくJSのキーワードという線も疑っていたようなので、題名からjQueryへの言及を取り除きました。
    – unarist
    Commented 2016年1月14日 14:02

2 件の回答 2

9

本家サイト の説明の
All together now:
の対比表の部分で、

CoffeeScript  JavaScript
@, this          this

になっているので、JavaScriptで言うthisを表す(同じと考えていい)ようです。
As a shortcut for this.property, you can use @property.
という説明があるので、
this.property@propertyのように書くためのショートカットのようです。

1
  • All together now: という記述はページ内に二か所ありますが、 Operators and Aliases の箇所ですね。
    – unarist
    Commented 2016年1月14日 14:10
3

JavaScriptは何処から呼び出したかによって同じ文脈でもthisの意味が変化します。
CoffeeScriptでは@を使う事でthisのタイプ数を減らす以外にもかっこいい使い方が出来ます。

例えばこんなことしたい場合です。

hoge = function() {
  var foo;
  this.piko = 123
  foo = function() {
    return this.piko
  }
}

この時上で宣言したpikoプロパティfoo関数の中では使う事が出来ません。
どうしても使いたい場合は、少々小細工が必要になります。

hoge = function() {
  var self = this;
  var foo;
  this.piko = 123;
  foo = function() {
    return self.piko
  }
};

コレを実現する為にCoffeeScriptで書くとこうなります。

hoge = ->
  @piko = 123
  foo = =>
    @piko

この時thisを無名関数の中に持って入りたい時は、
=>で関数定義するだけで2つ目のような迂回するJavaScriptを生成することが出来ます。
(これは似たような仕様がES6で採用されたかと思います)

2
  • @piko の代わりに this.piko と書いても同じように使えますね: jsfiddle.net/9yupbucv
    – unarist
    Commented 2016年1月14日 13:45
  • へー!そうなんですね!…URLありがとうございます。今CoffeeScriptの公式サイトで確認もしましたがthisと@で全く同じJSが吐き出されることも確認しました。ありがとうございます、勉強になりました!
    – miyabi
    Commented 2016年1月14日 13:48

この質問に回答するには、ログインする必要があります。

求めていた回答ではありませんか? のタグが付いた他の質問を参照する。