JSのプロトタイプオブジェクトとプロトタイプチェーンとは何ですか

JavaScriptでは全てがオブジェクトですが、オブジェクトにも種類があり、共通オブジェクトオブジェクトと関数オブジェクトの2つに大別されます。

一般的に言えば、 new Function によって生成されたオブジェクトは関数オブジェクトであり、その他のオブジェクトは通常のオブジェクトです。

例:

関数 f1(){ function f1(){
    //todo
}
var f2 = function(){
    //todo
};
var f3 = new Function('x','console.log(x)');

var o1 = {};
var o2 = new Object();
var o3 = new f1();

console.log(
    typeof f1,//function
    typeof f2,//function
    typeof f3,//function
    typeof o1,//object
    typeof o2,//object
    typeof o3 //object
);
>> function function function object object object

f1属于函数的声明，最常见的函数定义方式，f2实际上是一个匿名函数，把这个匿名函数赋值给了f2,属于函数表达式，f3不常见，但也是一种函数对象。

Function是JS自带的对象，f1,f2在创建的时候，JS会自动通过new Function()的方式来构建这些对象，因此，这三个对象都是通过new Function()创建的。

在Javascript中创建对象有两种方式：对象字面量和使用new表达式，o1和o2的创建恰好对应了这两种方式，重点讲一下o3, 如果用Java和C#的思路来理解的话，o3是f1的实例对象，o3和f1是同一类型，至少我以前这么认为，其实不然...

那么怎么理解呢? 很简单，看o3是不是通过new Function产生的, 显然不是，既然不是函数对象，那就是普通对象 。

通过对函数对象和普通对象的简单理解之后，我们再来了解一下Javascript中的原型和原型链：

在JS中，每当创建一个函数对象f1 时，该对象中都会内置一些属性，其中包括prototype和__proto__,  prototype即原型对象，它记录着f1的一些属性和方法。

需要注意的是，prototype 对f1是不可见的，也就是说，f1不会查找prototype中的属性和方法。 

function f(){}
f.prototype.foo = "abc";
console.log(f.foo); //undefined

那么，prototype有什么用呢？ 其实prototype的主要作用就是继承。 通俗一点讲，prototype中定义的属性和方法都是留给自己的“后代”用的，因此，子类完全可以访问prototype中的属性和方法。

想要知道f1是如何把prototype留给“后代”，我们需要了解一下JS中的原型链，此时，JS中的 __proto__ 入场了，这哥们长的很奇特，隐藏的也很深，以致于你经常见不到它，但它在普通对象和函数对象中都存在， 它的作用就是保存父类的prototype对象，JS在通过new 表达式创建一个对象的时候，通常会把父类的prototype赋值给新对象的__proto__属性，这样，就形成了一代代传承...

function f(){}
f.prototype.foo = "abc";
var obj = new f();
console.log(obj.foo); //abc

これで、obj の __proto__ が f のプロトタイプを保存することがわかりました。では、f のプロトタイプの __proto__ には何が保存されるのでしょうか。下の図を見てください:

図に示すように、f の __proto__ .prototype には Object.prototype が格納されており、Object.prototype オブジェクトにも __proto__ が含まれています。出力結果から、Object.prototype.__proto__ は null であり、obj オブジェクト プロトタイプ チェーンの終わりを示しています。以下の図に示すように:

obj オブジェクトがそのようなプロトタイプ チェーンを持った後、obj.foo が実行されると、obj は最初にこの属性があるかどうかを検索しますが、foo の場合は独自のプロトタイプは検索しません。が見つからない場合、obj はプロトタイプ チェーンに沿って順番に検索します...

上の例では、f のプロトタイプに foo 属性を定義し、obj はプロトタイプ チェーンでこの属性を見つけて実行します。

最後に、この記事に含まれる重要なポイントをいくつかの文で要約します:

• プロトタイプ チェーンの形成は、実際にはプロトタイプではなく __proto__ に依存します。JS エンジンがオブジェクトのメソッドを実行するとき、最初にそれが実行されます。オブジェクト自体がこのメソッドが存在するかどうかを確認します。存在しない場合は、プロトタイプ チェーン上で検索されますが、独自のプロトタイプは検索されません。

• オブジェクトの __proto__ は独自のプロトタイプ チェーンを記録し、独自のデータ型を決定します。__proto__ を変更することは、オブジェクトのデータ型を変更することと同じです。

• 関数のプロトタイプは、独自のプロトタイプ チェーンに属しません。これは、サブクラス作成の核心であり、サブクラスのデータ型を決定し、サブクラス プロトタイプ チェーンを接続するブリッジです。

• プロトタイプ オブジェクトのメソッドとプロパティを定義する目的は、サブクラスによって継承され、使用されることです。

以上がJSのプロトタイプオブジェクトとプロトタイプチェーンとは何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。