1. 程式人生 > 實用技巧 >JS Object物件

JS Object物件

概述

JavaScriptObject物件(注意起首的O是大寫)
JavaScript的所有其他物件都繼承自Object物件,即那些物件都是Object的例項
Object物件的原生方法分成兩類:Object本身的方法與Object的例項方法。

(1)Object物件本身的方法

所謂”本身的方法“就是直接定義在Object物件的方法。

Object.print = function(i) { console.log(i) };

(2)Object的例項方法

所謂例項方法就是定義在Object原型物件Object.prototype上的方法。它可以被Object例項直接使用。

Object.prototype.print = function(){
    console.log(this);
};
var obj = new Object();
obj.print();

Object.prototype定義了一個print方法,然後生成一個Object的例項obj。obj直接繼承了Object.prototype的屬性方法,可以直接使用obj.print呼叫print方法。也就是說,obj物件的print方法實質上就是呼叫Object.prototype.print方法

這裡只要知道,凡是定義在Object.prototype物件上面的屬性和方法,將被所有例項物件共享就可以了。

Object()

Object本身是一個函式,可以當作工具方法使用,將任意值轉為物件。這個方法常用於保證某個值一定是物件。

如果引數為空(或者為undefined和null),Object()返回一個空物件。

var obj = Object();// 等同於
var obj = Object(undefined);
var obj = Object(null);

obj instanceof Object // true

上面程式碼的含義,是將undefined和null轉為物件,結果得到了一個空物件obj。

instanceof運算子用來驗證,一個物件是否為指定的建構函式的例項。 表示式返回值為布林值,obj instanceof Object返回true,就表示obj物件是Object的例項。 如果返回false則不是。

如果引數是原始型別的值,Object方法將其轉為對應的包裝物件的例項


var obj = Object(1);
obj instanceof Object // true
obj instanceof Number // true

var obj = Object('foo');
obj instanceof Object // true
obj instanceof String // true

var obj = Object(true);
obj instanceof Object // true
obj instanceof Boolean // true

上面程式碼中,Object函式的引數是各種原始型別的值,轉換成物件就是原始型別值對應的包裝物件。

如果Object方法的引數是一個物件,它總是返回該物件,即不用轉換。


var arr = [];
var obj = Object(arr); // 返回原陣列
obj === arr // true

var value = {};
var obj = Object(value) // 返回原物件
obj === value // true

var fn = function () {};
var obj = Object(fn); // 返回原函式
obj === fn // true

利用這點還可以寫一個判斷變數是否為物件的函式

function isObject(value) {
  return value === Object(value);
}

isObject([]) // true
isObject(true) // false

Object建構函式

Object不僅可以當作工具函式使用,還可以當作建構函式使用,即前面可以使用new命令。

Object建構函式的首要用途,是直接通過它來生成新物件。

var obj = new Object();

通過var obj = new Object()的寫法生成新物件,與字面量的寫法var obj = {}是等價的。或者說,後者只是前者的一種簡便寫法。


使用時,可以接受一個引數,如果該引數是一個物件,則直接返回這個物件;如果是一個原始型別的值,則返回該值對應的包裝物件

var i = {a : 1};
var t = new Object(i);
i === t   //true

var obj  = new Object(123);
obj instanceof Number    //ture

注意:雖然用法相似,但是Object(value)與new Object(value)兩者的語義是不同的,Object(value)表示將value轉成一個物件,new Object(value)則表示新生成一個物件,它的值是value。

Object的靜態方法

指部署在Object物件自身的方法

Object.keys方法和Object.getOwnPropertyNames方法都用來遍歷物件的屬性。


Object.keys方法的引數是一個物件,返回一個數組。該陣列的成員都是該物件自身的(而不是繼承的)所有屬性名。

Object.keys()

var obj = {
  p1: 123,
  p2: 456
};

Object.keys(obj) // ["p1", "p2"]

Object.getOwnPropertyNames()

Object.getOwnPropertyNames方法與Object.keys類似,也是接受一個物件作為引數,返回一個數組,包含了該物件自身的所有屬性名。

var obj = {
  p1: 123,
  p2: 456
};

Object.getOwnPropertyNames(obj) // ["p1", "p2"]

對於一般的物件來說,Object.keys()和Object.getOwnPropertyNames()返回的結果是一樣的。只有涉及不可列舉屬性時,才會有不一樣的結果。Object.keys()方法只返回可列舉的屬性,Object.getOwnPropertyNames()方法還返回不可列舉的屬性名。


var a = ['Hello', 'World'];

Object.keys(a) // ["0", "1"]
Object.getOwnPropertyNames(a) // ["0", "1", "length"]

上面程式碼中,陣列的length屬性是不可列舉的屬性,所以只出現在Object.getOwnPropertyNames方法的返回結果中。

由於 JavaScript 沒有提供計算物件屬性個數的方法,所以可以用這兩個方法代替。

var obj = {
  p1: 123,
  p2: 456
};

Object.keys(obj).length // 2
Object.getOwnPropertyNames(obj).length // 2

一般情況下,幾乎總是使用Object.keys方法,遍歷陣列的屬性。

Object的例項方法

除了靜態方法,還有不少方法定義在Object.prototype物件。它們稱為例項方法,所有Object的例項物件都繼承了這些方法。

Object例項物件的方法,主要有以下六個。

Object.prototype.valueOf():返回當前物件對應的值。
Object.prototype.toString():返回當前物件對應的字串形式。
Object.prototype.toLocaleString():返回當前物件對應的本地字串形式。
Object.prototype.hasOwnProperty():判斷某個屬性是否為當前物件自身的屬性,還是繼承自原型物件的屬性。
Object.prototype.isPrototypeOf():判斷當前物件是否為另一個物件的原型。
Object.prototype.propertyIsEnumerable():判斷某個屬性是否可列舉。

Object.prototype.valueOf()

作用是返回一個物件的“值”,預設情況下返回物件本身。

var obj = new Object();
obj.valueOf() === obj // true

上面程式碼比較obj.valueOf()與obj本身,兩者是一樣的。

var obj = new Object();
obj.valueOf = function () {
  return 2;
};

1 + obj // 3

上述程式碼定義了obj物件的valueOf方法,於是1+obj就得到了3。這種方法就相當於用自定義的obj.valueOf,覆蓋Object.prototype.valueOf。

Object.prototype.toString()

toString方法的作用是返回一個物件的字串形式,預設情況下返回型別字串。

var o1 = new Object();
o1.toString() // "[object Object]"

var o2 = {a:1};
o2.toString() // "[object Object]"

上面程式碼表示,對於一個物件呼叫toString方法,會返回字串[object Object],該字串說明物件的型別。

字串[object Object]本身沒有太大的用處,但是通過自定義toString方法,可以讓物件在自動型別轉換時,得到想要的字串形式。

var obj = new Object();

obj.toString = function () {
  return 'hello';
};

obj + ' ' + 'world' // "hello world"

上面程式碼表示,當物件用於字串加法時,會自動呼叫toString方法。由於自定義了toString方法,所以返回字串hello world。

toSpring 判斷資料型別

Object.prototype.toString方法返回物件的型別字串,因此可以用來判斷一個值的型別。

var obj = {};
obj.toString() // "[object Object]"

上面程式碼呼叫空物件的toSpring方法,結果返回一個字串"[object Object]",其中第二個Object表示該值的建構函式。


通過函式的call方法,可以在任意值上呼叫這個方法,幫助我們判斷這個值的型別。

Object.prototype.toString.call(value)

上面程式碼表示對value這個值呼叫Object.prototype.toString方法。

這就是說,Object.prototype.toString可以看出一個值到底是什麼型別。

Object.prototype.toString.call(2) // "[object Number]"
Object.prototype.toString.call('') // "[object String]"
Object.prototype.toString.call(true) // "[object Boolean]"
Object.prototype.toString.call(undefined) // "[object Undefined]"
Object.prototype.toString.call(null) // "[object Null]"
Object.prototype.toString.call(Math) // "[object Math]"
Object.prototype.toString.call({}) // "[object Object]"
Object.prototype.toString.call([]) // "[object Array]"

Object.prototype.toLocaleString()

Object.prototype.toLocaleString方法與toString的返回結果相同,也是返回一個值的字串形式。

var obj = {};
obj.toString(obj) // "[object Object]"
obj.toLocaleString(obj) // "[object Object]"

這個方法的主要作用是留出一個介面,讓各種不同的物件實現自己版本的toLocaleString,用來返回針對某些地域的特定的值。目前,主要有三個物件自定義了toLocaleString方法。

  • Array.prototype.toLocaleString()
  • Number.prototype.toLocaleString()
  • Date.prototype.toLocaleString()

舉例來說,日期的例項物件的toString和toLocaleString返回值就不一樣,而且toLocaleString的返回值跟使用者設定的所在地域相關。

var date = new Date();
date.toString() // "Tue Jan 01 2018 12:01:33 GMT+0800 (CST)"
date.toLocaleString() // "1/01/2018, 12:01:33 PM"

Object.prototype.hasOwnProperty()

Object.prototype.hasOwnProperty方法接受一個字串作為引數,返回一個布林值,表示該例項物件自身是否具有該屬性。

var obj = {
  p: 123
};

obj.hasOwnProperty('p') // true
obj.hasOwnProperty('toString') // false

上面程式碼中,物件obj自身具有p屬性,所以返回true。toString屬性是繼承的,所以返回false。

品牌vi設計公司http://www.maiqicn.com 辦公資源網站大全https://www.wode007.com

總結

Object(物件)是在所有的程式語言中都十分重要的一個概念,對於事物我們可以把他們看作是一個物件,而每一個事物都有自己的表示的屬性和對於某一資訊作出的相應的操作。而這些東西就變成了事物的屬性和方法。