首頁 > web前端 > js教程 > JS中Object物件的原型概念基礎(內容詳細,一目了然)

JS中Object物件的原型概念基礎(內容詳細,一目了然)

亚连
發布: 2018-05-18 17:39:02
原創
1651 人瀏覽過

這篇文章是一篇關於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__ 在一些特定的瀏覽器有暴露給用戶<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">function Bar () {} function isInstanceof (obj, Constructor) { if (obj === null) { return false; } // 忽略 string, number, boolean, null, undefined 类型干扰 if (!~[&amp;#39;object&amp;#39;, &amp;#39;function&amp;#39;].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);</pre><div class="contentsignin">登入後複製</div></div>

isPrototypeOf

構造函數的原型物件自帶的函數屬性, 用於檢測目標物件的原型鏈中是否存在建構子的原型對象。

function Baz () {}
var baz = new Baz();
Baz.prototype.isPrototypeOf(baz);
Function.prototype.isPrototypeOf(baz);
Object.prototype.isPrototypeOf(baz);
登入後複製

取得物件原型Object.getPrototypeOf

__proto__

#<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:js;toolbar:false;">var o = {}; var prototype = Object.getPrototypeOf(o); console.log(prototype === Object.prototype); // return true // 部分浏览器有效 var o2 = {}; console.log(o2.__proto__ === Object.prototype); // return true</pre><div class="contentsignin">登入後複製</div></div>設定物件原型Object.create Object.setPrototypeOf

Object.create

傳回一個對象,並設定它的原型

function Foo () {}
 function Bar () {}
 Foo.prototype.foo = &#39;foo&#39;;
 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 = &#39;foo&#39;;
 var o = Object.create(null);
 Object.setPrototypeOf(o, Foo.prototype);
 console.log(o.name); // return foo
登入後複製
上面是我整理給大家的,希望今後會對大家有幫助。

相關文章:

JS如何最佳化分時函數

JS實作左右列表互相調換功能

jQuery ajax讀取

json並排序方法詳解#

以上是JS中Object物件的原型概念基礎(內容詳細,一目了然)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板