JavaScript の、this は、コロコロ変わるから難しい。
bind を使わないと、拘束できない

jQuery を使えば、悩むこともない

>>453
jQueryを使ってもそこは一緒
だけどjQueryだとクロージャーを使っても循環参照になりづらいのと
DOM要素のリストとして扱うという設計思想によって扱いやすいってだけ

でさ、お前ら何やってんの？
>>437の話だろ？ なんでthisを保存とかいう話になってんの？

addEventListenerの第二引数にクロージャーなんか渡すから
話ややこしくなってるじゃん。 >>437のコードでだいたいあってるだろ

http://jsfiddle.net/rdeuvep2/

function Hoge(elementId) {
　this.div = document.getElementById(elementId)
}

Hoge.prototype.foo = function() {
　var button = document.createElement( "input" );
　button.type = "button";
　button.value = "テスト";
　button.addEventListener( "click", this.bar, false );
　this.div.appendChild( button );
}

Hoge.prototype.bar = function() {
　alert( "click" );
};

var hoge = new Hoge("buttons");
hoge.foo();

ここまで
アロー関数
無し

んで、恒例のjQuery化ｗ

なるべく元の形を保ったバージョン
http://jsfiddle.net/rdeuvep2/1/

function Hoge(elementId) {
　this.elementId = elementId
}
Hoge.prototype.foo = function(){
　$("<input>", {type: "button", value: "テスト"}).click(this.bar).appendTo(this.elementId)
}
Hoge.prototype.bar = function(){
　alert( "click" );
};
var hoge = new Hoge("#buttons");
hoge.foo()


俺はHogeクラスなんか作らずこんなんでいいと思ってる
http://jsfiddle.net/rdeuvep2/2/

var attrs = [{value: "テスト1"}, {value: "テスト2"}];
var buttons = attrs.map(attr => $("<input>", attr).attr({type: 'button'}));
$("#buttons").append(buttons).on('click', 'input[type="button"]', function() {
　　alert( "click " + this.value);
});


>>455
アロー関数使ってやったぜ？ｗ

classを使って書いたバージョン
http://jsfiddle.net/rdeuvep2/3/

>>455
アロー関数つかってやったが、
>>454で書いたとおり、今回はアロー関数もクロージャーもいらない

補足

「今回は」アロー関数もクロージャーもいらない
今回の要件にthisがどうなるかってのが書かれていないから

this.barは今回は動くがthisは違っていると念の為に言っておく
いろんなサンプル追加
http://jsfiddle.net/rdeuvep2/6/

qiitaで記事うｐしても叩かれない知識を身に着けたいんですが
JavaScriptという言語を学ぶための良書を教えてください

その考え方は大間違い
人に意見を発信する以上は文句を付けられて当たり前
そしてそれは良いこと
お互い内外から叩き合ってきれいな球に近づくのだから
それを防ごうと言うのはトゲトゲボールか、スライムになってしまうのがオチ

>>453
えええ…

>>459
とりあえずサイ本

現段階のおまえさんのレベルも
おまえさんが書いた記事にツッコミを入れる奴のレベルもわからんから
それを数冊の本でなんとかするのは難しかろう

JavaScript 第6版、2012、David Flanagan

Google などのプロの机に、必ず置いてある本

プロのJSerやWEBエンジニアならオンライン仕様書以外は必要ない
そういうのはJSの常識を知らない非JSネイティブプログラマ向けに用意されてる
それもES2015以降の今の時代に於いては、JSを歴史から学んでJS仙人を目指したい人以外には過去の有名な本という飾りでしかない

仕様書ってどこ見たらいいのか教えてください

>>465
何の仕様書を読みたいのか分からないが、>>4-5
http://fiddle.jshell.net/vSqKr/44/show/light/#Link

初心者はまずはMDN　「MDN ○○」でググる
そしてより詳しく知りたければMDNの各記事の下に仕様へのリンクが張ってある
徐々にそっちに移行していく

let lastTimeSignal;
setInterval(fuction(){
let now = moment();
let nowMinutes = now.format('YYYYMMDDHHmm');
if (now.minutes()==0 && lastTimeSignal !== nowMinutes){
lastTimeSignal = nowMinutes;
/*処理*/
｝
},1000);

みたいなコードがあります
moment()はmoment.jsです
現在時刻の分数が0の時に一度だけ実行する、ようは時報です
ですが、ごくまれに連続して複数回時報が実行されてしまうことがあります
lastTimeSignalが設定されるので排他的に処理されるはずなのに
何故複数回実行されてしまうのか分かりません
現象はchromeで確認しています
lastTimeSignal とnowMinutesをログに出力するようにしましたが
連続実行された時の値は全く同一でした
lastTimeSignalが設定されないまま
複数のインターバルが呼び出されている、としか思えません
処理は、何かと不安定なSpeechSynthesisUtteranceを使っているので
それが原因なのかとも思いますが
処理の前にlastTimeSignal = nowMinutesとすぐに代入しているので、
たとえSpeechSynthesisUtteranceに問題があっても排他処理まで失敗するのは奇妙です
関数の外の変数（lastTimeSignal）への変更が
すぐに反映しない、なんてことあり得ますか？

>>468
あらためてログを確認すると
10/13 05:00:00.97
10/13 05:00:00.98
と、0.01秒差で連続実行されていました
1秒ごとに実行されるはずのインターバル処理が、
ほぼ同時に2回呼び出されていることになります
一体何故・・？
いま、ふと思い付いたのですが
不安定なSpeechSynthesisUtteranceの実行に更にsetTimeoutを挟めば
変数の変更まで不安定になることは防げるかもしれません

とにかく問題が再現できる最小限のコードを貼りなさい
できればライブラリも除いた状態で
まずそうやって削ぎ落としていくのがデバッグの基本でもある

ここに質問するくらいならteratail使えや。コード見づらい。

明確な根拠もなく実行系を疑うのはプログラマ憲法でタブーとされていること

プログラマーが権力機構で処理系が労働者なのか

恥ずかしいことに、インターバルタイマーを複数回設定していたのが原因でした
ライブラリの中の、
起動時にしか実行されないと思っていたハンドラの中で設定していたのですが
そのハンドラはその後の操作によっては複数回呼び出されるものだったのです
プログラマー憲法を心に銘じます
ありがとうございました

思った通りの原因だった

まあでも非同期が絡むとデバッグが一段と難しくなるのは事実
ただコールバックで闇雲に投げて闇雲に呼ばれるのではなく
Promise,async-await,async generator辺りを適切に使って
シーケンシャルに管理すれば軽減できはする

jsだと無名関数にしてしまう分、普通に何回も呼び出してしまうよな
アクセス解析の値がぶっとんでた時はあせったわ

無名関数だからって理由でそんなことすることはないな。
だって名前つけても同じ話だもの

無名関数ならそこでしか使わないんだから
逆に予定外に何度も呼び出すことなんて少ないと思うが

ES2015でforEachがオブジェクトに追加されなかったのは何故ですか？
最近のJSはイケてると思っていましたが
いまだにオブジェクトをforEachできないのは違和感があります
もうかなり以前からunderscoreやlodashがforEachの有用性を証明してますよね

そういうことするならmapって話なんじゃね

>>480
だからlodashを使えばいいだけだろう？

mapは新しい配列を作るためのものなので用途が違います
ライブラリは言語にあるべき未来を見せるのが役割の一つなので
それを何年も前に見せられてなおかつ放置してるのは怠慢と言わざるを得ません

いや、ライブラリは言語仕様をシンプルにするのが目的だよ。
どんな言語でも言語自体に色んな機能を含めず
多くの機能はライブラリで提供されてるはずだ。

>>483
Mapと書くべきだったか
まあ意図は違うんだろうけど

Mapじゃなくて地図と書くべき。
でないと、SMAPと勘違いされる可能性がある。

あの文脈ならMapで通じると思うけど
つーかもうオブジェクトからイテレーター作れるじゃん

mapメソッドとは別にMapオブジェクトというのがあったのですね
イテラブルではない普通のオブジェクトを回すのはあまり行儀が良くない、
という判断が根底にあるのでしょうか？
でも

(new Map([['taro','name'],[15,'age']])).forEach((key,value)=>{
});

こんな書き方がイケてるとはあまり思えないのですが・・
newを書かずにMapオブジェクトを生成する
シンタックスシュガーを用意して欲しいところです

>>488
シンタックスシュガーはいらないですね。
関数を用意すればいいだけですよ。

>>488
Object.entries(obj).forEach(([key,value])=>{})

>>490
これはなかなかいいですね
オブジェクトのインスタンスメソッドで出来て欲しいですが、
keyとvalueだけでなくindexも取れるところもイケてると思います

>>491
そのやり方は列挙順を保証出来ないから、順序がランダムで良いときしか使えない
もともと、オブジェクトのキーは列挙する事を想定したものでもないし、連祖配列的なものを望むなら、足りない機能が多くて苦労すると思うよ

順序はランダムではありません
http://tc39.github.io/ecma262/#sec-ordinaryownpropertykeys

たしかにオブジェクトのメンバに順序は期待出来ないですが
ループの中でループカウンタが欲しくなることはわりとあるので、
そういう意味です

未だにES5脳な奴がいるんだな
列挙の順序が保証されてないのはfor-in文とES5のObject.keys()
ES2015以降のObject.{keys,values.entries}()は保証されている
こんなんJSerなら誰でも知ってる常識だろう

>>495
矛盾してるぞ

> こんなんJSerなら誰でも知ってる常識だろう

ES5脳なJSerは知らないだろ？

JSは日進月歩なんだから
未だにES5脳な奴がJSerなわけ無いだろ

JSerの定義でもめるぐらいなら、ES5erとES2015erに分けろ
JavaScript===ECMAScript2015ではないんだぞ

async-awaitで逐次処理書いてる時に比較的長いタスクをやらせると
裏で動いているのかどうか分かんなくなるんですが。
定期的にconsole.logとかでログ出力していれば分かるんですが、
そうでない場合、逐次処理が実行中だってどうやって把握すればいいんですかね？

そりゃconsole.logを適切な個数置くしか無いよ

それかメイン関数以外にあちこち置くのが嫌なら
await longTimeTask()
をpromiseが解決するまで一秒ごとにログを出すperiodicLogingを用意して
await periodicLoging( 'タスクA', longTimeTask() )
と書くとか、同様にしてタイムアウトさせたりするとか