小筆記：JS原型和原型鏈

CastlePeaK 發布于2019-08-26 13:51 / 905人閱讀

摘要：所以為了方便查看一個對象的原型，和中提供了這個非標準不是所有瀏覽器都支持的訪問器引入了標準對象原型訪問器。在的原型對象中，還包含一個屬性，這個屬性對應創建所有指向該原型的實例的構造函數。

JS原型？

有句簡潔直觀的描述："原型是Javascript中的繼承的基礎，JavaScript的繼承就是基于原型的繼承"。

在JavaScript中，原型也是一個對象，通過原型可以實現對象的屬性繼承，JavaScript的對象中都包含了一個"[[Prototype]]"內部屬性，這個屬性所對應的就是該對象的原型。

"[[Prototype]]"作為對象的內部屬性，是不能被直接訪問的。所以為了方便查看一個對象的原型，Firefox和Chrome中提供了__proto__這個非標準（不是所有瀏覽器都支持）的訪問器（ECMA引入了標準對象原型訪問器"Object.getPrototype(object)"）。在JavaScript的原型對象中，還包含一個"constructor"屬性，這個屬性對應創建所有指向該原型的實例的構造函數。

提到原型，我們必須要了解下Object和Function：

Object和Function都是JS的自帶函數，Object繼承自己，Funtion繼承自己，Object和Function互相是繼承對方，也就是說Object和Function都既是函數也是對象。

//instanceof 就是判斷一個實例是否屬于某種類型
console.log(Function instanceof Object); // true
console.log(Object instanceof Function); // true

前面提到為了方便查看一個對象的原型，引入"__proto__",那么Function和Object對應的原型是什么？

console.log(Function.__proto__); // ? () { [native code] }
console.log(Object.__proto__);  // ? () { [native code] }
console.log(Function.__proto__==Function.prototype); //true
console.log(Object.__proto__==Function.prototype); //true

所以,Object 是 Function的實例，而Function是它自己的實例。

說到Function和Object的相互繼承和對應原型，可能覺得有點頭大，那我們先放一下，讓我們先了解下js對象的一些小知識

普通對象和函數對象

萬物皆對象,js中對象其實分為函數對象和普通對象。
函數對象可以創建普通對象，普通對象沒法創建函數對象，所以普通對象權利最低。

//普通對象
let str=new String();
let num=new Number();
let obj=new Object();
//....

凡是通過new Function創建的對象都是函數對象，其他都是普通對象（通常通過Object創建），可以通過typeof來判斷。

function f1(){}; // ==  var f1 = new Function();

function f2(a,b){
  alert(a+b);
}
//等價于
var f2 = new Function(a,b,"alert(a+b)");

說那么多，其實記住下面的內容就好了：

1.每一個函數對象都有一個prototype屬性，但是普通對象是沒有的；prototype下面又有個construetor，指向這個函數。

2.每個對象都有一個名為_proto_的內部屬性，指向它所對應的構造函數的原型對象，原型鏈基于_proto_;

讓我們建一個普通函數，可以看到：

var obj = {};
  console.log(obj.prototype); //undefined
  console.log(obj instanceof Object); //true
  console.log(obj.__proto__ === Object.prototype) //true
  console.log(Object === Object.prototype.constructor) //true
  console.log(Object.prototype.constructor) //function Object()
　console.log(Object.prototype.__proto__); //null

obj的確沒有prototype屬性

obj是Object的實例

obj的__proto__指向Object的prototype

Object.prototype.constructor指向Object本身

再建一個函數對象：

function Fun(){};
var f1 = new Fun();
console.log(f1.prototype); //undefined
console.log(f1 instanceof Fun); //true
console.log(f1.__proto__ === Fun.prototype); //true
console.log(Fun=== Fun.prototype.constructor) ;//true
console.log(Fun.prototype.__proto__ === Object.prototype) ;//true
console.log(Object.prototype.__proto__); //null

Fun是函數對象，f1還是普通對象

f1是Fun的實例

Fun的原型prototype的__proto__指向Object的原型prototype,而Object的原型prototyped的__proto__指向null;

原型鏈

ECMscript中描述了原型鏈的概念，并將原型鏈作為js實現繼承的主要方法。
基本思路：利用原型，讓一個引用類繼承另一個引用類的屬性和方法。
構造函數、原型和實例的關系：
    每個構造函數都有一個原型對象，原型對象都包含一個指向構造函數的指針，而實例都包含一個指向原型對象的內部指針。

其實，avascript中，每個對象都會在內部生成一個proto 屬性，當我們訪問一個對象屬性時，如果這個對象不存在就回去proto 指向的對象里面找，一層一層找下去，這就是javascript原型鏈的概念。

f1.__proto__ ==> Fun.prototype ==> Fun.prototype.__proto__ ==> Object.prototype ==> Object.prototype.__proto__ ==> null

JS世界中所有的東西都是對象,所有的東西都由Object衍生而來, 所以所有東西原型鏈的終點指向null

云服務器 GPU云服務器 js原型鏈的繼承原型原型鏈原型鏈原型鏈繼承

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109684.html

[學習筆記] 小角度看JS原型鏈

摘要：雖然在腳本中沒有標準的方式訪問，但在每個對象上都支持一個屬性，用于訪問其構造函數的原型對象。說的是構造函數和原型對象之間的關系，說的是實例對象和原型對象之間的關系。前言在 segmentfault 上看到這樣一道題目： var F = function(){}; Object.prototype.a = function(){}; Function.prototype.b = fu...

Cciradih 2019-08-21 10:39 評論0 收藏0
《javascript高級程序設計》筆記：原型圖解

摘要：不理解沒關系，下面會結合圖例分析上一篇高級程序設計筆記創建對象下一篇高級程序設計筆記繼承參考之原型鏈的解讀三張圖搞懂的原型對象與原型鏈繼承與原型鏈文章直接從原型圖解開始的，如果對一些概念不太清除，可以結合后面幾節查看 1. 圖解原型鏈 1.1 鐵三角關系（重點） function Person() {}; var p = new Person(); showImg(https://s...

vspiders 2019-08-21 17:29 評論0 收藏0
《你不知道的javascript》筆記_對象&原型

摘要：上一篇你不知道的筆記寫在前面這是年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響年是向上的一年在新的城市穩定連續堅持健身三個月早睡早起游戲時間大大縮減，學會生活。上一篇：《你不知道的javascript》筆記_this 寫在前面這是2019年第一篇博客，回顧去年年初列的學習清單，發現僅有部分完成了。當然，這并不影響2018年是向上的一年：在新的城市穩定、...

seasonley 2019-08-23 14:32 評論0 收藏0
原型與原型鏈學習筆記

摘要：原型相同對象的共有屬性也稱作原型原型鏈中所有的對象都是由它的原型對象繼承而來。說的直白點就是，所有原型鏈的屬性，最終都指向的是對象的而對象的指向的是。原型：相同對象的共有屬性也稱作原型原型鏈：中所有的對象都是由它的原型對象繼承而來。而原型對象自身也是一個對象，它也有自己的原型對象，這樣層層上溯，就形成了一個類似鏈表的結構，這就是原型鏈showImg(https://segm...

jiekechoo 2019-08-23 18:03 評論0 收藏0
JavaScript學習第十天筆記（繼承）

摘要：繼承原型鏈如果構造函數或對象的原型指向構造函數或對象，的原型再指向構造函數或對象，以此類推，最終的構造函數或對象的原型指向的原型。繼承原型鏈如果構造函數或對象A的原型指向構造函數或對象B，B的原型再指向構造函數或對象C，以此類推，最終的構造函數或對象的原型指向Object的原型。由此形成了一條鏈狀結構，被稱之為原型鏈。按照上述的描述，在B中定義的屬性或方法，可以在A中使用并不需要...

baiy 2019-08-26 12:17 評論0 收藏0