JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう
JavaScriptにもクラスがやってきた！JavaScriptの新しいclass構文をマスターしよう 高津戸壮（株式会社ピクセルグリッド） ECMAScript 2015（ECMAScript 6）で新たに追加された待望のclass構文について、その概要をサンプルコードを交えて紹介します。 これまでのJavaScriptにおけるクラス 多くのプログラミング言語はクラスを作れる機能を持っていますが、JavaScriptにその機能は用意されていませんでした。しかし、JavaScriptにはprototypeという柔軟な仕組みが存在しており、このprototypeを利用することで、他の言語で表現されている「クラス」と似たような振る舞いを再現することが可能でした。 それは例えば、こんなふうにです。 /* Cat雛形の作成 */ function Cat(name) { this.setName(
CoffeeScript入門 - プログラムdeタマゴ
この記事が対応するCoffeeScriptのバージョンは1.7です。 基本的には本家サイトCoffeeScriptの内容と同じです。わかりやすいように色々と私が勝手に再構築、追加してはありますが。（日本語訳と紹介されるとちょっと心外ですな(´Д⊂ヽ ） なお、JavaScriptの基礎知識を前提とし、JavaScriptから引き継ぎ重複する内容は解説されません。 あ。後、この記事の文章、CoffeeScriptコード、JavaScriptコードに関する著作権は放棄しています。パブリックドメインと言うそうです。文章、コード自由に引用改変公開しても問題ありません。 最終更新日：2014/1/29 追加: 文字列 演算子など はじめに：CoffeeScriptのメリットとデメリット 一般に言われているCoffeeScriptを使うメリットデメリットを載せておきます。 ま、こんな論争気にせず、使っ
John Resig - Simple JavaScript Inheritance
I’ve been doing a lot of work, lately, with JavaScript inheritance – namely for my work-in-progress JavaScript book – and in doing so have examined a number of different JavaScript classical-inheritance-simulating techniques. Out of all the ones that I’ve looked at I think my favorites were the implementations employed by base2 and Prototype. I wanted to go about extracting the soul of these techn
オブジェクトのデフォルト値(valueOfとtoStringの関係)について - プログラミングを勉強するブログ
この記事の内容はすべてECMAScript5に基づいているのでIE8などでは違う結果になります 以前書いた記事で{toString : valueOf}という記述の意味について考えたのですが、コメントで間違いを指摘して頂いたので改めて書きたいと思います。 今回は簡単のために以下のコードで見ていきます。 var a = { valueOf:function(){ return false; }, toString:valueOf }; document.write(Number(a)); document.write("<br>"); document.write(String(a)); aという変数にvalueOfとtoStringの２つのメソッドを持つオブジェクトをリテラルで設定し、そのaをそれぞれ文字列、数値として評価した場合に表示される内容を確認するコードです。 これを実行すると 0
プロトタイプ汚染とループ - latest log
脳内棚卸 Prototype.js と プロトタイプ汚染(昔話) jQuery が登場する以前、Prototype.js という JavaScript ライブラリがありました。 Prototype.js は、JavaScript OOP の普及期(2005～2007年頃)に多くのサイトで活用されました。 Prototype.js は Object.prototype や Array.prototype 以下に、Ruby 由来のメソッドを拡張することで、 JavaScript に Ruby 感をもたらし、ブームを起こしました。 当時の JavaScript(ES3: ECMAScript262-3rd) には、 言語仕様として Object.prototype を安全に拡張する方法が存在せず、 Prototype.js はしばらく後に 汚染(pollution) と呼ばれる問題を起こしてしま
JavaScriptでのbuilt-in/DOM objectのprototype拡張 - monjudoh’s diary
@rosylillyが気にしていた のでまとめた。 built-in/DOM objectのprototype拡張による弊害 追加したプロパティ/メソッドがfor inで列挙される var obj = {a:1}; for (var i in obj) { console.log(i); } こうするとaだけ出るはずが、 Object.prototype.b=function(){}; こうした後だとa,bが出てしまうって奴ですね。 そのまま代入しないでObject.defineProperty/definePropertiesでenumerable:falseのプロパティとして定義すれば列挙されなくなるので特に問題ありません。 今回挙げるprototype拡張の弊害の内唯一これだけはECMAScript5時代になって解消されました。唯一これだけは。 built-in/DOM object
How CoffeScript classes work - Islands in the byte stream (legacy)
CoffeeScriptのクラス機構はどんなものか調べた記録。コード量は少ないが洗練されており効率も良いようだ。 http://coffeescript.org/#classes さて、元のcoffeeスクリプトは単にクラスとサブクラスの定義をするだけのもの。 #!/usr/bin/env coffee class Animal constructor: (@name) -> console.log "constructor of Animal" move: (meters) -> console.log "Animal#move" class Snake extends Animal constructor: (@name) -> super @name console.log "constructor of Snake" move: -> console.log "Snake#move
prototype と __proto__ - フリーフォーム フリークアウト
移転しました http://please-sleep.cou929.nu/20100929.html
JavaScriptにRuby風のnewメソッドを加える
JavaScriptのオブジェクト指向はクラスベースの皮をかぶったプロトタイプベースです。機能的には十分なのですが、すっきり書く方法が公式に用意されていないので苦労します。一年前に、newを封印してJavaScriptでオブジェクト指向するなんて記事を書いたこともありました。 Rubyではnewは演算子でなくメソッドです。これをインスパイヤしてJavaScriptもnewメソッドを加えてみると、プロトタイプ的継承もすっきり書けるのではないかと思い、試してみました。ECMAScript 5の機能を使っています。当然IE6なんかでは動かないです。 newメソッドその他の定義 Object.defineProperties(Object.prototype, { new: {value: function(){ var self = Object.create(this); self.initi
constructorとprototype.constructorがわからなくなった - 宇宙野武士は元気にしているか
constructor（プロパティ）とprototype.constructor（プロパティ）は 別物だと思っていたけど、やっぱり同じ物だとおもいつつもやっぱり違うのか？と よくわからなくなってきた。（特に継承とかしようとした場合に） ので少し調べてみた。 （ちなみにSpiderMonkeyをつかって試している） constructorプロパティとは サイ本によると、 オブジェクトの初期化で使用されたコンストラクタ関数を参照する。 とある。 var a = new Array(); a.constructor == Array;//>trueになる 確かに、Arrayオブジェクトでnewした変数aのconstructorプロパティは Arrayになっているようだ。 じゃあ、Arrayのconstructorプロパティってなんだろ？ これで気になったのは、newしてないArrayオブジェクト
javascript - ECMAScript 5 で Object.clone を実装してみた : 404 Blog Not Found
2011年12月24日10:00 カテゴリ javascript - ECMAScript 5 で Object.clone を実装してみた JavaScript: The Definitive Guide (6th Ed.) David Flanagan 具体的に実装してみたかったのが、これ。 404 Blog Not Found:javascript - そろそろECMAScript 5を使いたい少なくとも3つの理由 ES5以降は、以下のようにすればbuilt-inのように enumerable でないプロパティを定義できるようになります。 deep copy もできる Object.clone 。 Underscore.jsの _.clone() も、mofmof.js の Object.copy() も deep copy の機能を欠いています。ES5の機能抜きにObject.pr
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot
Daftar Serta Masuk Saat ini Di Situs Slots Online Terpilih Ojekslot Seperti yang kita pahami waktu ini ada sangat banyak permainan slot online paling sederhana yang dapat dimainkan dalam sekejap hanya cukup masuk di sana saja ojekslot terunggul. Di sini dapat ada sangat banyak bermacam permainan luar biasa yang pastinya dapat anda temukan dengan ringan. Beraneka permainan terbaik di sini dapat and
CSS3 regions: Rich page layout with HTML and CSS3 | Adobe Developer Connection
Note: The proposed syntax for CSS Regions and CSS Exclusions has changed since this article was written, though the concepts remain the same. Please check the CSS Regions W3C Working Draft and the CSS Exclusions and Shapes W3C Working Draft for up-to-date details. The web has become a rich repository of content for reference and educational materials, news, articles, and interactive apps. However,
実行間隔を調整する - はてなダイアリー - 無料で簡単。広告のないシンプルなブログをはじめよう！
JavaScriptDebouncing Javascript Methods | Unscriptable.com 密に処理が実行されてしまうのを避けるため、二つのかたちがあるとのこと。下のデモ。throttleは、0.5秒ごとに点の位置が変わる。debounceは、0.5秒いると赤くなる。 デモ throttleひとつ目は一定間隔以内の呼び出しは間引いて無視する方法。イベントの発生頻度が多く、処理が重い場合に使う。 Function.prototype.throttle = function(threshold, alt){ threshold = threshold || 100; var me = this; var last = Date.now(); return function(){ var now = Date.now(); if(now - last debounceも
JavaScriptで，クラスを継承する方法 （複数のサブクラスから共通クラスのプロトタイプを参照する） - 主に言語とシステム開発に関して
JavaScriptプログラミングのTOPへ JavaScriptのコーディングでオブジェクトを扱う際， 「インスタンスがちょっとずつ異なっている」という場合は，その自由度に見合ったクラス（＝プロトタイプ）を１つだけ定義してやれば事足りる。 しかし，それに加えて「クラスも複数あって，ちょっとずつ異なっている」という場合， 複数のクラスの共通部分を親クラスに定義し，子クラスで継承する，という手続きが必要になる。 親クラス，子クラス，インスタンス，という順に定義を実装すると，コードの流れは下記のようになる。 (1)共通定義 ①クラス間で共通のデータを定義する。 (2)個別定義（クラス生成コード） ①クラス間で異なるデータを定義する。 ②同一クラス内のインスタンス間で共通のデータを定義する。 (3)メイン処理（インスタンス生成コード） ①各クラスを利用する。同一クラス内のインスタンス間で異なるデ
＊「ふっかつのじゅもんがちがいます。」 - もっとエレガントにsetTimeoutをメソッド化する方法
※追記：あまりにも記事タイトルが適当すぎて我ながら日本語でおｋと思ったのでタイトルを変えました。 http://labs.cybozu.co.jp/blog/kazuho/archives/2006/12/oo-settimeout.php http://blog.livedoor.jp/dankogai/archives/50714622.html このネタはmalaさんが1年半前に通過した地点なのである程度常識の部類かと思ってました。 でもdankogaiがわざわざやるってことは知らない人も多そうだし、malaさんが同じネタをまたやるようにも思えないので、ついでにLDRに現在使われてるFunction.prototype.laterとかを紹介してみる。 Function.prototype.later = function(ms){ var self = this; return fu
Function.prototype.bindは何がいいのか - 枕を欹てて聴く
ES5からFunction.prototype.bindが入りました. これに準ずるものは数々のFrameworkで提供され続けてきたので, あまり馴染みの無さはないのではないでしょうか. このFunction.ptototype.bindは実はとても面白いので. 結論から言えば, Function.prototype.bindはtarget functionのConstructに完全に移譲するのでConstructorの引数束縛が行えます. またConstructor callに対して配列を渡すapply形式のものといったapplyConstructorやcallConstructorをbindを使って実装することができます. 基本 Function.prototype.bindは基本的にはthisとargumentsに特定の値を束縛する関数です. bindは第一引数にthis, 次から
JavaScriptのnewって本当にいらない子？ - あと味
先日、「JavaScriptのオブジェクトについて考察してみた - あと味」を書いてから、chikuraさんからコメントいただいたり、id:dankogaiさんから「404 Blog Not Found:javascript - にはクラスはない」という記事で言及いただいたり、JavaScript: The Good Partsを読み返したりした結果、newについて調べたいという衝動にかられましたので、その調べた結果を書いてみたいと思います。 newを調べようと思ったキッカケを整理 まずは、そのキッカケから整理します。 chikuraさんのコメントより 押さえるべきポイントは、new演算子の際に何が行われるか？だと思うので、こちらのページもぜひ読んでみてください。 JavaScript の new 演算子の意味: Days on the Moon http://nanto.asablo.j
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TechCrunch | Startup and Technology News
Ionic: Enterprise App Platform
