How JS objects are created and what the objects differ from

JS One there are three ways to create objects, here to do a summary.

1. Object Direct Volume

The so-called direct amount of the object can be seen as a mapping table, this method is also the most direct method, personal comparison of recommendations,

1234567891011121314151617181920

//创建简单对象var obj1 = {}; //空对象var obj2 = {  name: "ys",  age: 12};//创建复杂对象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 name of the key here does not have quotation marks "", good carefully, in fact, this quotation mark (single quote double quotation marks, JS same) add no line, but the personal suggestion Plus, why, because after adding, the key value name can be very casual ... of course, if you don't define the name, the first one is better,

?

12345678910

var obj4 = {  "my name": "ys",  //键值名中间有空格  "my-age": 12,    //键值名中间有连字符  "while": 111    //键值名是关键字}console.log(obj4[‘my name‘]);  //ysconsole.log(obj4[‘my-age‘]);  //12console.log(obj4.while);    //111console.log(typeof obj3);    //object

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

Object directly, the value of the key-value pair is supported by the expression, as follows

?

12345678910

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

?

123456789

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 Objects

?

1234567891011

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 () Create

The method has two parameters, I will only explain the first parameter, the second parameter is not used (further description of the object's properties)
First parameter: Incoming prototype (prototype) object to inherit
How do you understand this sentence?

?

123456

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

Obj1 is {}, why can I access the property value? We understand the meaning of the first parameter, "incoming 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 obj1.age, so you can access it.

1). When the first argument is null

?

12	varobj2 = Object.create(null);   //不继承对象应有的属性和方法console.log(obj2 + "abc");     //报错 ，失去 + 功能

Why did you get an error? The graphs generated under normal parameters are as follows:

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

This time people should understand a sentence, all the objects in JavaScript inherit from object, thinking that object is at the top of the inheritance chain.

2). Create an empty object

?

123	varobj3 = Object.create(Object.prototype); console.log(obj3);              //{}，（空对象，与前两个方法 {}，new Object 相同）console.log(obj3.__proto__);         //如 ，只包含了基本对象的方法

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 more deeply understand the object.create () method, you can refer to this article: "A new way to create JavaScript objects object.create ()"

?

123456789

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

?

123456

< Code class= "JS Comments" >/*① object parameters, only inherit objects */ var obj2 = Object.create (obj1); console.log (OBJ2);                  //{} console.log ( Obj2.name);               //ys /*console.log (Obj2.sayname ()); */            /* error obj2.sayname was not a function*/ Code class= "JS Plain" >console.log (Obj2.__proto__.prototype.sayname ());  // Ys Understanding prototype prototype

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

?

1234567

/*② object prototype, inheriting 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 the view (after setting the name of the figure):

This time I believe everyone understands the first parameter.

The above is the whole content of this article, I hope to help you better create objects.

How JS objects are created and what the objects differ from