JavaScript中的屬性:如何遍曆屬性

文章目錄

• 1.遍曆可枚舉的自身屬性
• 2.遍曆所有的自身屬性
• 3.遍曆可枚舉的自身屬性和繼承屬性
• 4.遍曆所有的自身屬性和繼承屬性
• 1.遍曆可枚舉的自身屬性
• 2.遍曆所有的自身屬性
• 3.遍曆可枚舉的自身屬性和繼承屬性
• 4.遍曆所有的自身屬性和繼承屬性

JavaScript中的屬性:如何遍曆屬性

在JavaScript中,遍曆一個對象的屬性往往沒有在其他語言中遍曆一個雜湊(有些語言稱為字典)的鍵那麼簡單.這主要有兩個方面的原因:一個是,JavaScript中的對象通常都處在某個原型鏈中,它會從一個或多個的上層原型上繼承一些屬性.第二個原因是,JavaScript中的屬性不光有值,它還有一些除了值以外的其他特性,其中一個影響屬性遍曆的特性就是[[Enumerable]],如果該值為true,則稱這個屬性是可枚舉的,否則反之.

知道了這些,我們就可以把屬性的遍曆分為四種情況.

注:範例程式碼中,我們要遍曆的對象是瀏覽器中的window,環境為Firefox 19,代碼運行在空白頁面中的script標籤裡.沒有Firebug或者其他調試工具的影響(會匯入一些全域變數,console等).

1.遍曆可枚舉的自身屬性

可枚舉的意思就是該屬性的[[Enumerable]]特性為true,自身屬性的意思就是該屬性不是從原型鏈上繼承下來的.

(function () {    var propertys = Object.keys(window);    alert(propertys.length);         //3
    alert(propertys.join("\n"));     //window,document,InstallTrigger,除了最後一個是Firefox私人的屬性,原來window對象只有兩個可枚舉的自身屬性.window屬性指向window對象自身,一般沒什麼用.})()

2.遍曆所有的自身屬性

特性為不可枚舉的屬性也並不是遍曆不到,ES5給我們提供了getOwnPropertyNames方法,可以擷取到一個對象的所有自身屬性.

(function () {    var propertys = Object.getOwnPropertyNames(window);    alert(propertys.length);       //72    alert(propertys.join("\n"));   //Object,Function,eval等等})()

3.遍曆可枚舉的自身屬性和繼承屬性

繼承屬性怎麼遍曆,你應該知道,就是最常用的for in遍曆

(function () {    var getEnumPropertyNames = function (obj) {        var props = [];        for (prop in obj) {            props.push(prop);        }        return props;    }    var propertys = getEnumPropertyNames(window);    alert(propertys.length);       //185    alert(propertys.join("\n"));   //addEventListener,onload等等})()

4.遍曆所有的自身屬性和繼承屬性

這種遍曆主要用在各種js調試工具的代碼補全功能上.比如Firebug的.

(function () {    var getAllPropertyNames = function (obj) {        var props = [];        do {            props = props.concat(Object.getOwnPropertyNames(obj));
        } while (obj = Object.getPrototypeOf(obj));        return props;
    }    var propertys = getAllPropertyNames(window);    alert(propertys.length);          //276    alert(propertys.join("\n"));      //toString等})()

在JavaScript中,遍曆一個對象的屬性往往沒有在其他語言中遍曆一個雜湊(有些語言稱為字典)的鍵那麼簡單.這主要有兩個方面的原因:一個是,JavaScript中的對象通常都處在某個原型鏈中,它會從一個或多個的上層原型上繼承一些屬性.第二個原因是,JavaScript中的屬性不光有值,它還有一些除了值以外的其他特性,其中一個影響屬性遍曆的特性就是[[Enumerable]],如果該值為true,則稱這個屬性是可枚舉的,否則反之.

知道了這些,我們就可以把屬性的遍曆分為四種情況.

注:範例程式碼中,我們要遍曆的對象是瀏覽器中的window,環境為Firefox 19,代碼運行在空白頁面中的script標籤裡.沒有Firebug或者其他調試工具的影響(會匯入一些全域變數,console等).

1.遍曆可枚舉的自身屬性

可枚舉的意思就是該屬性的[[Enumerable]]特性為true,自身屬性的意思就是該屬性不是從原型鏈上繼承下來的.

(function () {    var propertys = Object.keys(window);    alert(propertys.length);         //3
    alert(propertys.join("\n"));     //window,document,InstallTrigger,除了最後一個是Firefox私人的屬性,原來window對象只有兩個可枚舉的自身屬性.window屬性指向window對象自身,一般沒什麼用.})()

2.遍曆所有的自身屬性

特性為不可枚舉的屬性也並不是遍曆不到,ES5給我們提供了getOwnPropertyNames方法,可以擷取到一個對象的所有自身屬性.

(function () {    var propertys = Object.getOwnPropertyNames(window);    alert(propertys.length);       //72    alert(propertys.join("\n"));   //Object,Function,eval等等})()

3.遍曆可枚舉的自身屬性和繼承屬性

繼承屬性怎麼遍曆,你應該知道,就是最常用的for in遍曆

(function () {    var getEnumPropertyNames = function (obj) {        var props = [];        for (prop in obj) {            props.push(prop);        }        return props;    }    var propertys = getEnumPropertyNames(window);    alert(propertys.length);       //185    alert(propertys.join("\n"));   //addEventListener,onload等等})()

4.遍曆所有的自身屬性和繼承屬性

這種遍曆主要用在各種js調試工具的代碼補全功能上.比如Firebug的.

(function () {    var getAllPropertyNames = function (obj) {        var props = [];        do {            props = props.concat(Object.getOwnPropertyNames(obj));
        } while (obj = Object.getPrototypeOf(obj));        return props;
    }    var propertys = getAllPropertyNames(window);    alert(propertys.length);          //276    alert(propertys.join("\n"));      //toString等})()