これらの6つの知識により、JavaScriptオブジェクトの理解が深まりました

著者：Valentino Gagliardi
翻訳者：フロントアッシュ
出典：valentinog

WeChat検索[Daqian World]は、同じようにもう一度見てみると、大きな工場にバックグラウンドはないが、上向きに前向きな姿勢を持つこの人物に焦点を当てています。この記事はGitHub https://github.com/qq449245884/xiaozhiに含まれており、記事は分類されており、多くのドキュメントとチュートリアル資料が整理されています。

1.オブジェクトメソッド＆this

このメソッドは、関数値のプロパティを保存するだけです。

単純なオブジェクトメソッド

let rabbit = {};
rabbit.speak = function(line) {
    console.log("小兔子说： "+ line );
};
rabbit.speak("我还活着。")

出力：

T小兔子说： 我还活着。

オブジェクトメソッド＆これ

関数がメソッドとして呼び出されると、オブジェクトは関数を属性として使用し、すぐにそれを呼び出します。これは、と同様にobject.method()、本体の特殊変数がthis呼び出されたオブジェクトを指します。


function speak(line) {
  console.log(this.type + "小兔子说：" + line)
};
let whiteRabbit = {type: "白色", speak: speak}

whiteRabbit.speak("噢，我真可爱！")

出力：

白色小兔子说：噢，我真可爱！

申し込み＆電話

applyそしてcall使用することができますobject.method()
applyとcallメソッドの両方に、メソッド呼び出しのシミュレーションに使用できる最初のパラメーターがあります
実際、最初のパラメーターは、 this


function speak(line) {
  console.log(`${this.type}的小兔子说：${line}` );
};
let whiteRabbit = {type: "白色", speak: speak};

speak.apply(whiteRabbit, ["你这个小坏蛋!"]);
speak.call({type: "黑色"}, "嘿嘿，我不坏，你不爱!");

白色的小兔子说：你这个小坏蛋!
黑色的小兔子说：嘿嘿，我不坏，你不爱!

2.プロトタイプ（プロトタイプ）

ほとんどすべてのオブジェクトにはprototype
prototype属性の代替ソースとして使用される別のオブジェクトです
オブジェクトは、自分の財産にはアクセスしない場合、それはそのからなりprototype、プロパティの検索、もしそれが継続的にそれを見つけられないようになるまで検索をし、これまでのところ。prototypeprototypenull

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

プロトタイプチェーンの最後のポイントはObject prototypeであり、Object内のオブジェクト__proto__はnull

let empty = {};
console.log(empty.toString);
console.log(empty.toString());

出力：

[Function: toString]
[object Object]

他のオブジェクト（配列、関数など）のデフォルトプロパティ

多くのオブジェクトはObject.prototype独自のプロトタイプとして直接使用されていませんが、独自のデフォルトプロパティがあります
Function.prototype派生機能及び从Array.prototype派生配列

console.log(Object.getPrototypeOf(isNaN) ==
            Function.prototype);
console.log(Object.getPrototypeOf([]) ==
Array.prototype);

出力：

true
true

Object.createは、特定のプロトタイプでオブジェクトを作成します

protoRabbitすべてのウサギが共有する属性のコンテナとして機能します
単一のバニーオブジェクト（キラーバニーなど）には、それ自体にのみ適用されるプロパティ（この場合はtype）が含まれ、プロトタイプから共有プロパティを派生させます



let protoRabbit = {
  speak: function (line) {
    console.log(`${this.type}兔子说：${line}` );
  }
}

let killerRabbit = Object.create(protoRabbit)
killerRabbit.type = '杀手'
killerRabbit.speak('准备受死吧！')

出力：

杀手兔子说：准备受死吧！

3.コンストラクタ

—コンストラクタプロトタイプ

共有プロトタイプから派生したオブジェクトを作成するより便利な方法は、コンストラクターを使用することです
JavaScriptでは、newキーワードを前に付けて関数を呼び出すと、コンストラクタとして扱われます
コンストラクターthisは、その変数を新しいオブジェクトにバインドします。明示的に別のオブジェクト値を返さない限り、この新しいオブジェクトは呼び出しから返されます
でnew作成されたオブジェクトインスタンスは、そのコンストラクタと言われています
他の関数と区別するために、コンストラクターの名前を大文字にすることが合意されています


function Rabbit(type) {
    this.type = type;
}

let killerRabbit = new Rabbit("killer");
let blackRabbit = new Rabbit("black");
console.log(blackRabbit.type);

出力：

black

—デフォルトでは、コンストラクタにはObject.prototypeがあります。

コンストラクタ（実際にはすべての機能が）自動的に取得するprototypeプロパティの名前デフォルトでは、プロパティが含まれているObject.prototype派生通常の空のオブジェクトからの
このコンストラクタを使用して作成されたすべてのインスタンスは、プロトタイプとしてこのオブジェクトを持っています


function Rabbit(type) {
  this.type = type;
}

let blackRabbit = new Rabbit("黑色");
Rabbit.prototype.speak = function(line) {
  console.log(`${this.type}的兔子说：${line}` );
};
blackRabbit.speak("Boom...一波王炸！");

出力：

黑色的兔子说：Boom...一波王炸！

4.派生プロパティを上書きする

—同じプロトタイプ名

プロトタイプに同じ名前のプロパティがある場合、このプロパティは変更されません
属性はオブジェクト自体に追加されます


function Rabbit(type) {
    this.type = type;
}
let blackRabbit = new Rabbit("black");
let killerRabbit = new Rabbit("killer");

Rabbit.prototype.teeth = "small";
console.log(killerRabbit.teeth);
// small
killerRabbit.teeth = "long, sharp, and bloody";
console.log(killerRabbit.teeth);
// long, sharp, and bloody
console.log(blackRabbit.teeth);
// small
console.log(Rabbit.prototype.teeth);
// small

次のconsole.log(blackRabbit.teeth)結果はsmall、blackRabbitオブジェクトにはteethプロパティがないため、オブジェクトRabbit自体のteethプロパティvalue から継承したということですsmall。

5.プロトタイプ干渉

-列挙可能および列挙不可能

let map = {}

function storePhi(event, phi) {
  map[event] = phi
}

storePhi('pizza', 0.069)
storePhi('touched tree', -0.081)

Object.prototype.nonsense = 'hi'

for(let name in map) {
  console.log(name)
}

console.log('nonsense' in map)
console.log('toString' in map)

出力結果：

pizza
touched tree
nonsense
true
true

toStringJSは列挙可能なプロパティと列挙不可能なプロパティを区別するため、for/inループには表示されませんがin、演算子で返されます。true

単純な割り当てによって作成するすべてのプロパティは列挙可能でObject.prototypeあり、の標準プロパティは不変for/inです。そのため、このようなループには表示されません。


let map = {};
function storePhi(event, phi) {
    map[event] = phi;
}

storePhi("pizza", 0.069);
storePhi("touched tree", -0.081);

Object.defineProperty(Object.prototype, "hiddenNonsense",
                {enumerable: false, value: "hi"})

for (var name in map) {
    console.log(name)
}

console.log(map.hiddenNonsense)

出力：

pizza
touched tree
hi

Object.defineproperty関数を使用して独自の列挙型属性を定義できないことにより、この関数では、この例hiddenNonsenseではマップに作成するがfor...in表示しないプロパティのタイプを制御できます。

-HasOwnPropertyと演算子

const map = {}
console.log("toString" in map)
console.log(map.hasOwnProperty("toString"))

出力：

true
false

hasOwnPropertyこのメソッドは、プロトタイプを見ずにオブジェクト自体にプロパティがあるかどうかを通知します。これは通常in、オペレーターから提供された情報よりも有用な情報です。

したがって、基本オブジェクトのプロトタイプについて混乱している場合は、次のようなfor/inループを作成することをお勧めします。

for (var name in map) {
    if (map.hasOwnProperty(name)) {
        // ... this is an own property
    }
}

6.プロトタイプオブジェクトなし

Object.create関数を使用すると、特定のプロトタイプでオブジェクトを作成できます。またnull、プロトタイプとして渡して、プロトタイプなしで新しいオブジェクトを作成することもできます。

したがって、hasOwnPropertyオブジェクトのすべてのプロパティは独自のプロパティであるため、もう必要ありません。これで、人々がObject.prototype何を正しく行っても、for/inループを安全に使用できます


var map = Object.create(null);
map["pizza"] = 0.069;
console.log("toString" in map);
// false
console.log("pizza" in map);
// true

才能の[三連]はXiaozhiが共有し続ける最大の動機です。このブログにエラーや提案がある場合は、才能がメッセージを残すことを歓迎します。最後に、視聴していただきありがとうございます。

コードの展開後に発生する可能性のあるバグをリアルタイムで知ることはできません。これらのバグを後で解決するために、ログのデバッグに多くの時間を費やしました。ところで、便利なBUG監視ツールFundebugをお勧めします。

オリジナル：https://medium.com/javascript-in-plain-english/six-things-you-should-know-about-objects-in-javascript-ccd11a9e1998

記事は毎週継続的に更新され、WeChatで検索できます** [Daqian World] 初めて読む、返信 [福祉] **多くのフロントエンドビデオがあなたを待っています。この記事GitHub https://github.com/qq449245884/xiaozhiが持っています含まれて、スターへようこそ。