LoginSignup
7
8

More than 5 years have passed since last update.

開眼!JavaScript要点メモ

Last updated at Posted at 2017-05-14

第一章 JavaScriptオブジェクト

オブジェクトとは、名前と値を持つプロパティを格納するコンテナにすぎない
jsのメソッドは、オブジェクト上で動作するよう意図した関数オブジェクトもったプロパティ

コンストラクタ関数、決められたオブジェクトを生成するテンプレート

1.10 プリミティブ値は、値そのものを比較

var price1 = 10
var price 3 = new Number('10')
console.log(price1 === price 3)

/*出力:false
price1はプリミティブ型数値であり、price3は数値オブジェクトであるため。

console.log(price1 == price 2)
/*出力:true
ただし、等値(==)とみなされる

1.16 typeof 演算子の戻り値

値の型を返す。

var primitiveNumber1 = 10
var primitiveNumber2 = Number('10')
console.log(typeof primitiveNumber1, typeof primitiveNumber2)
// 出力 number number

var myNumber = new Number(23)
console.log(typeof myNumber)
// 出力 object

1.18 全てのコンストラクタのインスタンスはコンストラクタ関数にポイントするconstructorプロパティをもつ

var foo = {}
console.log(foo.constructor) //Object()が出力

1.19 instanceof演算子でコンストラクタ関数を特定する

あるオブジェクトが特定のコンストラクタ関数のインスタンスかどうかを判定できる

console.log(new Array('foo')) instanceof Array
// 出力 true

1.20 インスタンスは自身のプロパティを持つことが出来る

var myArray = new Array()
myArray.prop = 'text' //インスタンスにプロパティを追加
console.log(myArray.prop)

第二章 オブジェクトとプロパティ

2.3 ドット記法とブラケット記法でプロパティにアクセス

var cody = new Object()
cody.living = true

cody['living'] = true

2.6 hasOwnProperty()

でプロパティがプロトタイプチェーン経由ではないことを確認

指定したプロパティがプロトタイプチェーン上で発見するものではなく、オブジェクトで保持しているものかどうか確認できる。

var myObject = {foo: 'value'}
console.log(myObject.hasOwnProperty('toString'))

2.7 in演算子

オブジェクトが指定された名前のプロパティを保持しているか確認する
console.log('foo' in myObject)

2.9 ホストオブジェクト

webブラウザなどのjavascript実行環境 ホストオブジェクト
windowオブジェクト

2.10 Underscore.js

オブジェクトを拡張させる

第三章 オブジェクト

3.5 Object()オブジェクトをオブジェクトリテラルで生成する

var cody{
  living: true,
  age: 33
}

第4章 Function() オブジェクト

4.4 Function()のインスタンスのプロパティとメソッド

インスタンスメソッド
apply(thisArg, argArray)
thisArgにthisの値を渡し、argArrayに渡された配列を引数リストとして関数を実行する

4.6 javascriptの関数は第一級関数

関数もオブジェクトであり値として格納することが出来る

var funcD = function(func){
  return func;
}

4.9 arguments.callee

実行中の関数を参照する

var foo = function foo(){
console.log(arguments.callee)
//foo()を再帰的に実行
}

4.10 関数インスタンスのlengthプロパティとarguments.length

実行時に関数に渡された引数の数を返す

var myFunction = function(z,s){
return myFunction.length;
}
console.log(myFunction()); //出力:2

4.14 関数の実行方法

  • 関数 var myFunction = function(){ return '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();//Codyコンストラクタを実行しインスタンスを生成
console.log(cody)//bodyオブジェクトとそのプロパティを出力
  • apply()とcall()
var greet = {
  runGreat: 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

4.16 関数を即時実行

()演算子を付与することでその場で実行できる
var sayWord = function(){console.log('word 2 uo mo')}();

4.18 関数は入れ子可能

var foo = function(){
  var bar = function(){
    console.log(this); //出力 Window(もしくはグローバルオブジェクト)
  }
}

4.21 関数は自身を呼び出せる(再帰)

var countDownFrom = function countDownFrom(num){
  console.log(num);
  num--;
  if (num < 0){return false;}
  countDownFrom(num);
}
coundDownFrom(5); //5,4,3,2,1,0

5. グローバルオブジェクト

5.1 グローバルオブジェクト

windowオブジェクトはグローバルオブジェクト

5.2 グローバル関数

  • decodeURI
    引数渡したurlエンコードされた文字列をデコードし文字列を返す

  • encodeURI
    文字列をURLエンコードする

  • eval()
    引数として渡した文字列をjsとして実行する

  • isFinite(number)
    数値が実数うかどうかを評価し、trueかfalseを返す

  • isNaN(number)
    NaNかどうか評価

  • parseInt(string, radix)
    strに渡した文字列を、radixに渡した底のあたいをもとに整数に変換する

5.3 グローバルプロパティ、グローバル変数

var a = 10; //グローバル変数, DontDelete属性を持ったプロパティを追加する
b = 100; //グローバルプロパティ

delete a; //aは削除されない
delete b; //bはここで削除される

5.4 グローバルオブジェクトにアクセスする

6. this

関数の中で使われるthisは、その関数が格納されているオブジェクトを参照する。

6.5 call()やapply()でthisの価をコントロールする

prototypeのわかりやすそうな説明
http://qiita.com/howdy39/items/35729490b024ca295d6c
http://maeharin.hatenablog.com/entry/20130215/javascript_prototype_chain

7 スコープとクロージャ

7.3 関数内で変数を定義する際は常にvarを使い、スコープの穴を避ける

varを伴わずに変数を定義する場合、関数の内部で定義されていてもローカルスコープではなくグローバルスコープのプロパティとして定義される。

var foo = function(){
  var boo = function(){
    bar = 2; //varが使われていないので、グローバルスコープに格納される
  }
}
console.log(bar); //出力:2

7.7

7.8

クロージャ
スコープチェーンに存在する変数への参照を保持している関数

8. prototypeプロパティ

8.1 プロトタイプチェーン

prototypeプロパティはfunction()のインスタンスを生成する際に自動的に付与されるオブジェクト。
prototypeプロパティはnew演算子を使って生成されたインスタンスオブジェクトからコンストラクタ関数を参照できるリンクを提供する。
コンストラクタ関数がコンストラクタを持っている場合には遡るリンクが発生し、object.prototypeまでさかのぼる。それがプロトタイプチェーン。
それによってメソッドやプロパティを共有、継承できるようになる。

8.1 prototypeチェーン

8.3 prototypeプロパティはすべてのfunctionインスタンスに自動的に付与される

prototypeプロパティはfunctionコンストラクタによって生成される

8.4

prototypeはFunction()コンストラクタが呼ばれる度にjsが生成するprototypeと呼ばれる空のオブジェクトに過ぎない

8.5

プロトタイプチェーンは全てのインスタンスをそのコンストラクタ関数のprototypeプロパティに自動的にリンクする

リンクはprotoプロパティとして存在する。
このプロパティを使ってインスタンスとコンストラクタ関数の間にリンクを作成し、これによりチェーンとなる。

Array.prototype.foo = 'foo'
var myArray = new Array()

console.log(myArray.__proto__.foo) //出力:foo
console.log(myArray.constructor.prototype.foo) //出力:'foo'
console.log(myArray.foo) //出力:'foo'

8.12 継承チェーンを生成する

Chef()インスタンスにおいてプロパティが見つからなかった場合、Person()オブジェクトに探しに行くようChef()オブジェクトにPerson()を強制的に継承させている。

var Person = function(){ this.bar = 'bar'}
Person.prototype.foo = 'foo'

var Chef = function(){ this.goo = 'goo'}
Chef.prototype = new Person()
var cody = new Chef()

console.log(cody.foo) //出力:'foo'
console.log(cody.bar) //出力:'bar'
console.log(cody.goo) //出力:'goo'
7
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
7
8