搜尋

首頁 >web前端 >前端問答 >javascript物件分為哪兩大類

javascript物件分為哪兩大類

青灯夜游
青灯夜游原創
2022-02-24 16:32:242842瀏覽

javascript的兩類對象：1、宿主對象（host Objects），是由JavaScript宿主環境提供的對象，它們的行為完全由宿主環境決定；2、內建對象（Built-in Objects），是由JavaScript語言提供的物件。

javascript物件分為哪兩大類

本教學操作環境：windows7系統、javascript1.8.5版、Dell G3電腦。

在javascript中，可以把物件分成兩類宿主物件和內建物件。

  • 宿主物件（host Objects）：由 JavaScript 宿主環境提供的對象，它們的行為完全由宿主環境決定。

  • 內建物件（Built-in Objects）：由JavaScript 語言提供的物件

    • 固有物件（Intrinsic Objects ）：由標準規定，隨著JavaScript 執行時期建立而自動建立的物件實例。

    • 原生物件（Native Objects）：可以由使用者透過 Array、RegExp 等內建建構器或特殊語法建立的物件。

    • 普通物件（Ordinary Objects）：由{}語法、Object 建構器或 class 關鍵字定義類別所建立的對象，它能夠被原型繼承。

宿主物件

JavaScript 宿主物件千奇百怪，但前端最熟悉的無疑是瀏覽器環境中的宿主了。在瀏覽器環境中，我們都知道全域物件是 window，window 上又有許多屬性，例如 document。實際上，這個全域物件 window 上的屬性，一部分來自 JavaScript 語言，一部分來自瀏覽器環境。 JavaScript 標準中規定了全域物件屬性，W3C 的各種標準中規定了 Window 物件的其它屬性。宿主物件也分為固有的和使用者可建立的兩種，例如 document.createElement 就可以建立一些 DOM 物件。宿主也會提供一些建構器，例如我們可以使用new Image 來創建img 元素，

內建物件·固有物件

#固有物件是由標準規定，隨著JavaScript 運行時創建而自動建立的物件實例。固有物件在任何 JavaScript 程式碼執行前就已經被創建出來了，它們通常扮演者類似基礎函式庫的角色。我們前面提到的「類別」其實就是固有物件的一種。 ECMA 標準為我們提供了一份固有物件表，裡面含有 150 個固有物件。

內建物件·原生物件

我們把 JavaScript 中，能夠透過語言本身的建構器所建立的物件稱為原生物件。在 JavaScript 標準中，提供了 30 多個建構器。依照我的理解，依照不同應用場景，我把原生物件分成了以下幾種種類。

javascript物件分為哪兩大類
透過這些建構器，我們可以用 new 運算建立新的對象，所以我們把這些物件稱為原生物件。幾乎所有這些建構器的能力都是無法用純 JavaScript 程式碼實現的，它們也無法用 class/extend 語法來繼承。這些建構器所建立的物件多數使用了私有欄位, 例如：

Error: [[ErrorData]]
Boolean: [[BooleanData]]
Number: [[NumberData]]
Date: [[DateValue]]
RegExp: [[RegExpMatcher]]
Symbol: [[SymbolData]]
Map: [[MapData]]

這些欄位使得原型繼承方法無法正常運作，所以，我們可以認為，所有這些原生物件都是為了特定能力或效能，而設計出來的「特權物件」。

用物件來模擬函數與建構器：函數物件與建構器物件

我在前面介紹了物件的一般分類，在JavaScript 中，還有一個看待物件的不同視角，這就是用物件來模擬函數和建構器。事實上，JavaScript 為這一類物件預留了私有欄位機制，並規定了抽象的函數物件與建構器物件的概念。

函數物件的定義是：具有[[call]]私有欄位的對象，建構器物件的定義是：具有私有欄位[[construct]]的物件。

JavaScript 以物件模擬函數的設計取代了一般程式語言中的函數，它們可以像其它語言的函數一樣被呼叫、傳參。任何宿主只要提供了“具有[[call]]私有欄位的物件”，就可以被 JavaScript 函數呼叫語法支援。

我們可以這樣說，任何對像只需要實作[[call]]，它就是一個函數對象，可以去當函數被呼叫。而如果它能實現[[construct]]，它就是一個構造器對象，可以作為構造器被呼叫。

對於提供 JavaScript 運作環境的程式設計師來說，只要欄位符合，我們在上文中提到的宿主物件和內建物件（如 Symbol 函數）可以模擬函數和建構器。

當然了，使用者用 function 關鍵字建立的函數必定同時是函數和建構器。不過，它們所表現出來的行為效果卻不相同。

對於宿主和內建物件來說，它們實作[[call]]（作為函數被呼叫）和[[construct]]（作為建構器被呼叫）不總是一致的。

对于用户使用 function 语法或者 Function 构造器创建的对象来说，[[call]]和[[construct]]行为总是相似的，它们执行同一段代码。我们看一下示例。

function f(){
    return 1;
}
var v = f(); //把f作为函数调用
var o = new f(); //把f作为构造器调用

这样的规则造成了个有趣的现象，如果我们的构造器返回了一个新的对象，那么 new 创建的新对象就变成了一个构造函数之外完全无法访问的对象，这一定程度上可以实现“私有”。

function cls(){
    this.a = 100;
    return {
        getValue:() => this.a
    }
}
var o = new cls;
o.getValue(); //100
//a在外面永远无法访问到

特殊行为的对象

除了上面介绍的对象之外，在固有对象和原生对象中，有一些对象的行为跟正常对象有很大区别。

它们常见的下标运算（就是使用中括号或者点来做属性访问）或者设置原型跟普通对象不同，这里我简单总结一下。

  • Array：Array 的 length 属性根据最大的下标自动发生变化。

  • Object.prototype：作为所有正常对象的默认原型，不能再给它设置原型了。

  • String：为了支持下标运算，String 的正整数属性访问会去字符串里查找。

  • Arguments：arguments 的非负整数型下标属性跟对应的变量联动。

  • 模块的 namespace 对象：特殊的地方非常多，跟一般对象完全不一样，尽量只用于 import 吧。

  • 类型数组和数组缓冲区：跟内存块相关联，下标运算比较特殊。

  • bind 后的 function：跟原来的函数相关联。

【相关推荐：javascript视频教程】

以上是javascript物件分為哪兩大類的詳細內容。更多資訊請關注PHP中文網其他相關文章！

JavaScript String Array Object 构造函数 字符串 继承 class Length Namespace symbol function regexp 对象 dom prototype
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn
上一篇：JavaScript怎麼判斷相不相等下一篇：JavaScript怎麼判斷相不相等

相關文章

看更多