Using the built-in Object() constructor, we can dynamically create a generic empty object. In fact, if you remember from the beginning of Chapter 1, this is exactly what we did by creating the cody object. Let's recreate the cody object.
Example: sample69.html
<!DOCTYPE html><html lang="en"><body><script> var cody = new Object(); // Create an empty object with no properties. for (key in cody) { // Confirm that cody is an empty generic object. if (cody.hasOwnProperty(key)) { console.log(key); // Should not see any logs, because cody itself has no properties. } } </script></body></html>
Here, all we do is use the Object()
constructor to create a generic object called cody. You can think of the Object()
constructor as a cookie-cutter tool for creating empty objects with no predefined properties or methods (except, of course, objects inherited from the prototype chain).
If it's not obvious, Object()
The constructor itself is an object. That is, the constructor is based on the object created from the Function
constructor. This can be confusing. Remember, like the Array
constructor, the Object
constructor just spits out a blank object. Yes, you can create all empty objects you like. However, creating an empty object like cody is very different from creating your own constructor with predefined properties. Make sure you understand that cody is just an empty object based on the Object()
constructor. To truly harness the power of JavaScript, you not only need to learn how to create an empty object container from Object()
, but you also need to learn how to construct your own object "class" (Person()
) , such as Object()
the constructor itself.
Object()
ParametersObject()
The constructor takes an optional parameter. This parameter is the value you want to create. If you do not provide any parameters, a null
or undefined
value will be assumed.
Example: sample70.html
<!DOCTYPE html><html lang="en"><body><script> // Create an empty object with no properties. var cody1 = new Object(); var cody2 = new Object(undefined); var cody3 = new Object(null); console.log(typeof cody1, typeof cody2, typeof cody3); // Logs 'object object object'. </script></body></html>
If a value other than null
or undefined
is passed to the Object
constructor, the passed value will be created as an object. So in theory, we can use the Object()
constructor to create any other native object that has a constructor. In the next example, I do just that.
Example: sample71.html
<!DOCTYPE html><html lang="en"><body><script> /* Use the Object() constructor to create string, number, array, function, Boolean, and regex objects. */ // The following logs confirm object creation. console.log(new Object('foo')); console.log(new Object(1)); console.log(new Object([])); console.log(new Object(function () { })); console.log(new Object(true)); console.log(new Object(/\bt[a-z]+\b/)); /* Creating string, number, array, function, Boolean, and regex object instances via the Object() constructor is really never done. I am just demonstrating that it can be done. */ </script></body></html>
Object()
Properties and methodsObject()
The object has the following properties (excluding inherited properties and methods):
Properties (Object.prototype;
):
prototype
Object()
Instance properties and methodsObject()
Object instances have the following properties and methods (excluding inherited properties and methods):
Instance properties (var myObject = {};
myObject.constructor;
):
Constructor
Instance method (var myObject = {};
myObject.toString();
):
hasOwnProperty()
isPrototypeOf()
propertyIsEnumerable()
toLocaleString()
toString()
valueOf()
The prototype chain ends with Object.prototype
, so all properties and methods of Object()
will be inherited by all JavaScript objects.
Object()
ObjectCreating an "object literal" requires instantiating an object with or without properties using curly braces (var cody = {};
). Remember at the beginning of Chapter 1 when we created a one-time cody object and then used dot notation to assign properties to the cody object? Let's do it again.
Example: sample72.html
<!DOCTYPE html><html lang="en"><body><script> var cody = new Object(); cody.living = true; cody.age = 33; cody.gender = 'male'; cody.getGender = function () { return cody.gender; }; console.log(cody); // Logs cody object and properties. </script></body></html>
Please note that the code requires five statements to create the cody
object and its properties. Using object literal notation, we can express the same cody
object in one statement.
Example: sample73.html
<!DOCTYPE html><html lang="en"><body><script> var cody = { living: true, age: 23, gender: 'male', getGender: function () { return cody.gender; } }; // Notice the last property has no comma after it. console.log(cody); // Logs the cody object and its properties. </script> </body>
Using literal representation allows us to create objects (including defined properties) with less code and visually encapsulate related data. Note the use of the :
and ,
operators in a single statement. Due to its simplicity and readability, this is actually the preferred syntax for creating objects in JavaScript.
You should know that property names can also be specified as strings:
Example: sample74.html
<!DOCTYPE html><html lang="en"><body><script> var cody = { 'living': true, 'age': 23, 'gender': 'male', 'getGender': function () { return cody.gender; } }; console.log(cody); // Logs the cody object and its properties. </script> </body>
There is no need to specify properties as strings, unless the property name is:
class
). careful! The last property of the object should not have a trailing comma. This can cause errors in some JavaScript environments.
Object.prototype
Object() constructor in
JavaScript is special because its prototype
attribute is the last stop in the prototype chain.
在以下示例中,我使用 foo
属性扩充 Object.prototype
,然后创建一个字符串并尝试访问 foo
属性,就好像它是字符串实例的属性一样。由于 myString
实例没有 foo
属性,因此原型链启动并在 String.prototype
中查找值。它不在那里,所以下一个要查找的位置是 Object.prototype
,这是 JavaScript 查找对象值的最终位置。找到了 foo
值,因为我添加了它,因此它返回 foo
的值。
示例:sample75.html
<!DOCTYPE html><html lang="en"><body><script> Object.prototype.foo = 'foo'; var myString = 'bar'; // Logs 'foo', being found at Object.prototype.foo via the prototype chain. console.log(myString.foo); </script> </body>
小心!添加到 Object.prototype
的任何内容都将显示在 for in
循环和原型链中。因此,据说禁止更改 Object.prototype
。
The above is the detailed content of The reformulated title is: The Concept of Object(). For more information, please follow other related articles on the PHP Chinese website!