タグ

JavaScriptに関するfuyu77のブックマーク (730)

  • new を不当に貶める陰謀と JavaScript におけるクラスの継承構造の話 - vivid memo

    私は陰謀論者じゃないですし JavaScript の new 演算子が大好きなわけでも大嫌いなわけでもないです。 念のため。 記事は Hiraku さんが書かれた下記記事への言及です。 newを封印して、JavaScriptでオブジェクト指向する(1) newを封印して、JavaScriptでオブジェクト指向する(2) newを封印するべき4つの理由 new 演算子は使うな!? 「newを封印するべき4つの理由」 でも new がいかに糞であるかが書かれていますし、その記事からも言及があるように Crockford さんが書かれた書籍 『JavaScript: The Good Parts ―「良いパーツ」によるベストプラクティス』 でも new 演算子は Bad Parts に分類されています。 new 演算子が忌避される理由はいろいろあるみたいですが、Hiraku さんの記事では n

    new を不当に貶める陰謀と JavaScript におけるクラスの継承構造の話 - vivid memo
  • newを封印して、JavaScriptでオブジェクト指向する(1)

    以下はプロトタイプ的継承だけで一通りの機能を実現できる、という一つの例です。もちろん他にも書き方はありますし、newを使うのがよくないと主張しているわけではないです。 (誤解を生みそうな文体が混じっているようなので追記: 2011/5/14) 春ですし、少し初心者向けの記事を書きます。タイトル通り、JavaScriptのオブジェクト指向について。ちょっと長くなるので目次です。 クラス(に相当するオブジェクト)を作る オブジェクトからオブジェクトを作る(インスタンス化) 単一継承 多重継承 privateは諦めましょう 親のメソッドを呼ぶ コンストラクタ instanceofに対応する ダックタイピングのススメ JavaScript標準のオブジェクト指向といえばnewやらprototypeやらを書く必要がありますが、これらは書くのが面倒臭い上に気をつけないといけない点がたくさんあります。Ja

    newを封印して、JavaScriptでオブジェクト指向する(1)
  • newを封印するべき4つの理由

    ちょっと勢いに任せて書いちゃったので攻撃的な文章になってます。。 すごくわかりやすい解説記事を頂いたので、こちらも必読です。 new を不当に貶める陰謀と JavaScript におけるクラスの継承構造の話 - vivid memo (追記:2011/5/15) 前の記事「newを封印して、JavaScriptでオブジェクト指向する」が思いのほか反響が大きかったので、調子に乗って補足を書いてみますよ。 ブコメへの返信 「無用な複雑化に見える。」「俺俺オブジェクト指向な気がする。」といったご意見もいただいたんですが、普通たった10行の関数でオレオレオブジェクト指向なんて作れないですよ…。JavaScriptの内部機構をほとんどそのまま使っているからこそ、この行数で済むのです。 それに、このプロトタイプ的継承の考え方をDouglas Crockfordが編み出したのは、もう5年も前の話です。E

    newを封印するべき4つの理由
  • JavaScriptのカプセル化 – Momentum

    JavaScriptのカプセル化について 日頃はWebサイトの制作というバイトなんぞをしているわけではありますが、いい加減スパゲティコードから卒業しなければなあと思い立ち、カプセル化について勉強するわけでありました。 カプセル化のメリットとしては、外部からアクセスできなくなる(隠蔽)というのが一番あると思うんですよね。うんうん。 ここでいう『外部』というのは悪意を持ったアクセスというわけではなくて、例えば他の関数で変数の値の上書きができないようにするというニュアンスですな。 大体発見し辛いバグというと、知らずのうちに変数の値が書き変わっていて、というものでして。 それを未然に防ぐ、という意味合いでも、不用意に外からアクセスできないように隠蔽化しておくのが吉というわけですな。 全部Public JavaScriptの特長として、変数や関数は基的に全部Publicです。つまりどこからでもアク

  • jsとカプセル化の談義

    Kenichiro Ota @oota_ken @t_wada 先生!TAの指標としてお聞きしたいのですが、JavaScriptでクラスを作る方法はカプセル化の観点からはクロージャーベースがよいのでしょうか?それともプロトタイプベース? 2012-05-24 15:11:23

    jsとカプセル化の談義
  • JavaScriptの少し独特なオブジェクト指向についてまとめてみた - Rails Webook

    Photo by Flickr: slworking2's Photostream 既にJavaPHPなどオブジェクト指向言語を生業としてやっているが、その感覚でJavaScriptを少し扱っているて、いまいちJavaScript分からないという方を対象に、それらのプログラム言語とは違う、「少し独特なJavaScriptのオブジェクト指向」について説明します。 目次 オブジェクトの作成 プロパティの定義と代入 プロパティの削除 アクセサプロパティ(getter / setter) クラス定義 コンストラクタ引数 インスタンスメソッドの定義 クラスプロパティとクラスメソッドの定義 クラスの継承 クラスプロパティとクラスメソッドの継承 1. オブジェクトの作成大かっこ({})でObjectクラスを作成することができます。 また、new演算子で特定のオブジェクトを作成することができます。 //

    JavaScriptの少し独特なオブジェクト指向についてまとめてみた - Rails Webook
  • Javascriptでオブジェクト指向するときに覚えておくべきこと - Qiita

    Javascriptはブラウザのクライアントサイドで動く唯一の言語と言ってもいいので、普段書かなくてもちょいちょい書くことになる。そんな時用に、他の言語使っていると忘れてしまうJavascriptの重要な法則をまとめておく。 基的にリファレンスにしているのはMozilla Developer Network (MDN)のドキュメントの以下のページ。MDNはJavascript関連では一番ちゃんとしたドキュメントだと信じている。 Working with Objects - MDN 継承とプロトタイプチェーン - MDN this - MDN オブジェクトモデルの詳細 - MDN プロトタイプベース言語 Javascriptはプロトタイプベースのオブジェクト指向言語で、クラスベースのオブジェクト指向言語(例: C++, Java)とは異なる部分が多々ある。 例えば、クラスベース言語はクラス

    Javascriptでオブジェクト指向するときに覚えておくべきこと - Qiita
  • パスポート更新申請のPDFの仕様が酷いと聞いたので確認してみた - Windows 2000 Blog

    3rdに引っ越しました。 2010/12/31 以前&2023/1/1 以降の記事を開くと5秒後にリダイレクトされます。 普段の日記は あっち[http://thyrving.livedoor.biz/] こちらには技術関係のちょっとマニアックな記事やニュースを載せます。 Windows2000ネタ中心に毎日更新。 <body xmlns="http://www.w3.org/1999/xhtml" xmlns:xfa="http://www.xfa.org/schema/xfa-data/1.0/"><p style="font-family:'Times';font-size:24pt;letter-spacing:0in"> Please wait... </p> <p style="font-family:'Times';font-size:12pt;letter-spacing:

    パスポート更新申請のPDFの仕様が酷いと聞いたので確認してみた - Windows 2000 Blog
  • switch文を使った条件分岐

    switch (式){ case 値1: 式 === 値1 の時に実行する処理; ... break; case 値2: 式 === 値2 の時に実行する処理; ... break; case 値3: 式 === 値3 の時に実行する処理; ... break; default: 式がいずれの値とも一致しないときに実行する処理; ... } switch のあとの () に記述した式を評価し、その値が case の後に書かれたいずれかの値と一致するかどうかを調べます(一致するかどうかは == 演算子ではなく === 演算子を使って比較されます)。一致するものが見つかった場合は、その case 句の後に記述されている処理を switch 文の最後または break 文まで順に実行します。 いずれの値とも一致しなかった場合は default 句の後に記述されている処理を実行します。 defau

    switch文を使った条件分岐
  • applyとcallの使い方を丁寧に説明してみる - あと味

    JavaScriptに、applyとcallというメソッドが用意されていますが、自分なりにapplyとcallの丁寧に説明をしてみようと思ってこのエントリーを書くなどをしてみます。 applyとcallは非常に似たメソッドなので、まずはcallから説明します。 callメソッドとは? callメソッドは以下のように呼び出します。 methodA.call(thisArg, [, arg1 [, arg2, ...]]); methodAには任意の関数(メソッド)を指定します。 callの引数は第一引数にmethodAのthisとしたいオブジェクトを指定して、第二引数以降はmethodAに渡したい引数があれば、カンマ区切りでそれぞれ指定します。 callメソッドは、すべての関数が共通して持っているメソッドです。すべての関数はFunctionクラスのオブジェクトで、callはFunction.

    applyとcallの使い方を丁寧に説明してみる - あと味
  • Javascriptにおける、Object.createと new の間のオブジェクト継承 - それマグで!

    Javascript普通に書いてたら、DOMいじることが多く、ガッツリとオブジェクトを書くことが少ない。ちょっと再帰処理をやろうとおもったら、嵌まり込みそうになった。 最近のJavascriptにおける継承と制御についてまとめておいた。 昔からあるJavascriptのnew var Cat = function(name){ this.name = name; this.say = function(){ console.log("My name is "+this.name+" Nya Nyan") } } a_cat = new Cat("みー") a_cat.say() // => "My name is みー Nya Nyan" これは、昔からあるjavascript の書き方で、今でも動くし、これで十分なことが多い。 ここでは、 コンストラクタ関数の定義、new 演算子、プロパ

    Javascriptにおける、Object.createと new の間のオブジェクト継承 - それマグで!
  • Object.create() - JavaScript | MDN

    This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015. Learn moreSee full compatibilityReport feedback const person = { isHuman: false, printIntroduction: function () { console.log(`My name is ${this.name}. Am I human? ${this.isHuman}`); }, }; const me = Object.create(person); me.name = "Matthew"; // "name" is a pro

    Object.create() - JavaScript | MDN
  • JavaScriptで一定時間待ってポーリング

    JavaScriptでこんな風にポーリングをしようと思った。 while (1) { if (isFinished) { break; } Sleep(1); } ところが、JavaScriptには一定時間待つ、という関数がないみたいなんですね。 代わりにsetTimeoutという関数があったので、これを使ってみた。 functionA() setTimeout("functionB()", 1000); functionC(); この様に書くとfunctionAが実行され、1000msec後にfunctionBが実行され、functionCが実行されるのかと思いがちですが、そうではなく、functionAが実行され、タイマーがセットされ、functionCが実行される。で、タイマーがセットされてから1000msec後に非同期にfunctionBが実行されます。 setTimeoutを再帰

    JavaScriptで一定時間待ってポーリング
  • JavaScriptのタイマー処理 setTimeoutとその活用 - 犬も歩けば棒も歩く

    以前id:amachangさんのブログでJavaScriptのsetTimeoutの活用方法が掲載されていたのですが、当時はいまいち意味が分かりませんでした。その補足というのはあつかましいですが、簡単な解説と応用をのせておきます。なお、setTimeoutだけに限らず、JavaScriptのタイマー処理に関する話になります。 setTimeoutのはなし setTimeoutは指定した時間後に、指定した関数を実行してくれる関数です。JavaScriptで数秒間処理を待ちたい場合、最も単純なものに次のような方法があります。 for(var i = 0 ; i < 10000 ; i++) for(var j = 0 ; j < 10000 ; j++); //何もしない これは単に処理を重くしているだけで、ほとんどのブラウザでは、このように何回もループが続くとエラーが出ます。これをエラーが出

    JavaScriptのタイマー処理 setTimeoutとその活用 - 犬も歩けば棒も歩く
  • [JavaScript] this参照が変わらないようにsetTimeoutで関数を実行したい

    *投稿タイトル変えました setTimeoutを多用したコードを書いています。 少し遅延実行したり、大量の関数を何となく同時に実行させたり、とかとか。 そのとき困るのが setTimeout で遅延実行された関数内の this 参照が呼び出された関数のもので無くなること。 this参照が別物になると困るので無い知恵しぼって考えました。 (function (){ "use strict"; function Example () { this.x = 10; this.y = 20; } Example.prototype.doDelay = function (){ var me = this; function delay () { me.doSomething(); } setTimeout(delay, 1000); }; Example.prototype.doSomething

    [JavaScript] this参照が変わらないようにsetTimeoutで関数を実行したい
  • JavaScriptのsetTimeout()でコールバック関数に引数を渡す

    EasyRamble は、技術ネタや子育て、英語学習、アウトドアなどについて綴るブログです。Ruby on RailsSwift などで、Webサービス/アプリを作っています。

    JavaScriptのsetTimeout()でコールバック関数に引数を渡す
  • javascriptのsetTimeout()で指定するfunctionへの引数とthis問題 - end0tknr's kipple - web写経開発

    http://d.hatena.ne.jp/end0tknr/20100813/1281695700 先程のエントリでは、setTimeout()を初めて使用しましたが、今回、ややハマったところがあったので、その内容を書き留めておきます。 setTimeoutの第1引数の関数に与える引数の指定方法 setTimeoutの書式を「setTimeout(func,msec)」とだけ紹介しているページをよく見かけますが、第1引数の関数の引数も合わせて渡す場合、「setTimeout("func(arg1,arg2)",msec)」ではなく、「setTimeout(func,msec,arg1,arg2)」と指定します。 この指定方法を誤ると、「useless setTimeout call (missing quotes around argument?)」や「〜 is not defined」

    javascriptのsetTimeout()で指定するfunctionへの引数とthis問題 - end0tknr's kipple - web写経開発
  • JavaScriptでループ毎に一定時間待つ方法  :  かばだんなさん かく語りぬ3

    ぐるぐるループしながら処理を行う際に、一定時間 間をおいてから次の処理をしたい場合は多々あります。 他の言語ですと sleep() や wait() を使えばいいのですが、残念JavaScript にはそのようなコマンドはありません。まぁJSの使われ所を考えると当然かもしれませんが。 もちろん JavaScript では実現できないって意味じゃありません。setTimeout() があります。でもちょっと実装方法が違うので、最初のうちは少しだけ悩んじゃうんですよね。 先日そういった処理を実装する方法を質問されて、ちょっと説明に苦心しました。忘れてますね~(苦笑。 ということで日は説明した時の備忘録。 まずそれぞれの「待つコマンド」の違いを見てみましょう。 他の言語の sleep() や wait() の役割 指定された時間(多くはミリ秒単位)待ってから次の行を実行する。 JavaScri

  • javascript で wait処理 - 新みのる日記

    Javascriptではwait処理はない。 でも、ある処理Aが完了した後に、処理Bをして欲しい場合が往々にしてある。 例えば、以下のような処理。 var a = func1(); func2(a); 通常の場合だと、この処理はfunc1 → func2と処理される。 だけどfunc1の中で、setTimeoutやsetIntervalが利用されてると、 うまくいかないケースがある。 例えば、以下のケースを実行すると var a = 0; function func1(){ if( a < 10){ a++; alert("hoge" + a); setTimeout("func1()", 500); } else{ alert("END"); return a } } function func2(val){ alert ("call func2: " + val); } var val

    javascript で wait処理 - 新みのる日記
  • setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵

    なかなかどうして、怠惰な若輩者につき不明な点が多々あるため先人の知恵をお借りしたく候。というわけでいろいろ知恵や知識などいただきます。・・・消化不良でしたorz setTimeoutの中の小難しいお話 自分だけじゃ到底調べられないし分かる術もない。Cなんて知るか。だのにこうしてなんとなくでも知ることができるのはありがたいことです。 http://labs.gmo.jp/blog/ku/2007/09/firefoxsettimeout.html Firefoxだけで少し古い記事だけど今でも同じようなものかな。他に私がわかるような資料もないのでこちらをベースに考えさせてもらいます。大きな変更はないだろうし。 タイマースレッド URL先読んだだけではイメージできなかった。整理のため箇条で要約。 Firefoxにはタイマー処理だけを管理している専用のスレッドがある(TimerThread) タイ

    setIntervalとsetTimeoutを調べた結果余分なことになった - 三等兵