Js の継承とプロトタイプチェーンを理解するのに役立つ記事

関数fn() {
  1 を返します。
  2 を 0 にします。
}

定数o = 新しいfn();

fn.prototype.b = 3;
プロトタイプは 4 です。
コンソールにログ出力します。
コンソールにログ出力します。
コンソールにログ出力します。
コンソールにログ出力します。
// 1
// 2
// 4
// 未定義

{
    1: 1
    2 倍
    __proto__:
        3 です
        4 文字
        コンストラクタ: ƒ fn()
        __proto__:
            コンストラクタ: ƒ Object()
            hasOwnProperty: ƒ hasOwnProperty()
            isPrototypeOf: ƒ isPrototypeOf()
            propertyIsEnumerable: ƒ propertyIsEnumerable()
            toLocaleString: ƒ toLocaleString()
            toString: ƒtoString()
            値: ƒ valueOf()
            __defineGetter__: ƒ __defineGetter__()
            __defineSetter__: ƒ __defineSetter__()
            __lookupGetter__: ƒ __lookupGetter__()
            __lookupSetter__: ƒ __lookupSetter__()
            __proto__ を取得する: ƒ __proto__()
            __proto__ を設定する: ƒ __proto__()
}

var o = {
  a: 2、
  m: 関数 () {
    this.a + 1 を返します。
  },
};

コンソール.log(om()); // 3
// om を呼び出す場合、'this' は o を参照します。

var p = Object.create(o);
// p は o から継承したオブジェクトです pa = 4; // p 独自の属性 'a' を作成します
コンソールログ(pm()); // 5
// pmを呼び出すとき、'this'はpを指します
// そして、p は o の m 関数を継承しているので、 // したがって、「this.a」、つまり pa は p 自身の属性「a」です

関数doSomething() {}
コンソールにログ出力します。
// 関数の宣言方法とは関係ありません。
// JavaScript の関数には常にデフォルトのプロトタイプ プロパティがあります。
var doSomething = function() {};
コンソールにログ出力します。

{
    コンストラクタ: ƒ doSomething(),
    __proto__: {
        コンストラクタ: ƒ Object(),
        hasOwnProperty: ƒ hasOwnProperty(),
        isPrototypeOf: ƒ isPrototypeOf(),
        propertyIsEnumerable: ƒ propertyIsEnumerable(),
        toLocaleString: ƒ toLocaleString(),
        toString: ƒ toString(),
        値: ƒ valueOf()
    }
}

関数doSomething() {}
doSomething.prototype.foo = "bar";
コンソールにログ出力します。

{
    foo: "バー",
    コンストラクタ: ƒ doSomething(),
    __proto__: {
        コンストラクタ: ƒ Object(),
        hasOwnProperty: ƒ hasOwnProperty(),
        isPrototypeOf: ƒ isPrototypeOf(),
        propertyIsEnumerable: ƒ propertyIsEnumerable(),
        toLocaleString: ƒ toLocaleString(),
        toString: ƒ toString(),
        値: ƒ valueOf()
    }
}

関数doSomething() {}
doSomething.prototype.foo = "bar"; // プロトタイプにプロパティを追加する
var doSomeInstancing = new doSomething();
doSomeInstancing.prop = "some value"; // オブジェクトにプロパティを追加します
console.log(インスタンス化を実行します);

{
    プロパティ: "何らかの値"、
    __proto__: {
        foo: "バー",
        コンストラクタ: ƒ doSomething(),
        __proto__: {
            コンストラクタ: ƒ Object(),
            hasOwnProperty: ƒ hasOwnProperty(),
            isPrototypeOf: ƒ isPrototypeOf(),
            propertyIsEnumerable: ƒ propertyIsEnumerable(),
            toLocaleString: ƒ toLocaleString(),
            toString: ƒ toString(),
            値: ƒ valueOf()
        }
    }
}

console.log("doSomeInstancing.prop: " + doSomeInstancing.prop);
console.log("doSomeInstancing.foo: " + doSomeInstancing.foo);
console.log("doSomething.prop: " + doSomething.prop);
console.log("doSomething.foo: " + doSomething.foo);
console.log("doSomething.prototype.prop: " + doSomething.prototype.prop);
console.log("doSomething.prototype.foo: " + doSomething.prototype.foo);

// doSomeInstancing の独自のプロパティ、値を直接返す doSomeInstancing.prop: some value
// これは doSomeInstancing 自体のプロパティではありません。プロトタイプ オブジェクトを確認し、値 doSomeInstancing.foo を直接返すこのプロパティがあることを確認します: bar
// これは関数自体のプロパティでも、プロトタイプオブジェクトのプロパティでもありません。レイヤーごとに検索して最終的にプロトタイプが null であることがわかった場合、そのようなプロパティは存在しないため、undefined を返します。
doSomething.prop: 未定義
doSomething.foo: 未定義
doSomething.prototype.prop: 未定義
// doSomething のプロトタイプ オブジェクトを見つけ、foo プロパティを持っているので、値 doSomething.prototype.foo: bar を直接返します。

console.log(doSomeInstancing.hasOwnProperty("prop"));
// 真実

console.log(doSomeInstancing.hasOwnProperty("bar"));
// 間違い

console.log(doSomeInstancing.hasOwnProperty("foo"));
// 間違い

console.log(doSomeInstancing.__proto__.hasOwnProperty("foo"));
// 真実