JS Create object method Rollup _javascript Tips

JS There are three ways to create objects, here to make a summary.

1. Direct volume of objects

The so-called object direct quantity, can be regarded as a pair of mapping table, this method is also the most direct one method, personal comparison suggestion,

Create Simple Object
var obj1 = {};//Empty Object

var obj2 = {
  name: "Ys",
  age:12
};
Create complex object
var obj3 = {
  name: "Ys",
  Age:12, like
  : {
    drink: "Water",
    Eat: "Food"
  }
};

Console.log (typeof obj1);  Object
Console.log (typeof obj2);  Object
Console.log (typeof obj3);  Object

Some people may find that there are no quotes "" In the key value name here, good careful, in fact, this quotation mark (single quote double quotes, JS) add not all line, but the personal suggestion plus, why can, because plus, the key value can be very casual .... Of course, if you don't define names, the first one is better, varies from person to person,

var obj4 = {
  "My Name": "Ys",  ///Key value name has a space in
  the middle "my-age":    one,///key value name in the middle of the hyphen
  "while":    The key value name is the keyword
}

console.log (obj4[' my Name '));  Ys
Console.log (obj4[' my-age '));
Console.log (obj4.while);
Console.log (typeof obj3);    Object

By the example above, you can see "." and "[]" access to the properties of the difference?

object, the value of the key value pair supports the expression, as follows

var obj3 = {
  name: "Ys",
  age:obj2.age,   //reference obj2.age like
  : {
    drink: "Water",
    Eat: "Food"
  }
};

Console.log (Obj3.age); 100

2.new creating objects

1). System built-in Objects

var obj1 = new Object ();
var obj2 = new Array ();
var obj3 = new Date ();
var obj4 = new RegExp ("Ys");

Console.log (typeof obj1);  Object
Console.log (typeof obj2);  Object
Console.log (typeof obj3);  Object
Console.log (typeof obj4);  Object

2). Custom Objects

function person (name, age) {
  this.name = name;
  This.age = age;
}

var obj1 = new Person ("Ys");

Console.log (Object.prototype.toString.call (obj1));  Object
Console.log (person instanceof object);        True
Console.log (typeof obj1);              Object
Console.log (obj1.age);                12

3.object.create () Create

This method has two parameters, I will only explain the first parameter, the second parameter is not common (further description of the object's properties)
First parameter: Passing in the prototype (prototype) object to inherit
How to understand this sentence?

var obj1 = object.create ({
  name: "Ys",
  age:12
});
Console.log (obj1);     {}
Console.log (obj1.age);   12

Obj1 is {}, why do you have access to property values? We understand the meaning of the first parameter "Passing in the prototype object to inherit"

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 a obj1.age, so it can be accessed.

1. When the first argument is null

var obj2 = object.create (null);   Do not inherit the attributes and methods that the object should have
Console.log (obj2 + "abc");     Error, lose + function

Why do you have an error? The graphs generated under normal parameters are as follows:

It can be seen from the diagram that the prototype object (that is, parameters) to inherit inherits the object's prototype, and the key reason is that the object's prototype contains some basic methods of the JS object (IndexOf (), toString (), ' + ' function ... And this time, if the argument is null, then the inheritance chain is broken.

It's time for everyone to understand that all the objects in JavaScript inherit from object and that 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 first two methods {},new object)
Console.log (obj3.__proto__);         The following figure, which contains only the basic object methods

Diagram of the code:

This creates an object that contains only the basic methods of the object.

3. Finally, we look at the following code, hoping to have a deeper understanding of the Object.create () method, you can refer to this article: A new way to create JavaScript objects object.create ()

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

/*① object parameter, only inherit object
/var obj2 = object.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 archetype of the prototype

If you don't understand, look at the picture below.

/*② object prototype, inherit object prototype * *
var obj3 = object.create (obj1.prototype);
Console.log (OBJ3);                 {}
Console.log (obj3.name);               Undefined, no inheriting object itself
Obj3.name = "ys";
Console.log (obj3.name);               Ys
Console.log (Obj3.sayname ());            Ys

The code does not understand look at the diagram (after setting the name of the diagram):

This time I believe that we all understand the first parameter.

The above is the entire content of this article, hope can help you to create the object better.