JS原型與原型鏈的示例分析

這篇文章主要介紹JS原型與原型鏈的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！

一、普通對象和函數對象的區別

在Javascript的世界里，全都是對象，而對象之間也是存在區別，我們首先區分一下普通對象和函數對象，如下代碼：

function f1(){};
var f2 = function(){};
var f3 = new function(){};

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

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

在上面的代碼中可以看出，f1、f2和f3都是函數對象，而o1，o2和o3都是object對象，也就是普通對象，函數對象本質就是由new function（）構造而來，其他的都是普通對象；函數對象和普通對象理解之后，后文會說明兩者的區別。

二、原型

在JavaScript中，原型也是一個對象，原型的作用，則是實現對象的繼承。

在js的所有函數對象中，都存在一個屬性prototype，該屬性對應當前對象的原型。

而所有的JavaScript對象，都存在一個_proto_屬性（由于_proto_是個非標準屬性，因此只有ff和chrome兩個瀏覽器支持，標準方法是Object.getPrototypeOf()），_proto_屬性指向實例對象的構造函數的原型，理解起來就如下：

var p = new Person(); 
console.log(p._proto === Person.prototype)//true

從上面代碼可以看出，p是實例對象，Person是p的構造函數，可以看出來p的_proto_屬性指向構造函數Person的原型。

下面用代碼來解釋一下js是如何通過原型進行繼承的：

var parent = function(name){
 this.name = name;
}
parent.prototype.getName = function(){
 return this.name;
}
var son = new parent("huahua");

console.log(son.getName());//'huahua'

顯然，son繼承了parent的原型中的函數屬性getName。

三、原型鏈

除開Object的prototype的原型是null以外，所有的對象和原型都有自己的原型，對象的原型指向原型對象。

在層級多的關系中，多個原型層層相連則構成了原型鏈。

在查找一個對象的屬性時，倘若在當前對象找不到該屬性，則會沿著原型鏈一直往上查找，知道找到為止，如果到了原型鏈頂端，還沒找到，則返回undefined。

四、constructor

constructor是構造函數創建的實例的屬性，該屬性的作用是指向創建當前對象的構造函數。

例如，son.constructor == parent;//true

以上是“JS原型與原型鏈的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！