読者です 読者をやめる 読者になる 読者になる

frontendmemo

このサイトは、「html、css、js、ツールなどについて、自分が覚えたこと、またはいつも忘れて調べることを書き溜め、それが結果といて勉強したての初心者の方や自分と同じような技術レベルの人の助けになることを目的とするWebログ」、略してブログです。挨拶→http://frontendmemo.hatenablog.com/entry/2016/06/25/115845

オブジェクト指向 JavaScriptの原則 プリミティブ型と参照型、関数、コンストラクタ、プロトタイプ

スポンサードリンク

オブジェクト指向 JavaScriptの原則を読んで学んだことを書きます。
全てを網羅してないことと本書と例文に多少違いがありますことご了承ください。

オブジェクト指向JavaScriptの原則

オブジェクト指向JavaScriptの原則

プリミティブ型とは

trueや25のように、そのままの形で格納される単純なデータ型です。

  • 真偽値 true false
  • 数値 整数または浮動小数点型の数値
  • 文字列 
  • null
  • undefined 初期化されていない変数に割り当てられる値

プリミティブ型のメソッド

  • .toLowerCase();
  • .chartAt();
  • .substring();
  • .toFixed();
  • .toString();

参照型とは

オブジェクトを表します。
オブジェクトは下記のように複数参照できる

var object1 = new Object();
var object2 = object1;
console.log(typeof object2); // object
object2 = null;
console.log(typeof object2); // object

大規模アプリケーションではnullを割り当て参照を解除します。
ところがjavascriptのバグで型はobjectとして吐き出されます。

プロパティの追加

var object1 = new Object();
var object2 = object1;
object2.property = 'プロパティを追加';
console.log(object2.property); // プロパティを追加

関数

関数宣言

関数宣言は宣言より前に実行できる巻き上げが可能

var result = add(5, 5);
console.log(result); // 10
function add(num1, num2){
  return num1 + num2;
}

関数式

巻き上げは巻き上げ不可

var result = add(5, 5);
console.log(result); // undefined
var add = function(num1, num2){
  return num1 + num2;
};

第1級関数とは

オブジェクトのように変数を割り当てること、オブジェクトのプロパティとして追加すること、関数の戻り値として関数を返すこともできます。

function sayHi(){
  console.log('Hi');
}
sayHi(); // Hi
var sayHi2 = sayHi;
sayHi2(); // Hi

引数(パラメータ)

function sum(){
  var i = 0;
  var len = arguments.length;
  var result = 0;
  for(i;i<len;i++){
    result += arguments[i];
  }
  return result;
}
console.log(sum(1,2)); // 3
console.log(sum(1,2,3,4)); // 10

オーバーロード

一つの関数が複数のパラメータの型、組み合わせを持つことが可能です。

function sayMessage(message){
  if(arguments.length === 0){
    message = 'メッセージ';
  }
  console.log(message);
}
sayMessage('hello'); // hello
sayMessage(); // メッセージ

callメソッド

thisの値を変更します。

function sayNameForAll(label){
  console.log(label + ':' + this.name);
}

var person1 = {
  name : 'Nicholas'
};

var person2 = {
  name : 'greg'
};

var name = 'Michael';

sayNameForAll(this); // [object Window]:Michael
sayNameForAll.call(this); // undefined:Michael
sayNameForAll.call(this, 'global'); // global:Michael
sayNameForAll.call(person1, 'person1'); // person1:Nicholas person1がthis 'person1'が第一引数になる 
sayNameForAll.call(person2, 'person2'); // person2:greg person2がthis 'person1'が第一引数になる 

applyメソッド

すでにデータが配列に格納されてる場合はapply()を使用します。

function sayNameForAll(label){
  console.log(label + ':' + this.name);
}

var person1 = {
  name : 'Nicholas'
};

var person2 = {
  name : 'greg'
};

var name = 'Michael';

sayNameForAll(this); // [object Window]:Michael
sayNameForAll.apply(this); // undefined:Michael
sayNameForAll.apply(this, ['global']); // global:Michael
sayNameForAll.apply(person1, ['person1']); // person1:Nicholas person1がthis 'person1'が第一引数になる 
sayNameForAll.apply(person2, ['person2']); // person2:greg person2がthis 'person1'が第一引数になる 

bindメソッド

thisの値を固定した新しい関数を生成します。

function sayNameForAll(label){
  console.log(label + ':' + this.name);
}

var person1 = {
  name : 'Nicholas'
};

var person2 = {
  name : 'greg'
};

// person1オブジェクト専用の関数を生成
var sayNameForPerson1 = sayNameForAll.bind(person1); // thisがperson1
sayNameForPerson1('person1'); // person1:Nicholas 'person1'は引数

// person2オブジェクト専用の関数を生成
var sayNameForPerson2 = sayNameForAll.bind(person2); // thisがperson2
sayNameForPerson2('person2'); // person2:greg 'person2'は引数

// bind()で生成された関数をオブジェクトにメソッドとして与えてもthisの値は変わらない
person2.sayName = sayNameForPerson1;
person2.sayName('person2'); // person2:Nicholas

コンストラクタ

new演算子を伴って使用されることでオブジェクトを生成する関数である。
コンストラクタの長所は、コンストラクタによって生成されたオブジェクトは全て同じプロパティやメソッドを持ってるということ
コンストラクタ通常の関数と区別するため先頭の文字は大文字にする

// コンストラクタを生成

function Person(){
  console.log(1);
}
// インスタンスを生成
var person1 = new Person();
// 以下のように型を判定できる
console.log(person1.constructor === Person) // Person1のコンストラクタはPersonである
console.log(person1 instanceof Person) // Personのインスタンスはperson1である

コンストラクタの存在意義は同じプロパティやメソッドを持ったオブジェクトを簡単に生成できるということ

function Person(name){
  this.name = name;
  this.say = function(){
    return console.log(this.name);
  };
}
var person1 = new Person('abc');
var person2 = new Person('cde');
console.log(person1.name); // abc
console.log(person2.name); // cde
person1.say(); // abc
person2.say(); // cde

プロトタイプ

function Person(name){
  this.name = name;
}
Person.prototype = {
  sayName: function(){
    console.log(this.name);
  },
  toStoring: function(){
    return '[Person' + this.name + ']';
  }
};

オブジェクト指向JavaScriptの原則

オブジェクト指向JavaScriptの原則