LoginSignup
1

More than 3 years have passed since last update.

【JS】JSを根本から再復習、関数とかオブジェクトとか

Last updated at Posted at 2020-08-08

関数

JSの世界では、関数は実行可能なオブジェクトです。
具体的には、関数を引数として渡すことができたりします・。

コールバック関数

function hello() {
    console.log('hello');
}

// 引数のcallbackに hello が渡ってくる
// この引数のことを callback 関数と呼びます
function sample(callback) {
    callback("yo");
}

sample(hello);
// 無名関数だと下記のような書き方になる
sample(function(name) {
    console.log('hello ' + name);
});

this

実行コンテキストによって this の参照先は変わることになります。

呼び出し元の参照を保持し、
オブジェクト → 呼び出し元のオブジェクト
関数 → グローバルオブジェクトを指します。

callbackも関数に含まれます。

bind

this や引数の参照先を変更し、使用時点で実行しません。

束縛するとは?

thisを固定するで理解しています。
JavaScript の超便利なメソッド bind で this を制御する – Foreignkey, Inc.
関数バインディング

call, apply

thisや引数のの参照先を変更し、使用時点で実行します。

アロー関数

無名関数を記述しやすくしたもので、() => {};のように書くことができます。

無名関数とアロー関数の違い

アロー関数は、thisarguments の値を取りません。
ではどうやって this の値を取ってきてるかというと、外側の this を探しにいくことで値を取得することができるようになっています。
なので、アロー関数で定義した関数は bindを使って this を束縛することはできないことに注意します。

prototype

  • オブジェクトに存在する特別なプロパティ
  • prototypeの参照が、__proto__ に コピーされる
  • prototypeを使用する理由は、メモリの効率化
  • ES6になってからは、裏側でおごいているのがこいつになる

プロトタイプチェーン

プロトタイプの多重形成のことを指します。

下記のように __proto__が層上になっている状態をプロトタイプチェーンと言います、
image.png

優先順位

基本は階層が浅いものから呼び出されることになります。

  1. 自分自身のプロパティ
  2. コンストラクターが持っているメソッド
  3. 他にprototypeを持っているか確認していく
  4. Objectに格納されているプロパティ(ここにもなければ、undefined)

クラス

ES6からクラス表記でかけるようになっています。

class Person {
    // コンストラクタ
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    // Person.prototype.hello = function() { ... と同じことを表す
    hello() {
        console.log('hello ' + this.name);
    }
}

// インスタンス化
const bob = new Person('Bob', 23);
console.log(bob);

コンストラクタ

新しくオブジェクトを作成するための土台となるものを指します。

インスタンス化

newを使用し、コンストラクタ関数からオブジェクトを作成することを指します。

クラス継承と super

super - JavaScript | MDN

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    hello() {
        console.log('hello ' + this.name);
    }
}

// 継承には extends を使用します
class Japanese extends Person {
    constructor(name, age, gender) {
        // 継承元(Person)のコンストラクターを呼び出すことができる
        // コンストラクターを呼び出しているため、name, ageを引数として渡している
        super(name, age);
        this.gender = gender;
    }
    hello() {
        console.log('Konnichiwa ' + this.name);
    }
}

オブジェクトリテラル
{}を使った初期化のことを指します。

チェーンメソッド

言葉の通り、メソッドを繋いでいくことを指します。


class Calculator {
    constructor() {
        this.val = null;
        // アンダーバーはこのクラス内でしか使用しないという意味です。
        this._operator;
    }

    set(val) {
        if(this.val === null) {
            this.val = val;
        } else {
            this._operator(this.val, val);
        }
        // チェーンを実装するためには、Calculatorのオブジェクトを返す必要がある
        return this
    }
    plus() {
        this._operator = function(val1, val2) {
            const result = val1 + val2
            this._equal(result)
        }
        return this
    }
    minus() {
        this._operator = function(val1, val2) {
            const result = val1 - val2
            this._equal(result);
        }
        return this
    }
    _equal(result) {
        this.val = result
        console.log(result)
        return this
    }
}

// インスタンス化
const calc = new Calculator();

// チェーンメソッド
calc.set(10)
    .plus()
    .set(3)
    .minus()
    .set(4)

ビルトインオブジェクト

  • String, Date, Numberとか
  • Javascriptエンジンによって生成される
  • JSの場合は、 String()のように宣言するのではなく、 変数に string を入れてあげることで実行される

ラッパーオブジェクト

  • プリミティブ値を内包するオブジェクト
  • new しなくても暗黙的に

シンボル

プロパティの重複を避けるために必ず一意の値を返す関数のことを指します。

スプレッド演算子

ES6だと、可変長パラメータはスプレッド演算子で表現します。
...arryのような書き方
スプレッド構文 - JavaScript | MDN

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
1