JavaScript問題集

JavaScript問題集

本日もこちらの問題やりました！
Q26-30 https://gist.github.com/kenmori/1961ce0140dc3307a0e641c8dde6701d

ファクトリ関数

ファクトリ関数とは・・一つのオブジェクトを返す関数のこと
オブジェクトプロパティを呼び出す場合、インスタンス生成をしないとプロパティ、メソッドを使用できませんが、ファクトリ関数の場合は関数から返却されたオブジェクトをこのように生成なしで使うことができます。

function juice(name, con) {
    return {
        name,
        con,
        concentration() {
          　console.log(con + name + 'juice');
        }
    }
}

var appleJuice = juice('apple', '100%');
appleJuice.concentration();

結果

100%applejuice

コンストラクト関数

コンストラクト関数とは・・オブジェクトを使うときにインスタンス生成する関数
下の例だとJuiceにプロパティを設定してからインスタンス生成しています。
その後、concentration関数を呼び出します。
こちらのほうがみなれてますが、どちらが良いのだろう。。。
newやthisが無い分シンプルに書けるファクトリ関数のほうが見やすくてよさそう。
モジュール単位で考えると一つのオブジェクトにまとめたいのでコンストラクト関数なのかなぁ?

function Juice(name, con) {
    this.name = name;
    this.con = con;
    this.concentration = function () {
        console.log(con + name + 'juice');
    }
}

var appleJuice = new Juice('apple', '100%');
appleJuice.concentration();

結果

100%applejuice

不変なオブジェクト

オブジェクトに値の設定、削除、追加できるかの設定をしたい場合に使います。
厳格モード状態の場合ですが、
オブジェクトを不変化した場合、不可能とされている動作、例えば設定できないのに設定しようとすると、エラーがでます。
封印されてることの確認ですね。

/// 厳格モード
'use strict'

freeze

不可：設定　削除　追加

var obj = {
    name: 'toku',
    age: 100
};

Object.freeze(obj);

obj.age = 1;
delete obj.name;
obj.luck = 33;

console.log(obj);

結果

{ name: 'toku' }

seal

不可：追加　削除

var obj = {
    name: 'toku',
    age: 100
};

Object.seal(obj);

obj.age = 1;
delete obj.name;
obj.luck = 33;

console.log(obj);

結果

{ name: 'toku', age: 1 }

preventExtensions

不可：追加

var obj = {
    name: 'toku',
    age: 100
};

Object.preventExtensions(obj);

obj.age = 1;
delete obj.name;
obj.luck = 33;

console.log(obj);

結果

{ age: 1 }

オブジェクトの生成

既存のオブジェクトを新しく生成する。
引数1に新しく生成するオブジェクトのタイプを指定。
引数2に新たにに生成するオブジェクトを指定。

Object.create(引数1,引数2)

生成時にですが、プロパティの属性を指定します。
全てのプロパティは属性を持っています。

プロパティの属性

configurable:true or false 削除の指定
enumerable:true or false列挙の指定
writable:true or false 書き込みの指定
value:値
developer.mozilla.org

var obj = {
    name: 'toku'
}

var newObj = Object.create({}, {
    name: { configurable: true, enumerable: true, writable: true, value: 'name' }
});

console.log(newObj);

結果

{ name: 'toku' }

周知事項

参加者からの要望ですが、

* 開催する時間帯をずらしてほしい
* レビューの機会を多めにとるようにしてほしい

とのことなのでタイムスケジュールを変更してみました。

6:00-7:00 自主勉強タイム
7:00-7:30 勉強会開始
7:30-8:00 レビュータイム
8:00-8:40 学習
8:40-9:00 レビュータイム

次回からお試しでこのタイムスケジュールで開催してみようと思います。

プログラミング学習用

アプリ開発サークル勉強会⑥ 開催日時 2021年2月5日(土) 7:00-9:00