JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://getfirebug.com/firebug-lite-debug.js"></script>
<!-- この枠内は無視してください -->




































































<h4><strong><a href="http://www.oreilly.co.jp/books/9784873116211" target="_blank">開眼！JavaScript</a> サンプルコード</strong></h4>

<p>スクリプトはページロード時に実行されます。</p><p>再度実行する場合や「JavaScript」ボックス内のスクリプトを修正して実行する場合は上部のナビゲーションバーにある「Run」をクリックしてください。</p><p>アウトプットはページ右下のFirebug Liteコンソールに出力されます。</p>

<a href="http://shop.oreilly.com/product/0636920027713.do" target="_blank">原著：JavaScript Enlightenment</a>

JavaScript

// 関数
var myFunction = function() {
	return 'foo'
};
console.log( myFunction() ); // 出力：'foo'

// メソッド
var myObject = {
	myFunction: function() {
		return 'bar';
	}
}
console.log( myObject.myFunction() ); // 出力：'bar'

// コンストラクタ
var Cody = function(){
    this.living = true;
    this.age = 33;
    this.gender = 'male';
    this.getGender = function() {
			return this.gender;
		};
}
var cody = new Cody(); // newとともにCodyコンストラクタを実行することによりインスタンスが生成される
console.log( cody ); // codyオブジェクトとそのプロパティを出力



// apply()とcall()
var greet = {
    runGreet: function(){
        console.log( this.name, arguments[0], arguments[1] );
    }
}

var cody = {
	name: 'cody'
};
var lisa = {
	name: 'lisa'
};

// greetオブジェクトのrunGreetメソッドをcodyオブジェクトから呼び出しているように実行
greet.runGreet.call( cody,'foo','bar' ); // 出力：cody foo bar

// lisaオブジェクトの中から呼び出しているように実行
greet.runGreet.apply(lisa, ['foo','bar']); // 出力：lisa foo bar

/* call()とapply()実行時のパラメータの渡し方の違いに注目 */

var greet = {
	runGreet: function(){
		console.log( this.name, arguments[0], arguments[1] );
	}
}
var todo = {
	name: 'Rocky'
};
var kume = {
	name: 'Mayu'
}
greet.runGreet.call(todo, 'goo', 'hoo');
greet.runGreet.apply(kume,['voo', 'boo']);