Profile
- 太田 昌吾
- os0x(blog, Twitter)
- Chrome ExtensionsのAPI Expert
- Chromium-Extensions-Japanの管理人
- 活動とか
os0x(Shogo Ohta), 2010-11-15
JavaScript
if(true) {
function someFunc(){
return 1;
};
} else {
function someFunc(){
return 2;
};
}
var notSomeFunc = function someFunc(){
return 3;
};
alert(someFunc());// 1 or 2 or 3 ?
Firefoxは1、Opera・Safari・Chromeは2、IE6-8は3になる
function F,F.prototype.f(n){
return n;
}
alert(new F().f('hoge'));
Enhanced Scripting in IE9: ECMAScript 5 Support and More - IEBlog - Site Home - MSDN Blogs
var a = #1={a:#1#};
alert(a.a.a.a.a.a.a.a.a.a.a.a);
???㡼???ѿ?(sharp variables)
循環参照を表現できるFirefoxの独自拡張。JSONでは表現できないデータを表現できて便利。
標準さんはどこにいったの＞＜！？
Object. create defineProperties defineProperty freeze getOwnPropertyDescriptor getOwnPropertyNames getPrototypeOf isExtensible isFrozen isSealed keys preventExtensions seal
あれ、JavaScriptはprototypeによるオブジェクト指向言語でしたよね？
prototypeはどこに行った？
var hash = {};
var some_strings = document.body.textContent.split(/\W/);
some_strings.forEach(function(str){
if(hash[str]) {
hash[str]++;
} else {
hash[str] = 1;
}
});
console.log(hash);
一見問題なさそうなコードだが、 toString や valueOf などのプロパティが壊れてしまう
最速インターフェース研究会 :: JavaScriptで出現回数のカウントをする際のコードやJavaScript:The Good Partsで触れられている
__proto__ __defineGetter__ __defineSetter__ __lookupGetter__ __lookupSetter__ __noSuchMethod__
今までは __ を接頭辞、接尾辞にすることで衝突を避けてきた…
当然これらは標準ではない(IE9はこれらを実装しなかった)
それ故のObjectにメソッド追加…
var hash = Object.create(null);
// __proto__を持たない、つまり
// toStringも valueOfも持たないオブジェクトを作る
var some_strings = document.body.textContent.split(/\W/);
some_strings.forEach(function(str){
if(hash[str]) {
hash[str]++;
} else {
hash[str] = 1;
}
});
console.log(Object.keys(hash));
私たちはより良い改善を望んでいる…
そう、ECMAScript6に！
ECMAScript6候補(既にFirefox4で実装されている)
var p = Proxy.create({
get: function(proxy, name) {
return 'Hello, '+ name;
}
});
console.log(p.World); // 'Hello, World'
var obj = {};
var prox1 = (function(obj){
return Proxy.create({
get:function(receiver, k){
return obj[k];
},
set:function(receiver, k, v){
obj[k] = v;
}
});
})(obj);
prox1.hoge = 1;
console.log(obj.hoge);
function noSuchMethod(proto, noSuchMethod) {
var handler = {
get:function(rcvr, p) {
return proto.hasOwnProperty(p) ? proto[p] : function() {
var args = [].slice.call(arguments, 0);
return noSuchMethod.call(this, p, args);
};
}
};
return Proxy.create(handler, proto);
}
var Parent = {
hoge:function(){
return "i'm hoge";
}
};
var prox = noSuchMethod(Parent, function(id, args){
return '// noSuchMethod! ' + id + ':'+ args;
});
console.log(prox.hoge());
console.log(prox.fuga());
ほかにもES5の範囲ではStrict ModeやObject.freezeなど、
ES6候補ではさらに色々な案が出ていて、
JavaScriptで大規模開発がやり易いように進化している！
いやいや、最近のJavaScriptエンジンは速いですよ！しかも
WebGL由来で
がChrome devやFirefox4.0 betaに実装されている
Chrome 9.0.576.0において、単純なforループが10倍高速になる
bench(new Array(1000000));
if(this.Uint8Array)
bench(new Uint8Array(1000000));
function bench(r){
var s = Date.now();
for(var i = 0, l = r.length;i < l; i++){
r[i]=i%256;
}
document.write(Date.now()-s + '<br>');
}
FileAPIは3種類ある
最近ChromeでDirectories and Systemが(ほぼ)実装された。
ブラウザ内に仮想的なファイルシステムを作り、ディレクトリを切ってファイルを保存できるAPI
画像、音声、動画をウェブアプリから手軽に扱えるようになる
つまり、ウェブアプリが本当にデスクトップアプリを超える
Chromeではデベロッパーツールという名前
いわゆるFirebug
RequireJS と Envjs に期待