本文是一篇關於JS學習的基礎內容,學習Object物件的原型概念,有興趣的朋友參考下。希望能幫助大家。
物件概念
在 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__ = foo console.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 true Foo 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);
var o = {}; var prototype = Object.getPrototypeOf(o); console.log(prototype === Object.prototype); // return true // 部分浏览器有效 var o2 = {}; console.log(o2.__proto__ === Object.prototype); // return true
#傳回一個對象,並設定它的原型
##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
#相關推薦:
關於Object物件注意事項總結
#詳解JavaScript中的Object物件 的範例程式碼
以上是JS中Object物件的原型基本概念的詳細內容。更多資訊請關注PHP中文網其他相關文章!