【前端基礎進階】JS原型、原型鏈、對象詳解

一. 普通對象與函數對象

JavaScript 中，萬物皆對象！但對象也是有區別的。分爲普通對象和函數對象，Object 、Function 是 JS 自帶的函數對象。下面舉例說明

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

function f1(){}; 
var f2 = function(){};
var f3 = new Function('str','console.log(str)');

console.log(typeof Object); //function 
console.log(typeof Function); //function  

console.log(typeof f1); //function 
console.log(typeof f2); //function 
console.log(typeof f3); //function   

console.log(typeof o1); //object 
console.log(typeof o2); //object 
console.log(typeof o3); //object

在上面的例子中 o1 o2 o3 爲普通對象，
f1 f2 f3 爲函數對象。
怎麼區分，其實很簡單，凡是經過 new Function() 建立的對象都是函數對象，其餘的都是普通對象。
f1,f2,歸根結底都是經過 new Function()的方式進行建立的。

Function Object 也都是經過 New Function()建立的。

二. 構造函數

咱們先複習一下構造函數的知識：

function Person(name, age, job) {
 this.name = name;
 this.age = age;
 this.job = job;
 this.sayName = function() { alert(this.name) } 
}
var person1 = new Person('Zaxlct', 28, 'Software Engineer');
var person2 = new Person('Mick', 23, 'Doctor');

上面的例子中 person1 和 person2 都是 Person 的實例。這兩個實例都有一個 constructor （構造函數）屬性，該屬性（是一個指針）指向 Person。 即：

console.log(person1.constructor == Person); //true
  console.log(person2.constructor == Person); //true

咱們要記住兩個概念（構造函數，實例）：

person1 和 person2 都是 構造函數 Person 的實例

一個公式：

實例的構造函數屬性（constructor）指向構造函數。

三. 原型對象

在 JavaScript 中，每當定義一個對象（函數也是對象）時候，對象中都會包含一些預約義的屬性。其中每一個函數對象都有一個prototype 屬性，這個屬性指向函數的原型對象。

function Person() {}
Person.prototype.name = 'Zaxlct';
Person.prototype.age  = 28;
Person.prototype.job  = 'Software Engineer';
Person.prototype.sayName = function() {
  alert(this.name);
}
  
var person1 = new Person();
person1.sayName(); // 'Zaxlct'

var person2 = new Person();
person2.sayName(); // 'Zaxlct'

console.log(person1.sayName == person2.sayName); //true

咱們獲得了本文第「定律」：

1.每一個對象都具備一個名爲__proto__的屬性；

2.每一個構造函數（構造函數標準爲大寫開頭，如Function()，Object()等等JS中自帶的構造函數，以及本身建立的）都具備一個名爲prototype的方法（注意：既然是方法，那麼就是一個對象（JS中函數一樣是對象），因此prototype一樣帶有__proto__屬性）；

3.每一個對象的__proto__屬性指向自身構造函數的prototype；

4.每一個對象都有 、__proto__ 屬性，但只有函數對象纔有 prototype 屬性

四. 原型鏈

5、原型鏈
原型對象其實也是普通的對象。幾乎全部的對象均可能是原型對象，也多是實例對象，並且還能夠同時是原型對象與實例對象。這樣的一個對象，正是構成原型鏈的一個節點。所以理解了原型，那麼原型鏈並非一個多麼複雜的概念。
咱們知道全部的函數都有一個叫作toString的方法。那麼這個方法究竟是在哪裏的呢？
先隨意聲明一個函數：

function add() {}

那麼咱們能夠用以下的圖來表示這個函數的原型鏈。

原型鏈

其中add是Function對象的實例。而Function的原型對象同時又是Object原型的實例。這樣就構成了一條原型鏈。原型鏈的訪問，其實跟做用域鏈有很大的類似之處，他們都是一次單向的查找過程。所以實例對象可以經過原型鏈，訪問處處於原型鏈上對象的全部屬性與方法。這也是foo最終可以訪問處處於Object原型對象上的toString方法的緣由。
基於原型鏈的特性，咱們能夠很輕鬆的實現繼承。

---

具體基本知識瞭解後，咱們分析下圖

第一

先從實例add()分析
實例add() 爲 Function的實例
因此
add()的__proto__指向其構造函數的原型即 Function.prototype

var add = function () {}
add.__proto__ === Function.prototype//true

特別注意 構造函數Funciton的__proto__指向自身的Function.prototype

Function.__proto__ === Function.prototype//true

因此構造函數Function的__proto__和prototype都指向Function.prototype

第二

由於Function和Object都是js自帶函數
且 Object 也是由 new Function建立而來

typeof Function
"function"
typeof Object
"function"

因此 Object的__proto__指向Function的原型對象即 Function.prototype

Object.__proto__ === Function.prototype
true

所以 Object 的 prototype 和 Function.prototype的 __proto__都指向 Object.prototype

第三

Object.prototype被稱爲原型鏈的E端，由於它的__proto__爲null