JavaScript Object Properties —— Define, Detect, Remove

原创转载请注明出处：http://agilestyle.iteye.com/blog/2341895

 

Defining Properties

There are two basic ways to create your own objects: using the Object constructor and using an object literal. For example:

var person1 = {
	name: "Nicholas"
};
var person2 = new Object();
person2.name = "Nicholas";

person1.age = "Redacted";
person2.age = "Redacted";

person1.name = "Greg";
person2.name = "Michael";

When a property is first added to an object, JavaScript uses an internal method called [[Put]] on the object.

When a new value is assigned to an existing property, a separate operation called [[Set]] takes place.

See Figure 3-1 for a step-bystep view of what happened to person1 behind the scenes as its name and age properties were changed.

  

 

Detecting Properties

A more reliable way to test for the existence of a property is with the in operator.

The in operator looks for a property with a given name in a specific object and returns true if it finds it. In effect, the in operator checks to see if the given key exists in the hash table. For example, here’s what happens when in is used to check for some properties in the person1 object:

console.log("name" in person1);		// true
console.log("age" in person1);		// true
console.log("title" in person1);	// false

 

Keep in mind that methods are just properties that reference functions, so you can check for the existence of a method in the same way. The following adds a new function, sayName(), to person1 and uses in to confirm the function’s presence.

var person1 = {
	name: "Nicholas",
	sayName: function() {
		console.log(this.name);
	}
};

console.log("sayName" in person1);		// true

 

In most cases, the in operator is the best way to determine whether the property exists in an object. It has the added benefit of not evaluating the value of the property, which can be important if such an evaluation is likely to cause a performance issue or an error.

In some cases, however, you might want to check for the existence of a property only if it is an own property. The in operator checks for both own properties and prototype properties, so you’ll need to take a different approach. Enter the hasOwnProperty() method, which is present on all objects and returns true only if the given property exists and is an own property. For example, the following code compares the results of using in versus hasOwnProperty() on different properties in person1:

var person1 = {
	name: "Nicholas",
	sayName: function() {
		console.log(this.name);
	}
};
console.log("name" in person1);						// true
console.log(person1.hasOwnProperty("name"));		// true
console.log("toString" in person1);					// true
console.log(person1.hasOwnProperty("toString"));	// false

In this example, name is an own property of person1, so both the in operator and hasOwnProperty() return true. The toString() method, however, is a prototype property that is present on all objects. The in operator returns true for toString(), but hasOwnProperty() returns false.

 

Removing Properties

Just as properties can be added to objects at any time, they can also be removed. Simply setting a property to null doesn’t actually remove the property completely from the object, though. You need to use the delete operator to completely remove a property from an object. The delete operator works on a single object property and calls an internal operation named [[Delete]]. You can think of this operation as removing a key/value pair from a hash table. When the delete operator is successful, it returns true.

var person1 = {
	name: "Nicholas"
};

console.log("name" in person1);		// true
delete person1.name;				// true - not output
console.log("name" in person1);		// false
console.log(person1.name);			// undefined

In this example, the name property is deleted from person1. The in operator returns false after the operation is complete. Also, note that attempting to access a property that doesn’t exist will just return undefined. Figure 3-2 shows how delete affects an object.

 

 

Reference

Leanpub.Principles.of.Object-Oriented.Programming.in.JavaScript.Jun.2014