Method Summary of js object creation, js creation Summary

Method Summary of js object creation, js creation Summary

Js has three methods to create an object. Here is a summary.

1. Direct object volume

The so-called direct object volume can be seen as a ing table. This method is also the most direct method. I personally suggest you,

// Create a simple object var obj1 ={}; // empty object var obj2 = {name: "ys", age: 12 }; // create a complex object var obj3 = {name: "ys", age: 12, like: {drink: "water", eat: "food" }}; console. log (typeof obj1); // objectconsole. log (typeof obj2); // objectconsole. log (typeof obj3); // object

Some people may find that the key value name here does not have quotation marks "", so careful. In fact, this quotation mark (single quotation marks, just like js) can be added without adding it, but I personally suggest you add why, because after adding the key value, the key value name can be very casual .... Of course, if you do not define a name in disorder, the first one is better, it varies from person to person,

Var obj4 = {"my name": "ys", // there is a space in the middle of the key value name "my-age": 12, // The key value name contains a hyphen "while": 111 // the key value name is a keyword} console. log (obj4 ['myname']); // ysconsole. log (obj4 ['my-age']); // 12console. log (obj4.while); // 111console. log (typeof obj3); // object

Through the example above, we can see the difference between "." and "[]" Access attributes.

The value of a key-value pair can be expressed as follows:

Var obj3 = {name: "ys", age: obj2.age, // reference obj2.age like: {drink: "water", eat: "food"}; console. log (obj3.age); // 100

2. new creates an object.

1). Built-in System Objects

var obj1 = new Object();var obj2 = new Array();var obj3 = new Date();var obj4 = new RegExp("ys");console.log(typeof obj1);  //objectconsole.log(typeof obj2);  //objectconsole.log(typeof obj3);  //objectconsole.log(typeof obj4);  //object

2). Custom object

function Person(name, age){  this.name = name;  this.age = age;}var obj1 = new Person("ys", 12);console.log(Object.prototype.toString.call(obj1));  //objectconsole.log(Person instanceof Object);        //trueconsole.log(typeof obj1);              //objectconsole.log(obj1.age);                //12

3. Object. create () Creation

This method has two parameters, so I will only explain the first parameter. The second parameter is not commonly used (the object attribute is further described)
First parameter: input the prototype object to be inherited
How can we understand this sentence?

var obj1 = Object.create({  name: "ys",  age: 12});console.log(obj1);     //{}console.log(obj1.age);   //12

The value of obj1 is {}. Why can the attribute values be accessed? Let's understand the meaning of the first parameter: "passing in the prototype object to be inherited"

Console. log (obj1. _ proto _); // Object {name: "ys", age: 12}

The object itself is empty, but the data on the prototype chain is not empty and there is obj1.age, so it can be accessed.

1). When the first parameter is null

Var obj2 = Object. create (null); // do not inherit the attributes of the Object and the method console. log (obj2 + "abc"); // an error is reported, and the + function is lost.

Why is an error reported? The figure generated under normal parameters is as follows:

The figure shows that the prototype Object to be inherited (that is, the parameter) inherits the prototype Object of the Object. The key reason is that, the Object's prototype Object contains some basic js Object methods (indexOf (), toString (), '+' function ......) At this time, if the parameter is null, the inheritance chain is broken.

At this time, you should have understood a sentence. All the objects in JavaScript inherit from the Object and think that the Object is at the top of the inheritance chain.

2) create an empty object

Var obj3 = Object. create (Object. prototype); console. log (obj3); // {}, (empty Object, same as the previous two methods {}, new Object) console. log (obj3. _ proto _); // For example, the method that only contains the basic object

Code diagram:

The created object only contains the basic methods of the object.

3) Finally, let's look at the following code and hope to have a better understanding of the Object. create () method. You can refer to this article:A new method for creating javascript objects Object. create ()

var obj1 = {  name: "ys",  age: 12};obj1.prototype = {  sayName: function(){    return console.log(this.name);  }};

/* ① Object parameter. Only the Object */var obj2 = Object is inherited. create (obj1); console. log (obj2); // {} console. log (obj2.name); // ys/* console. log (obj2.sayName (); * // * error: obj2.sayName is not a function */console. log (obj2. _ proto __. prototype. sayName (); // ys understand the prototype

If you do not understand it, see the following figure.

/* ② Object prototype, inheriting the Object prototype */var obj3 = Object. create (obj1.prototype); console. log (obj3); // {} console. log (obj3.name); // undefined, does not inherit the object itself obj3.name = "ys"; console. log (obj3.name); // ysconsole. log (obj3.sayName (); // ys

The Code does not understand the figure (the figure after the name is set ):

At this time, I believe everyone understands the first parameter.

The above is all the content of this article, hoping to help you better create objects.

Articles you may be interested in:

• Create objects in JS (several common methods)
• Create an object using JavaScript
• Three methods for creating objects in JavaScript
• Javascript converts a string to a dom object (dynamically creates a dom string)
• Learn Javascript object-oriented from Interview Questions (create object)
• Create a custom Object in Javascript. Create an Object instance. Add attributes and methods.
• How to create an object using JavaScript
• Examples of how to create objects in js
• A new method for creating javascript objects: Object. create ()