JS中Object對象的原型概念基礎，jsobject對象原型

JS中Object對象的原型概念基礎，jsobject對象原型

對象概念

在 javascript 中, 一切參考型別均為對象。 如 function Foo () {} 中，Foo本身就是一個對象的引用。

建立對象方式 字面量方式 new 建構函式函式宣告 Object.create

字面量對象

javascript語言層級快速建立對象的執行個體

var obj = {foo: 'foo', bar: 'bar'}; // Object對象字面量var obj2 = [obj, 'foo', 'bar']; // Array數組字面量var obj3 = /^[a-zA-Z0-9]$/; // RegExp正則字面量var obj4 = function(){}; // Function函數字面量

new 建構函式

通過內建對象的建構函式，或者自訂的函數。 使用 new 操作符，建立一個對象，並且執行建構函式方法。

var obj = new Object();var obj2 = new Array(1000);var obj3 = new RegExp('^[a-zA-Z0-9]$');var obj4 = new Function('a', 'b', 'return a + b;');

函式宣告

函式宣告創造的對象. 函數屬於特殊的對象.

function Foo() {}Foo instanceof Object;Foo instanceof Function;

Object.create

傳入一個對象作為返回對象的原型，建立一個新對象, 並將新對象的原型指向傳入的對象中。

var foo = { 'foo': 'foo', 'bar': 'bar'};var o = Object.create(foo); // o.__proto__ = fooconsole.log(o.foo); // o.__proto__.foo

使用Object.create(null) 可以返回一個字典型對象.

var o = Object.create(null);o instanceof Object; // return false;o.toString(); // Uncaught TypeError

對象原型

每一個對象都有一個內建的 __proto__ 屬性指向構造它的函數prototype屬性. 而建構函式的

prototype.constructor 則指向建構函式本生。一個對象的屬性的尋找過程由以下幾個部分組成:

尋找對象屬性的資料描述符(writable, value)或存取描述符(getter, setter)，如果查詢到了，則返回 對應的值。如果查詢不到，則進入第2步驟。尋找對象屬性的值是否有被顯示定義 (可以通過 Object.getOwnPropertyNames)檢測，如果對象屬性定義了，則返回定義的值。 如果沒有，則進入第3步驟。尋找對象的隱藏原型__proto__對象的屬性，規則同1，2步驟。如果還未找到，則重複第3步驟， 直到__proto__ 為null 為止。

具體案例如所示:

檢測對象原型

測試一個對象在其原型鏈中是否存在一個建構函式的 prototype 屬性

instanceof Object.prototype.isPrototypeOf

instanceof

運算子，語言層級的檢測對象的原型鏈是否包含建構函式的原型

function Foo () {}Foo instanceof Function; // return trueFoo instanceof Object; // return true

類比instanceof尋找對象的原型鏈的建構函式是否包含傳入的建構函式, __proto__ 在一些特定的瀏覽器有暴露給使用者

function Bar () {}function isInstanceof (obj, Constructor) { if (obj === null) { return false; } // 忽略 string, number, boolean, null, undefined 類型幹擾 if (!~['object', 'function'].indexOf(typeof obj)) { return false; } var prototype = obj.__proto__; while(prototype) { if (prototype.constructor === Constructor) {  return true; } prototype = prototype.__proto__; } return false;}isInstanceof(Bar, Function);isInstanceof(Bar, Object);

isPrototypeOf

建構函式的原型對象內建的函數屬性, 用於檢測目標對象的原型鏈中是否存在建構函式的原型對象。

function Baz () {}var baz = new Baz();Baz.prototype.isPrototypeOf(baz);Function.prototype.isPrototypeOf(baz);Object.prototype.isPrototypeOf(baz);

擷取對象原型 Object.getPrototypeOf __proto__

var o = {};var prototype = Object.getPrototypeOf(o);console.log(prototype === Object.prototype); // return true// 部分瀏覽器有效var o2 = {};console.log(o2.__proto__ === Object.prototype); // return true

設定對象原型 Object.create Object.setPrototypeOf

Object.create

返回一個對象，並設定它的原型

function Foo () {} function Bar () {} Foo.prototype.foo = 'foo'; Bar.prototype = Object.create(Foo.prototype);  Bar.prototype.constructor = Bar; // 修正原型鏈的constructor var o = new Bar(); console.log(o.foo); // return foo; console.log(o instanceof Bar); // return true

Object.setPrototypeOf

直接設定對象的隱式原型__proto__

function Foo () {} Foo.prototype.name = 'foo'; var o = Object.create(null); Object.setPrototypeOf(o, Foo.prototype); console.log(o.name); // return foo

小結

對象具有許多考驗開發人員的一些知識點。能夠完全理解並整理出來是不容易的。後續我會針對對象的繼承做個詳細的介紹。感謝你對幫客之家的支援。