久久99国产精品1区二区,国产成人精品高清在线观看99

複雜物件

以程式設計方式有益的方式封裝複雜物件

使用點表示法或括號表示法來取得、設定和更新物件的屬性

刪除物件屬性

如何解析對物件屬性的參考

使用 hasOwnProperty 驗證對象屬性不是來自原型鏈

使用 in 運算符檢查對象是否包含給定屬性

使用 for in 循環(huán)枚舉（循環(huán)）對象的屬性

主機對象和本機對象

使用 Underscore.js 增強和擴展對象

結(jié)論

首頁

CMS教程

＆＃＆按

與物件和屬性一起工作

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Sep 03, 2023 am 08:33 AM

物件屬性工作

與物件和屬性一起工作

複雜物件可以保存任何允許的 JavaScript 值。在以下程式碼中，我建立一個名為 myObject 的 Object() 對象，然後新增表示 JavaScript 中可用的大多數(shù)值的屬性。

複雜物件

#範例：sample29.html

<!DOCTYPE html><html lang="en"><body><script>

	var myObject = {};

	// Contain properties inside of myObject representing most of the native JavaScript values.
	myObject.myFunction = function () { };
	myObject.myArray = [];
	myObject.myString = 'string';
	myObject.myNumber = 33;
	myObject.myDate = new Date();
	myObject.myRegExp = /a/;
	myObject.myNull = null;
	myObject.myUndefined = undefined;
	myObject.myObject = {};
	myObject.myMath_PI = Math.PI;
	myObject.myError = new Error('Darn!');

	console.log(myObject.myFunction, myObject.myArray, myObject.myString, myObject.myNumber, myObject.myDate, myObject.myRegExp, myObject.myNull, myObject.myNull, myObject.myUndefined, myObject.myObject, myObject.myMath_PI, myObject.myError);

	/* Works the same with any of the complex objects, for example a function. */
	var myFunction = function () { };

	myFunction.myFunction = function () { };
	myFunction.myArray = [];
	myFunction.myString = 'string';
	myFunction.myNumber = 33;
	myFunction.myDate = new Date();
	myFunction.myRegExp = /a/;
	myFunction.myNull = null;
	myFunction.myUndefined = undefined;
	myFunction.myObject = {};
	myFunction.myMath_PI = Math.PI;
	myFunction.myError = new Error('Darn!');

	console.log(myFunction.myFunction, myFunction.myArray, myFunction.myString, myFunction.myNumber, myFunction.myDate, myFunction.myRegExp, myFunction.myNull, myFunction.myNull, myFunction.myUndefined, myFunction.myObject, myFunction.myMath_PI, myFunction.myError);

</script></body></html>

這裡要學習的簡單概念是，複雜物件可以包含任何可以在 JavaScript 中名義上表達的內(nèi)容。當您看到此操作完成時，您不應該感到驚訝，因為所有本機物件都可以發(fā)生變化。這甚至適用於物件形式的String()、Number() 和Boolean() 值，即使用new 運算子創(chuàng)建它們時。

以程式設計方式有益的方式封裝複雜物件

Object()、Array() 和 Function() 物件可以包含其他複雜物件。在下面的範例中，我透過使用 Object() 物件來設定物件樹來示範這一點。

範例：sample30.html

<!DOCTYPE html><html lang="en"><body><script>

// Encapsulation using objects creates object chains.
var object1 = {
	object1_1: {
		object1_1_1: {foo: 'bar'}, 
		object1_1_2: {}, 
	}, 
	object1_2: {
		object1_2_1: {}, 
		object1_2_2: {}, 
	}
};

console.log(object1.object1_1.object1_1_1.foo); // Logs 'bar'.

</script></body></html>

可以使用 Array() 物件（又稱多維數(shù)組）或 Function() 物件完成相同的操作。

範例：sample31.html

<!DOCTYPE html><html lang="en"><body><script>

	// Encapsulation using arrays creates a multidimensional array chain.
	var myArray = [[[]]]; // An empty array, inside an empty array, inside an empty array.

	/* Here is an example of encapsulation using functions: An empty function inside an empty function inside an empty function. */
	var myFunction = function () {
		// Empty function.
		var myFunction = function () {
			// Empty function.
			var myFunction = function () {
				// Empty function.
			};
		};
	};

	// We can get crazy and mix and match too.
	var foo = [{ foo: [{ bar: { say: function () { return 'hi'; } }}]}];
	console.log(foo[0].foo[0].bar.say()); // Logs 'hi'.

</script></body></html>

這裡要掌握的主要概念是，一些複雜物件被設計為以程式設計上有益的方式封裝其他物件。

使用點表示法或括號表示法來取得、設定和更新物件的屬性

我們可以使用點符號或方括號符號來取得、設定或更新物件的屬性。

在下面的範例中，我示範了點表示法，這是透過使用物件名稱後跟句點，然後後面跟著要取得、設定或更新的屬性來完成的（例如，objectName.property ）。 < /p>

範例：sample32.html

<!DOCTYPE html><html lang="en"><body><script>

	// Create a cody Object() object.
	var cody = new Object();

	// Setting properties.
	cody.living = true;
	cody.age = 33;
	cody.gender = 'male';
	cody.getGender = function () { return cody.gender; };

	// Getting properties.
	console.log(
		cody.living,
		cody.age,
		cody.gender,
		cody.getGender()
		); // Logs 'true 33 male male'.

	// Updating properties, exactly like setting.
	cody.living = false;
	cody.age = 99;
	cody.gender = 'female';
	cody.getGender = function () { return 'Gender = ' + cody.gender; };

	console.log(cody);

</script></body></html>

點表示法是取得、設定或更新物件屬性最常見的表示法。

除非需要，否則括號表示法並不常用。在下面的範例中，我將上一個範例中使用的點符號替換為括號符號。物件名稱後面跟著一個左括號、屬性名稱（用引號引起來），然後是一個右括號：

範例：sample33.html

<!DOCTYPE html><html lang="en"><body><script>

	// Creating a cody Object() object.
	var cody = new Object();

	// Setting properties.
	cody['living'] = true;
	cody['age'] = 33;
	cody['gender'] = 'male';
	cody['getGender'] = function () { return cody.gender; };

	// Getting properties.
	console.log(
		cody['living'],
		cody['age'],
		cody['gender'],
		cody['getGender']() // Just slap the function invocation on the end!
		); // Logs 'true 33 male male'.

	// Updating properties, very similar to setting.
	cody['living'] = false;
	cody['age'] = 99;
	cody['gender'] = 'female';
	cody['getGender'] = function () { return 'Gender = ' + cody.gender; };

	console.log(cody);

</script></body></html>

當您需要存取屬性鍵並且您必須使用包含表示屬性名稱的字串值的變數(shù)時，括號表示法非常有用。在下一個範例中，我透過使用方括號表示法來存取屬性 foobar 來示範括號表示法相對於點表示法的優(yōu)勢。我使用兩個變數(shù)來執(zhí)行此操作，這兩個變數(shù)在連接時會產(chǎn)生 foobarObject 中包含的屬性鍵的字串版本。

範例：sample34.html

<!DOCTYPE html><html lang="en"><body><script>

	var foobarObject = { foobar: 'Foobar is code for no code' };

	var string1 = 'foo';
	var string2 = 'bar';

	console.log(foobarObject[string1 + string2]); // Let's see dot notation do this!

</script></body></html>

此外，括號表示法可以方便地取得無效 JavaScript 標識符的屬性名稱。在下面的程式碼中，我使用一個數(shù)字和一個保留關(guān)鍵字作為屬性名稱（作為字串有效），只有括號表示法才能存取該屬性名稱。

範例：sample35.html

<!DOCTYPE html><html lang="en"><body><script>

	var myObject = { '123': 'zero', 'class': 'foo' };

	// Let's see dot notation do this! Keep in mind 'class' is a keyword in JavaScript.
	console.log(myObject['123'], myObject['class']); //Logs 'zero foo'.

	// It can't do what bracket notation can do, in fact it causes an error.
	// console.log(myObject.0, myObject.class);

</script></body></html>

因為物件可以包含其他對象，所以cody.object.object.object.object 或cody['object']['object']['object']['object' ] 可以在以下位置查看次。這稱為對象鏈。物件的封裝可以無限期地進行下去。

物件在 JavaScript 中是可變的，這意味著可以隨時對大多數(shù)物件執(zhí)行取得、設定或更新它們。透過使用括號表示法（例如，cody['age']），您可以模仿其他語言中的關(guān)聯(lián)數(shù)組。

如果物件內(nèi)的屬性是方法，您要做的就是使用 () 運算子（例如 cody.getGender()）來呼叫屬性方法。

刪除物件屬性

delete 運算子可用來完全刪除物件的屬性。在下面的程式碼片段中，我們從 foo 物件中刪除 bar 屬性。

範例：sample36.html

<!DOCTYPE html><html lang="en"><body><script>

	var foo = { bar: 'bar' };
	delete foo.bar;
	console.log('bar' in foo); // Logs false, because bar was deleted from foo.

</script></body></html>

delete 不會刪除在原型鏈上找到的屬性。

刪除是實際從物件中刪除屬性的唯一方法。將屬性設為 undefined 或 null 僅變更該屬性的值。它不會從物件中刪除屬性。

如何解析對物件屬性的參考

如果您嘗試存取物件中未包含的屬性，JavaScript 將嘗試使用原型鏈尋找該屬性或方法。在下面的範例中，我建立一個陣列並嘗試存取尚未定義的名為 foo 的屬性。您可能會認為，由於 myArray.foo 不是 myArray 物件的屬性，JavaScript 會立即傳回 undefined。但 JavaScript 會在另外兩個地方（Array.prototype 和 Object.prototype）找出 foo 的值，然後傳回 undefined。

範例：sample37.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = [];

	console.log(myArray.foo); // Logs undefined.

	/* JS will look at Array.prototype for Array.prototype.foo, but it is not there. Then it will look for it at Object.prototype, but it is not there either, so undefined is returned! */

</script></body></html>

財產(chǎn)。如果它有該屬性，它將返回該屬性的值，并且不會發(fā)生繼承，因為原型鏈沒有被杠桿化。如果實例沒有該屬性，JavaScript 將在對象的構(gòu)造函數(shù) prototype 對象中查找它。

所有對象實例都有一個屬性，該屬性是創(chuàng)建該實例的構(gòu)造函數(shù)的秘密鏈接（又名 __proto__）?？梢岳眠@個秘密鏈接來獲取構(gòu)造函數(shù)，特別是實例構(gòu)造函數(shù)的原型屬性。

這是 JavaScript 中對象最令人困惑的方面之一。但讓我們來推理一下。請記住，函數(shù)也是具有屬性的對象。允許對象從其他對象繼承屬性是有意義的。就像說：“嘿，對象 B，我希望你分享對象 A 擁有的所有屬性?！蹦J情況下，JavaScript 通過 prototype 對象將這一切連接到本機對象。當您創(chuàng)建自己的構(gòu)造函數(shù)時，您也可以利用原型鏈。

JavaScript 到底是如何實現(xiàn)這一點的？在您了解它的本質(zhì)之前，您會感到困惑：只是一組規(guī)則。讓我們創(chuàng)建一個數(shù)組來更仔細地檢查 prototype 屬性。

示例：sample38.html

<!DOCTYPE html><html lang="en"><body><script>

	// myArray is an Array object.
	var myArray = ['foo', 'bar'];

	console.log(myArray.join()); // join() is actually defined at Array.prototype.join

</script></body></html>

我們的 Array() 實例是一個具有屬性和方法的對象。當我們訪問其中一種數(shù)組方法時，例如 join()，我們問自己：從 Array() 構(gòu)造函數(shù)創(chuàng)建的 myArray 實例是否有自己的 join() 方法？我們來檢查一下。

示例：sample39.html

<!DOCTYPE html><html lang="en"><body><script>

	var myArray = ['foo', 'bar'];

	console.log(myArray.hasOwnProperty('join')); // Logs false.

</script></body></html>

不，沒有。然而 myArray 可以訪問 join() 方法，就好像它是它自己的屬性一樣。這里發(fā)生了什么？好吧，您剛剛觀察了原型鏈的運行情況。我們訪問了一個屬性，盡管該屬性不包含在 myArray 對象中，但 JavaScript 可以在其他地方找到該屬性。其他地方是非常具體的。當 Array() 構(gòu)造函數(shù)由 JavaScript 創(chuàng)建時，join() 方法被添加（除其他外）作為 Array() 的 prototype 屬性的屬性。

重申一下，如果您嘗試訪問不包含該屬性的對象上的屬性，JavaScript 將在 prototype 鏈中搜索該值。首先，它將查看創(chuàng)建對象的構(gòu)造函數(shù)（例如，Array），并檢查其原型（例如，Array.prototype）以查看是否可以在那里找到該屬性。如果第一個原型對象沒有該屬性，則 JavaScript 會繼續(xù)在初始構(gòu)造函數(shù)后面的構(gòu)造函數(shù)中沿鏈向上搜索。它可以一直做到這一點，直到鏈的末端。

鏈條的終點在哪里？讓我們再次檢查該示例，在 myArray 上調(diào)用 toLocaleString() 方法。

示例：sample40.html

<!DOCTYPE html><html lang="en"><body><script>

	// myArray and Array.prototype contain no toLocaleString() method.
	var myArray = ['foo', 'bar'];

	// toLocaleString() is actually defined at Object.prototype.toLocaleString
	console.log(myArray.toLocaleString()); // Logs 'foo,bar'.

</script></body></html>

toLocaleString() 方法未在 myArray 對象中定義。因此，原型鏈接規(guī)則被調(diào)用，JavaScript 在 Array 構(gòu)造函數(shù)原型屬性中查找屬性（例如，Array.prototype）。它也不存在，因此再次調(diào)用鏈式規(guī)則，我們在 Object() 原型屬性 (Object.prototype) 中查找該屬性。是的，它在那里找到。如果沒有在那里找到它，JavaScript 將產(chǎn)生一個錯誤，指出該屬性是 undefined。

由于所有原型屬性都是對象，因此鏈中的最終鏈接是 Object.prototype。沒有其他可以檢查的構(gòu)造函數(shù)原型屬性。

前面有一整章將原型鏈分解為更小的部分，所以如果你完全不明白這一點，請閱讀該章，然后再回到這個解釋來鞏固你的理解。從這篇簡短的文章中，我希望您明白，當找不到屬性時（并被視為 undefined），JavaScript 將查看幾個原型對象來確定屬性是 undefined。查找總是會發(fā)生，這個查找過程就是 JavaScript 處理繼承以及簡單屬性查找的方式。

使用 `hasOwnProperty` 驗證對象屬性不是來自原型鏈

雖然 in 運算符可以檢查對象的屬性，包括來自原型鏈的屬性，但 hasOwnProperty 方法可以檢查對象的屬性是否來自原型鏈。

在下面的示例中，我們想知道 myObject 是否包含屬性 foo，并且它沒有從原型鏈繼承該屬性。為此，我們詢問 myObject 是否有自己的名為 foo 的屬性。

示例：sample41.html

<!DOCTYPE html><html lang="en"><body><script>

	var myObject = {foo: 'value'};

	console.log(myObject.hasOwnProperty('foo')) // Logs true.

	// Versus a property from the prototype chain.
	console.log(myObject.hasOwnProperty('toString'));  // Logs false.

</script></body></html>

當您需要確定屬性是對象的本地屬性還是從原型鏈繼承時，應該利用 hasOwnProperty 方法。

使用 `in` 運算符檢查對象是否包含給定屬性

in 運算符用于驗證（true 或 false）對象是否包含給定屬性。在此示例中，我們檢查 foo 是否是 myObject 中的屬性。

示例：sample42.html

<!DOCTYPE html><html lang="en"><body><script>

	var myObject = { foo: 'value' };
	console.log('foo' in myObject); // Logs true.

</script></body></html>

您應該知道 in 運算符不僅檢查引用的對象中包含的屬性，還檢查對象通過 prototype 鏈繼承的任何屬性。因此，應用相同的屬性查找規(guī)則，如果當前對象中沒有該屬性，則將在 prototype 鏈上搜索該屬性。

這意味著上一個示例中的 myObject 實際上通過 prototype 鏈 (Object.prototype.toString) 包含一個 toString 屬性方法，即使我們沒有指定一個（例如 myObject.toString） = 'foo')。

示例：sample43.html

<!DOCTYPE html><html lang="en"><body><script>

	var myObject = { foo: 'value' };
	console.log('toString' in myObject); // Logs true.

</script></body></html>

在最后一個代碼示例中，toString 屬性實際上并不位于 myObject 對象內(nèi)部。但是，它是從 Object.prototype 繼承的，因此 in 運算符得出的結(jié)論是 myObject 實際上具有繼承的 toString() 屬性方法。

使用 `for` `in` 循環(huán)枚舉（循環(huán)）對象的屬性

通過使用 for in，我們可以循環(huán)訪問對象中的每個屬性。在以下示例中，我們使用 for in 循環(huán)從 cody 對象中檢索屬性名稱。

示例：sample44.html

<!DOCTYPE html><html lang="en"><body><script>

	var cody = {
		age: 23,
		gender: 'male'
	};

	for (var key in cody) { // key is a variable used to represent each property name. 
		// Avoid properties inherited from the prototype chain.
		if (cody.hasOwnProperty(key)) {
			console.log(key);
		}
	}

</script></body></html>

for in 循環(huán)有一個缺點。它不僅會訪問正在循環(huán)的特定對象的屬性。它還將在循環(huán)中包含對象繼承（通過原型鏈）的任何屬性。因此，如果這不是期望的結(jié)果，而且大多數(shù)情況下都不是，我們必須在循環(huán)內(nèi)使用簡單的 if 語句來確保我們只訪問我們正在循環(huán)的特定對象中包含的屬性。這可以通過使用所有對象繼承的 hasOwnProperty() 方法來完成。

在循環(huán)中訪問屬性的順序并不總是在循環(huán)中定義它們的順序。此外，您定義屬性的順序不一定是訪問它們的順序。

只有可枚舉的屬性（即在循環(huán)對象屬性時可用）才顯示在 for in 循環(huán)中。例如，構(gòu)造函數(shù)屬性將不會顯示?？梢允褂?propertyIsEnumerable() 方法檢查哪些屬性是可枚舉的。

主機對象和本機對象

您應該知道，執(zhí)行 JavaScript 的環(huán)境（例如 Web 瀏覽器）通常包含所謂的主機對象。宿主對象不是 ECMAScript 實現(xiàn)的一部分，但在執(zhí)行期間可作為對象使用。當然，宿主對象的可用性和行為完全取決于宿主環(huán)境提供的內(nèi)容。

例如，在網(wǎng)絡瀏覽器環(huán)境中，window/head 對象及其所有包含對象（不包括 JavaScript 提供的對象）都被視為宿主對象。

在下面的示例中，我檢查 window 對象的屬性。

示例：sample45.html

<!DOCTYPE html><html lang="en"><body><script>

	for (x in window) {
		console.log(x); // Logs all of the properties of the window/head object.
	}

</script></body></html>

您可能已經(jīng)注意到，本機 JavaScript 對象未在主機對象中列出。瀏覽器區(qū)分主機對象和本機對象是相當常見的。

就 Web 瀏覽器而言，所有托管對象中最著名的是用于處理 HTML 文檔的界面，也稱為 DOM。以下示例是列出瀏覽器環(huán)境提供的 window.document 對象內(nèi)包含的所有對象的方法。

示例：sample46.html

<!DOCTYPE html><html lang="en"><body><script>

	for (x in window.document) {
		console.log();
	}

</script></body></html>

我希望您在這里了解的是 JavaScript 規(guī)范本身并不關(guān)心宿主對象，反之亦然。 JavaScript 提供的內(nèi)容（例如，JavaScript 1.5、ECMA-262、第 3 版與 Mozilla 的 JavaScript 1.6、1.7、1.8、1.8.1、1.8.5）和主機環(huán)境提供的內(nèi)容之間存在一條分界線，并且這兩者不應該存在感到困惑。

運行 JavaScript 代碼的主機環(huán)境（例如 Web 瀏覽器）通常提供頭對象（例如 Web 瀏覽器中的 window 對象），其中語言的本機部分與主機對象（例如 一起存儲） window.location（Web 瀏覽器中的 window.location）和用戶定義的對象（例如，您編寫的在 Web 瀏覽器中運行的代碼）。

有時，網(wǎng)絡瀏覽器制造商作為 JavaScript 解釋器的宿主，會在獲得批準之前推出 JavaScript 版本或添加未來的 JavaScript 規(guī)范（例如，Mozilla 的 Firefox JavaScript 1.6、1.7、1.8、1.8.1），1.8.5）。