JavaScriptミニマリスト入門(2)：オブジェクトと関数_JavaScriptスキル

この記事を読むには、他の言語でのプログラミング経験が必要です。

JavaScript の単純な型には次のものがあります:

1. 数字
2. 文字列
3.ブール値 (true および false)
4.ヌル
5.未定義

他のすべての型はオブジェクトです (typeof 演算子の戻り値に騙されないようにしましょう)。次に例を示します。

1.機能
2.配列
3. 正規表現
4. オブジェクト (オブジェクトは当然オブジェクトです)

オブジェクトの基本

JavaScript では、オブジェクトは属性のコレクションです (オブジェクトは連想配列です)。

1. 属性名は文字列である必要があります
2. 属性値。unknown

を除く任意の値を指定できます。

オブジェクト リテラルからオブジェクトを作成します:

コードをコピーします コードは次のとおりです:

// オブジェクト リテラルを使用して空のオブジェクトを作成します {}
var empty_object = {};

オブジェクトの属性名と属性値:

コードをコピーします コードは次のとおりです:

var stooge = {
// "first-name" は属性名、"Jerome" は属性値
"名": "ジェローム",
// "last-name" は属性名、"Howard" は属性値
"姓": "ハワード"
};

属性名が有効な識別子の場合は、引用符を省略できます:

コードをコピーします コードは次のとおりです:

var フライト = {
航空会社: 「オセアニック」、
番号: 815、
出発: {
IATA: "SYD"、
時刻: "2004-09-22 14:55"、
都市: 「シドニー」
}、
到着: {
IATA: 「LAX」、
時刻: "2004-09-23 10:42"、
都市: 「ロサンゼルス」
}
};

プロパティへのアクセスの例を見てみましょう:

コードをコピーします コードは次のとおりです:

var owner = { name: "Name5566" };

owner.name; // "名前5566"
owner["name"] // "Name5566"

owner.job; // 未定義
owner.job = "コーダー" // または owner["job"] = "コーダー";

属性名が正当な識別子ではない場合は、引用符で囲む必要があります。存在しないプロパティの値は未定義です。オブジェクトは値ではなく参照によって渡されます:

コードをコピーします コードは次のとおりです:

var x = {};
var owner = x;
owner.name = "Name5566";
x.name; // x.name === "名前5566"

ここで、x と owner は同じオブジェクトを指します。

オブジェクトのプロパティは、delete 演算子を使用して削除できます。

コードをコピーします コードは次のとおりです:

delete obj.x; // オブジェクト obj
の x 属性を削除します。

オブジェクトのプロトタイプ

各オブジェクトはプロトタイプ オブジェクトにリンクされており、オブジェクトはプロトタイプ オブジェクトからプロパティを継承できます。オブジェクトリテラルによってオブジェクトを作成し、そのプロトタイプオブジェクトは Object.prototype オブジェクトです (Object.prototype オブジェクト自体にはプロトタイプオブジェクトはありません)。オブジェクトを作成する際に、そのオブジェクトのプロトタイプオブジェクトを設定することができます（具体的な設定方法については後述します）。オブジェクトのプロパティを (変更するのではなく) 取得しようとするとき、そのプロパティがオブジェクトに存在しない場合、JavaScript はそのオブジェクトのプロトタイプ オブジェクトからプロパティを取得しようとします。 、プロトタイプ オブジェクトからプロトタイプ オブジェクトが検索され、Object.prototype プロトタイプ オブジェクトまで検索されます。属性を取得する場合と比較して、オブジェクトの特定の属性を変更しても、プロトタイプ オブジェクトには影響しません。

関数の基本

JavaScript では、関数もオブジェクトであり、Function.prototype プロトタイプ オブジェクトにリンクされます (Function.prototype は Object.prototype にリンクされます)。関数にはプロトタイプという名前のプロパティがあり、その値の型はオブジェクトです。このオブジェクトにはプロパティ コンストラクターがあり、コンストラクターの値は次の関数です。

コードをコピー コードは次のとおりです:

var f = function() {}

typeof f.prototype; // 'オブジェクト'
typeof f.prototype.constructor // '関数'

f === f.prototype.constructor // true

関数はオブジェクトです。関数はオブジェクトと同じように使用できます。つまり、関数を変数または配列に保存したり、パラメーターとして関数に渡したり、関数内で定義したりできます。余談ですが、関数には 2 つの隠しプロパティがあります:

1. 関数コンテキスト

2. 機能コード

関数は次のように作成されます:

コードをコピーします コードは次のとおりです:

var f = function add(a, b) {
b を返します;
}

console.log(f); // 出力 [関数: add]

キーワード function の後の関数名はオプションです。主にいくつかの目的のために関数名を作成します。

1. 再帰呼び出しの場合

2. デバッガー、開発ツールなどによって関数を識別するために使用されます

多くの場合、関数名は必要ありません。関数名のない関数は匿名関数と呼ばれます。パラメータのリストは括弧で囲まれています。 JavaScript では、実際のパラメータと仮パラメータが一致する必要はありません。例:

コードをコピーします コードは次のとおりです:

var add = function(a, b) {
b を返します;
}

add(1, 2, 3); // 実パラメータと仮パラメータが一致しません

実パラメータが多すぎる場合、追加の実パラメータは無視されます。実パラメータが少なすぎる場合、割り当てられていない仮パラメータの値は未定義になります。関数には戻り値が必要です。return ステートメントで戻り値が指定されていない場合、関数の戻り値は未定義になります。

関数と関数がアクセスする外部変数はクロージャを形成します。これが JavaScript の重要な利点です。

関数呼び出し

各関数が呼び出されるとき、次の 2 つの追加パラメータを受け取ります:

1.これ

2.引数

この値は、特定の呼び出しモードに関連しています。JavaScript には 4 つの呼び出しモードがあります。

1. メソッド呼び出しモード。オブジェクトのプロパティが関数である場合、それはメソッドと呼ばれます。メソッドが o.m(args) 経由で呼び出される場合、これはオブジェクト o です (this と o は呼び出しが行われたときにのみバインドされることがわかります)。例:

コードをコピー コードは次のとおりです:

var obj = {
値: 0、
インクリメント: function(v) {
This.value = (typeof v === 'number' ? v : 1);
}
};
obj.increment(); // これ === obj

2. 関数呼び出しモード。関数がオブジェクトのプロパティではない場合、関数として呼び出され、グローバル オブジェクトにバインドされます。例:

コードをコピーします コードは次のとおりです:

メッセージ = 'Hello World';
var p = function() {
console.log(this.message);
}

p(); // 'Hello World' を出力します

この動作は混乱を招く場合があります。例を見てみましょう。

コードをコピーします コードは次のとおりです:

obj = {
値: 0、
インクリメント: function() {
var helper = function() {
//グローバルオブジェクトの値に1を加算します
This.value = 1;
}

// ヘルパーは関数として呼び出されます
// したがって、これはグローバル オブジェクトです
helper();
}
};

obj.increment(); // obj.value === 0

望ましい結果は次のようになります:

コードをコピーします コードは次のとおりです:

obj = {
値: 0、
インクリメント: function() {
var that = this;
var helper = function() {
That.value = 1;
}

helper();
}
};

obj.increment(); // obj.value === 1

3. コンストラクター呼び出しモード。 new というプレフィックスを付けることを意図した関数は、コンストラクターと呼ばれます。例:

コードをコピーします コードは次のとおりです:

// テストはコンストラクターと呼ばれます
var Test = function(string) {
This.message = string;
}

var myTest = new Test("Hello World");

関数は、その前に new を追加することで呼び出すことができます (このような関数は通常、大文字で始まります) new を追加した後、この関数のプロトタイプ プロパティにリンクされたオブジェクトが作成され、コンストラクター内でこれが作成されます。このオブジェクト。

4.通話モードを適用します。関数の apply メソッドを使用して関数を呼び出します。この関数には 2 つのパラメーターがあり、1 つ目は this で、2 つ目はパラメーター配列です。例:

コードをコピーします コードは次のとおりです:

var add = function(a, b) {
b を返します;
}

var ret = add.apply(null, [3, 4]) // ret === 7
;

関数が呼び出されると、実際のパラメータがすべて含まれる argument という名前のクラス配列 (実際の JavaScript 配列ではありません) にアクセスできるため、可変長パラメータを実装できます。

コードをコピーします コードは次のとおりです:

var add = function() {
var sum = 0;
for (var i=0; i sum = 引数[i];
}
合計を返します;
}

add(1, 2, 3, 4);

例外

次に、JavaScript の例外処理メカニズムについて説明します。 throw ステートメントを使用して例外をスローし、try-cache ステートメントを使用して例外をキャッチして処理します。

コードをコピー コードは次のとおりです:

var add = function (a, b) {
If (typeof a !== 'number' || typeof b !== 'number') {
// 例外をスローします
スロー {
名前: 'TypeError',
メッセージ: 「ニーズ番号を追加」
};
}
b を返します;
}

//例外をキャッチして処理します
{
を試してください Add("7");
// e はスローされた例外オブジェクトです
} キャッチ (e) {
console.log(e.name ': ' e.message);
}

JavaScript タイプにプロパティを追加する

JavaScript のほとんどの型にはコンストラクターが存在します:

1. オブジェクトのコンストラクターは Object
です。 2. 配列のコンストラクターは Array
です 3. 関数のコンストラクターは Function
です。 4. 文字列のコンストラクターは String
です 5. 数値のコンストラクターは Number
です 6. Boolean のコンストラクターは Boolean
です 7. 正規表現のコンストラクタは RegExp

です

コンストラクターのプロトタイプにプロパティ (多くの場合メソッド) を追加して、このプロパティを関連変数で使用できるようにします。

コードをコピーします コードは次のとおりです:

Number.prototype.integer = function() {
数学を返します[this }

(1.1).integer() // 1

範囲

JavaScript ではスコープを構築する関数が必要です:

コードをコピー コードは次のとおりです:

function() {
// ...
}();

ここで匿名関数が作成され、実行されます。スコープを通じて公開したくない変数を非表示にすることができます:

コードをコピーします コードは次のとおりです:

var obj = function() {
//値を非表示にし、外部からアクセスできないようにします
var 値 = 0;

戻り値 {
// このメソッドのみが値を変更できます
インクリメント: function() {
値 = 1;
}、
// このメソッドのみが値を読み取ることができます
getValue: function() {
戻り値;
}
};
}();

obj.increment();
obj.getValue() === 1;

継承

JavaScript で継承を実装する方法はたくさんあります。
オブジェクトを作成するときに、そのオブジェクトに関連付けられたプロトタイプ オブジェクトを設定できます。

コードをコピー コードは次のとおりです:

//プロトタイプ オブジェクトが {x:1, y:2}
であるオブジェクトを作成します var o = Object.create({x:1, y:2});

Object.create メソッドは ECMAScript 5 で定義されています。ECMAScript 3 を使用する場合は、create メソッドを自分で実装できます。

コードをコピー コードは次のとおりです:

// Object.create メソッドが定義されていない場合
if (typeof Object.create !== 'function') {
// Object.create メソッドを作成します
Object.create = function (o) {
var F = function () {};
F.prototype = o;
// 新しいオブジェクトを作成します。このオブジェクトのプロトタイプ オブジェクトは o
です。 return new F();
};
}

Object.create メソッドを通じて、プロトタイプベースの継承を実行します。新しいオブジェクトは古いオブジェクトのプロパティを直接継承します (クラスベースの継承と比較して、クラスの存在は必要なく、オブジェクトはオブジェクトを直接継承します)。例:

コードをコピーします コードは次のとおりです:

var myMammal = {
名前: '哺乳類のハーブ'、
Get_name: function() {
return this.name;
}、
言う: function() {
これを返します。「;
」 }
};

// myMammal を継承
var myCat = Object.create(myMammal);
myCat.name = 'ヘンリエッタ';
myCat.saying = 'ニャー';
myCat.purr = function(n) {
var i, s = '';
for (i = 0; i if (s) {
s = '-';
}
s = 'r';
}
s;
を返します };
myCat.get_name = function() {
this.says() ' ' this.name ' ' this.says();
を返します };

上記のコードは非常に単純ですが、プライベート メンバーを保護することはできません。モジュールパターンを使用できます。モジュール パターンでは、特定の種類のオブジェクトが関数によって生成され、関数スコープはプライベート メンバーを外部アクセスから保護するために使用されます:

コードをコピーします コードは次のとおりです:

// 哺乳類オブジェクトの構築に使用される哺乳類関数
var mammal = 関数(仕様) {
// それは構築されたオブジェクトです
var that = {};

// パブリック メソッド get_name は外部からアクセス可能
That.get_name = function() {
// spec.name には
の外部から直接アクセスできません return spec.name;
};

// パブリック メソッドは外部からアクセスできることを示します
That.says = function() {
// spec.saying は外部から直接アクセスできません
スペックを返す || '';
};

それを返してください;
};

//哺乳類オブジェクトを作成します
var myMammal = 哺乳類({名前: 'ハーブ'});

//cat オブジェクトを構築するために使用される cat 関数
var cat = 関数(仕様) {
spec.saying = spec.saying || 'ニャー';

// 猫は哺乳類から継承しているため、哺乳類オブジェクトが最初に構築されます
var that = 哺乳類(仕様);

// パブリックメソッド purr
を追加します That.purr = function(n) {
var i, s = '';
for (i = 0; i if (s) {
s = '-';
}
s = 'r';
}
return s;
};

// パブリックメソッド get_name
を変更します That.get_name = function() {
return that.says() ' ' spec.name
' ' that.says();
それを返します;
};
};

//猫オブジェクトを作成
var myCat = cat({name: 'ヘンリエッタ'});

モジュール パターンでは、コンストラクターを呼び出すことによって継承が実現されます。さらに、サブクラス内の親クラスのメソッドにアクセスすることもできます:

コードをコピー コードは次のとおりです:

Object.prototype.superior = 関数(名前) {
    var that = this、method = that[name];
    return function() {
        return method.apply(that, argument);
    };
};
 
var Coolcat = 関数 (仕様) {
    // 获取子类の get_name メソッド
    var that = cat(spec), super_get_name = that.superior('get_name');
    that.get_name = function(n) {
        return 'like ' super_get_name() ' baby';
    };
    それを返してください;
};