2006-03-27

ecmascript の Array で each するときの制限?ではありません

※ 詳しくは後半の追記を読んでください。

すでに最速の人のページをはじめあちこちで普通に紹介されているのですが、

Array.prototype.each = function( callback ) {
  var len = this.length;
  for ( var i = 0; i < len; i++ ) {
    callback( this[i] );
  }
}

で Array に Ruby の each みたいなメソッドを足すことができます。しかしこれ、自分で定義しているオブジェクトの中で利用してプロパティを参照しようとしてもできません。するとエラーで止まります。具体的には

MyObj.prototype = {
  prop: 'hoge',
  method: function() {
    var arr = [ 9, 8, 7, 6 ];
    var str;
    arr.each( function( num ) {
      str += this.prop + "\t" + num + "\n";
    });
  }
}

みたいなことができません。これはあれですか、each の中で this を解釈したときに MyObj にならずに Array になっちゃうからでしょうか。MyObj.prop を参照するつもりなのに本当は Array.prop を見に行っちゃってるのかなと思うんですが。違うかな。あと、回避策はないのでしょうか。

いやまぁ、手元では Array#first(), Array#next(), Array#item(), Array#at_end() なんつーのを用意して for で回す方法で回避できてるんですけどね。なんか面白くないなぁ、と。

すでに Array を拡張しちゃうのは確定なので素直に for ( i in array ) で回せば?っつーのはナシの方向で。

※ このネタ、カテゴリ何にしてようかなぁ…。JavaScript にしちゃうと他の ecma 系のものが該当しないし、Ecma262 か? スクリプト言語の名前に見えないなぁ。あ、ここに挙げたコードは動かしてみてません。


[2006-10-28 追記]

上を書いたときには根本的に分かっていなかったのだが、一応残しておいてとりあえず正解のコードを追記しておく。オブジェクトをまたいで使える Array#each は以下のようになる。

/**
 * Array の要素一つずつに function を適用する
 *
 * @param function callback
 * @param Object obj(あってもなくてもよい)
 */
Array.prototype.each = function( callback, obj ) {
  var len = this.length;
  for ( var i = 0; i < len; i++ ) {
    callback.call( obj, this[i] );
  }
}

これを利用する場合、上のようにあるオブジェクトから利用したいという際は

arr.each( function( e ) {
  ..
}, this );

と第2引数にオブジェクトを投げてやる。特別オブジェクトなど作成していない場合はそのまま

arr.each( function( e ) {
  ..
} );

でよい。このコードを理解する際に必要な知識は

  1. JavaScript の変数スコープ
  2. function の引数は多すぎても足りなくてもエラーは起きないこと
  3. Function#call の第1引数が null か undefined になった場合は Global オブジェクトになること

の3つである。下の2つは

Under Translation of ECMA-262 3rd Edition の

15.3 Function オブジェクトの call メソッド を、

最初のスコープの話は

Hawk's W3 Laboratory : JavaScript Notes : JavaScript 深層 : スコープチェーンと変数のスコープ(2)

をよく読むと分かるはず。

ま、分からなくても使うだけなら使えるけど。

About

例によって個人のなんちゃらです

Recent Posts

Categories

Tool 日々 Web Biz Net Apple MS ことば News Unix howto Food PHP Movie Edu Community Book Security Text TV Perl Ruby Music Pdoc 生き方 RDoc ViewCVS CVS Rsync Disk Mail FreeBSD Cygwin PDF Photo Zebedee Debian OSX Comic Cron Sysadmin Font Analog iCal Sunbird DNS Linux Wiki Emacs Thunderbird Sitecopy Terminal Drawing tDiary AppleScript Life Money Omni PukiWiki Xen XREA Zsh Screen CASL Firefox Fink zsh haXe Ecmascript PATH_INFO SQLite PEAR Lighttpd FastCGI Subversion au prototype.js jsUnit Apache Trac Template Java Rhino Mochikit Feed Bloglines CSS del.icio.us SBS qwikWeb gettext Ajax JSDoc Rails HTML CHM EPWING NDTP EB IE CLI ck ThinkPad Toy WSH RFC readline rlwrap ImageMagick epeg Frenzy sysprep Ubuntu MeCab DTP ERD DBMS eclipse Eclipse Awk RD Diigo XAMPP RubyGems PHPDoc iCab DOM YAML Camino Geekmonkey w3m Scheme Gauche Lisp JSAN Google VMware DSL SLAX Safari Markdown Textile IRC Jabber Fastladder MacPorts LLSpirit CPAN Mozilla Twitter OpenFL Rswatch ITS NTP GUI Pragger Yapra XML Mobile Git Study JSON VirtualBox Samba Pear Growl Mercurial Rack Capistrano Rake Win RSS Mechanize Sitemaps Android JavaScript Python RTM OOo iPod Yahoo Unicode Github iTunes God SBM friendfeed Friendfeed HokuUn Sinatra TDD Test Project Evernote iPad Geohash Location Map Search Simplenote Image WebKit RSpec Phone CSV WiMAX USB Chrome RubyKaigi RubyKaigi2011 Space CoffeeScript Nokogiri Hpricot Rubygems jQuery Node GTD CI UX Design VCS Kanazawa.rb Kindle Amazon Agile Vagrant Chef Windows Composer Dotenv PaaS Itamae SaaS Docker Swagger Grape WebAPI Microservices OmniAuth HTTP 分析基盤 CDN Terraform IaaS HCL Webpack Vue.js BigQuery Middleman CMS AWS PNG Laravel Selenium OAuth OpenAPI GitHub UML GCP TypeScript SQL Hanami Document SVG AsciiDoc Pandoc DocBook Develop Jekyll macOS Node.js Vite Heroku Transformer AI Data Cloud Wasm