Home>

js one has three methods to create objects,Make a summary here.

Object direct quantity

The so-called object direct quantity,Can be seen as a mapping table,This method is also the most direct one,Personally recommend,

//Create a simple object
var obj1=();//empty object
var obj2={
  name:"ys",  age:12
};
//Create complex objects
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 thatWhy are there no quotes for the key names here?"Be careful, in fact, the quoteslike js) can be added or not,But personal suggestions add,Why canBecause after adding,Key-value names can be arbitrary ... Of course, if you do n’t define names randomly,The first one is better,Varies from person to person,

var obj4={
  "my name":"ys", //There are spaces in the key name
  "my-age":12, //Hyphens in the key name
  "while":111 //key name is a keyword
}
console.log (obj4 ["my name"]);//ys
console.log (obj4 ["my-age"]);//12
console.log (obj4.while);//111
console.log (typeof obj3);//object

With the above example,You can see the difference between the "." And "[]" access attributes.

Objects directly create objects,Key-value pairs support expressions,as follows

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

2.new create object

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", 12);
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 takes two parameters,I just explain the first parameter,The second parameter is not commonly used (further description of the object's properties)

First parameter:pass in the prototype object to be inherited

How to understand this sentence?

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

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

1). When the first parameter is null

var obj2=object.create (null);//Do not inherit the attributes and methods that the object should have
console.log (obj2 + "abc");//Report error and lose + function

Why does it report an error?The figure generated under normal parameters is as follows:

As can be seen from the figure,The prototype object to be inherited (that is, the parameter) inherits the prototype object of object,Here comes the key reason,The prototype object of object contains some basic methods of js object (indexof (), tostring (), "+" function ...) and this time,If the parameter is null, then the inheritance chain is broken.

At this time, everyone should understand a sentence,All objects in JavaScript inherit from object, thinking that object is at the top of the inheritance chain.

2). Create empty objects

var obj3=object.create (object.prototype);
console.log (obj3);//{}, (empty object, same as the first two methods {}, new object)
console.log (obj3 .__ proto__);//As shown below, only the methods of the basic object are included

Diagram of the code:

Objects created like this,Only basic methods of objects are included.

3). At last everyone look at the following code,Hope to have a deeper understanding of the object.create () method, you can refer to this article:"A new way to create JavaScript object object.create ()"

var obj1={
  name:"ys",  age:12
};
obj1.prototype={
  sayname:function () {
    return console.log (this.name);
  }
};
/* ① 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 is not a function * /
console.log (obj2 .__ proto __. prototype.sayname ());//ys Prototype understanding

If not understandSee the figure below

/* ② Object prototype,Inherited Object Prototype * /
var obj3=object.create (obj1.prototype);
console.log (obj3);//()
console.log (obj3.name);//undefined, no inheritance of the object itself
obj3.name="ys";
console.log (obj3.name);//ys
console.log (obj3.sayname ());//ys

The code does not understand the picture (the picture after setting the name):

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

  • Previous Analysis of each and list usage in PHP
  • Next Anti-aliasing solution for Android programming drawing