Home >Web Front-end >JS Tutorial >Collection of methods to create and call JavaScript objects_javascript skills

Collection of methods to create and call JavaScript objects_javascript skills

WBOY
WBOYOriginal
2016-05-16 16:24:481058browse

While working on a project today, I encountered a situation where I needed to create a JavaScript object. So I Bing an article written by a foreigner about three ways to create JavaScript objects, and then typed the code after reading it. I feel like the method is pretty good, so I’d like to share it with you here.

1. Use functions to create objects:

Copy code The code is as follows:

//Define object
function Animal(type)
{
This.name="";
This.type=type;
This.introduction=function(){
            return "My name is: " this.name ", I belong to " this.type;
}
}
var animal=new Animal("Poultry"); //Instantiate the object we created above
animal.name="小红";
alert(animal.introduction()); //Call its introduction function (at this time, the page will pop up: My name is Xiaohong, I belong to poultry);

Everyone must be familiar with this method. However, using this method will cause a loss in performance. Here, we instantiate the object through the new key. In fact, the new key does two things. First, an anonymous method (Animal) is defined. 2. Call it. This is not as efficient as the method we will introduce next.

2. Use object literals:

I don’t know if the translation is correct. I will tell you the original address later. If you are interested, you can read the original text.

Copy code The code is as follows:

//Define object
var Book=
{
                name: "A Dream of Red Mansions",
          type:"Literary Works",
           getAuthor:function()
{
            return: "I am Cao Xueqin's child!";
}
}
​​​ alert(Book.GetAuthor()); //Call the object method, and the page will appear: I am Cao Xueqin’s child.
        Book.name="Slam Dunk";                                                                                                                                                                                                                               Book.name="Slam Dunk";                           // Modify the object properties
alert(Book.name); //At this time, the page will pop up: Slam Dunk

I believe everyone will understand why this method is more efficient after seeing the code. Because it is equivalent to defining a JavaScript global variable. We can use it directly without instantiating it. However, this looks weird. Well, here comes the solution. Let's take a look at the third method.

3. Singleton mode (Singleton using a function):

It may not be appropriate to translate it into singleton mode. Let’s look at the code first:

Copy code The code is as follows:

//Define object
var Gender=new function()
{
This.type="girl";
This.speaking=function()
{
         return "I am" this.type;
}
}
alert(Gender.speaking();) //Use object At this time, the page will appear: I am a girl.

Look at this code, is it very similar to our method one? However, it works like method one. Method 1: Use the object once and create the object once. This method creates an object once and can use it permanently. Therefore, this approach is very similar to the singleton pattern in design patterns.

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn