- PDF Free Download

ios 4% Android 10% Python 1% Design 15% Web(PHP/JS) 10% Windows(C#) 20% 40%

最近のボクお嫁 Web/WordPress Windows Android Design Python Python Android 1% 5% Design Windows 5% 15% お嫁 50% Web/WordPress 25% 2013年6月1日株式会社フォーエンキー調べ愛恐

Simple and Powerfull

var obj = {}

var obj = { } key: value

var f = function() {...}

var obj = { } key: function() {...}

( _ )

クラス Class (型) new new new クラスという型を元にしてオブジェクトを生成するイメージクラスから生成されたオブジェクトはクラスの特性属性や機能を受け継ぐ Object 実体 Object 実体 Object 実体

Object (実体) prototype dele gate dele gate dele gate プロトタイプオブジェクトは自分自身が備えていない特性機能や属性を別のオブジェクトにお願い委譲するイメージこの時お願いする先をプロトタイプと言ったりします Object 実体 Object 実体 Object 実体

var obja = { name : 'Yome', say : function () { alert('i Love ' + this.name); } }; var objb = { name : 'Nikole' }; objb. proto = obja; var objc = { }; objc. proto = objb; objc.say(); I Love Nicole

var obja = { name : 'Yome', say : function () { alert('i Love ' + this.name); } }; var objb = { name : 'Nikole' }; objb. proto = obja; var objc = { }; objc. proto = objb; objc.say();

objc.say objc. proto.say (objb) objc. proto. proto.say (objb) (obja)

objc.name objc. proto.name (objb) objc. proto. proto.say (objb) (obja)

obj. proto. proto.property このように自分に無い機能や属性を proto に入っている別のオブジェクトから連鎖的に検索して探す仕組みが

obj. proto. proto.property

class A extends class B extends class C new obj A of B obj A (delegete) obj B (delegete) obj C (delegete) obj D new new obj B of C obj C of C (delegete) obj F (delegete) obj E

あまり見たコトない obj. proto = otherobj 実は proto は標準仕様ではありませんつまり proto が利用できない環境もありだから通常このようなことはしませんここまではプロトタイプチェインの概念を分かり易くするために proto を使って説明していましたがそういうことなので実際のプログラミングではこんなことしないでくださいねー ( )/ では逆に良く見かけるのは

こっちのがよく見る感じ var o = new Person('Nicole') これは new 演算子とコンストラクタ関数によるオブジェクトの生成です JavaScript におけるオブジェクトの生成でよく見られるコードですこのあたりの記法がクラスベースの言語を学んだ方を惑わしますね

var Person = function (name) { this.name = name; } Person.prototype.sayHello = function() { alert('hello ' + this.name); } var person = new Person('Nicole');

var Person = function (name) { } this.name = name; Person.prototype.sayHello = function() { } alert('hello ' + this.name); var person = new Person('Nicole');

var o = new Person('Nicole')

var newobj = {}; newobj. proto = Person.prototype; Person.apply(newObj, arguments); return newobj;

だいたいこんな意味 var newobj = {}; newobj. proto = Person.prototype; ①新しい Object が生成される Person.apply(newObj, arguments); return newobj; new する度に新しい個別のオブジェクトが生成されます

だいたいこんな意味 var newobj = {}; newobj. proto = Person.prototype; Person.apply(newObj, arguments); return newobj; ②プロトタイプのオブジェクトの参照を代入コンストラクタ関数の Person.prototype を新しいオブジェクトの proto に参照を代入しプロトタイプチェインの仕組みでその特性を継承します

だいたいこんな意味 var newobj = {}; ③ newobj を this にコンストラクタ関数を実行 newobj. proto = Person.prototype; Person.apply(newObj, arguments); return newobj; これによってコンストラクタ関数の中で生成される新しいオブジェクトを this として参照しその属性をセットしたりできるようになります

だいたいこんな意味 var newobj = {}; newobj. proto = Person.prototype; ④完成したオブジェクトを返す Person.apply(newObj, arguments); return newobj; Person.prototype の特性を継承しコンストラクタ関数によって初期化済みの新しいオブジェクトが返されプログラムで利用できるようになります

newobj. proto = Person.prototype;

整理すると proto プロトタイプチェインで検索されるプロトタイプオブジェクトが入ってるプロトタイプチェインで使われるもの prototype プロトタイプオブジェクトの控え室 new とコンストラクタ関数でオブジェクトを生成する時に proto に代入されるオブジェクト生成で使われるもの

function myfunc() { } var name = 'Gyu-Ri'; myfunc(); alert(name); //ReferenceError

var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); //738 } } func2(); func1();

var name = 'Nicole'; function myfunc() { var name = 'Gyu-Ri'; } myfunc(); alert(name); //Nicole

var name = 'Nicole'; function myfunc() { name = 'Gyu-Ri'; } myfunc(); alert(name); //???

var name = 'Nicole'; function myfunc() { } name = 'Gyu-Ri'; myfunc(); alert(name); //Gyu-Ri

var name = 'Nicole'; function myfunc() { Before var name = 'Gyu-Ri'; }

var name = 'Nicole'; function myfunc() { After name = 'Gyu-Ri'; }

var name = 'Nicole'; function myfunc() { var name = 'Gyu-Ri'; var }

var a = 123

var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } } func2(); func1(); //738

scope.a (func2) scope. scope.a (func2) (func1) scope. scope. scope.a (func2) (func1) (global)

scope. scope. scope.identifier このように今のスコープに無い識別子をより外側のスコープから連鎖的に検索して探す仕組みが

scope. scope. scope.identifier

余談ですが実はJavaScriptでは変数のスコープでさえも内部的にはオブジェクトで構成されています変数オブジェクトつまりつまるところスコープチェインもプロトタイプチェインもオブジェクトの特殊なプロパティによる連結リストによるデータ構造とそれを終端に向かって連鎖的に検索するというよく似たシンプルな仕組みに過ぎませんまたこれは JavaScriptにおけるスコープの実体がグローバルスコープグローバル変数オブジェクトをrootとする変数オブジェクトが連なった巨大なオブジェクトのツリー構造だということでもあります興味深いですね残念ながらそれらのスコープを構成するオブジェクトのツリーをプログラマが直接参照することは出来ませんしかしプロトタイプチェインを構成する proto 属性については ECMA Script標準では無いものの幾つかのブラウザ実装では実際に目にしてその仕組みを確認することが出来ますこれを良く観察することでスコープチェインとプロトタイプチェイン両方の理解を深めることが出来るはずです

var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } ( ) } func2(); func1(); //738

var a = 123; function func1() { var b = 3; function func2() { var c = 2; alert(a * b * c); } } func2(); func1(); //738

var Person = (function($) { var privatevalue = 'Hogeta'; function Person(name) {... } Person.prototype.xxxx =... return Person; })(jquery);

function newcounter() { } var i = 0; return function() { } i = i + 1; return i; var c1 = newcounter(); alert(c1()); // 1 alert(c1()); // 2 alert(c1()); // 3

var obj = { } key: function() {...}

person sayhello btn.on('click', person.sayhello);

sayhello btn.on('click', person.sayhello);

person.sayhello();

...nothing... sayhello();

function sayhello() { alert('hello ' + this.name); } sayhello(); global object = window 関数のコール時にレシーバーが無い時 this はグローバルオブジェクトになりますブラウザ実装の場合これは通常 window オブジェクトです

call apply bind

call(object, arg1, arg2,...) apply(object, Array) bind(object, arg1, arg2,...)

call apply

call の例 function say(arg1, arg2) { alert(arg1 + this.name + arg2); } var person = new Person('Nicole'); say.call(person, 'Hello ', ' chan'); person を this として実行 call の第１引数が this に第２引数以降の引数が say関数の引数に

apply の例 function say(arg1, arg2) { alert(arg1 + this.name + arg2); } var person = new Person('Nicole'); say.apply(person, ['Hello ', ' chan']); person を this として実行 call の第１引数が this に第２引数の配列の内容が say関数の引数になる引数の渡し方以外は call と同じ

var p1 = { name: 'Gyu-Ri', say: function (arg1, arg2) { alert(arg1 + this.name + arg2); } }; var person = new Person('Nicole'); p1.say.call(person, 'Hello ', ' chan');

bind

function say(arg1, arg2) { alert(arg1 + this.name + arg2); } var person = new Person('Nicole'); var say2 = say.bind(person); say2('hello ', ' chan');

bind

apply

// this function bind (self, func) { return function () { return func.apply(self, arguments); }; } // function Person (name) { this.name = name; this.say = bind(this, this.say); } Person.prototype.say = function (prefix) { alert(prefix + this.name); } // var person = new Person('Nicole'); // nicole.say('i Love '); // I Love Nicole // OK settimeout(person.say.bind(null, 'I Just Realy Love to '), 2000);

var obj = {}

@yuka2py http://www.amazon.co.jp/dp/4798129682