Home  >  Article  >  Web Front-end  >  JavaScript creates objects

JavaScript creates objects

不言
不言Original
2018-04-10 16:48:501338browse

The content of this article is about creating objects with JavaScript, which has certain reference value. Friends in need can refer to it

Call the system's constructor

Create the most The simple way is to create an instance of Object, as follows:

    // 1. 调用系统的构造函数
    var person = new Object();

    // 添加属性
    person.name = "小李";
    person.age = 22;
    person.sex = "F";

    // 添加方法
    person.eat = function () {
        console.log("我喜欢吃油炸榴莲.")
    };

    person.play = function () {
        console.log("我喜欢玩电子游戏.")
    };

    person.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "岁.");
    };    
    
    person.introduce();        // 输出:我叫小李, 今年22岁.

The above code creates an object named object and adds three properties and three methods to it.

Object Literal

However, although the Object constructor and object literal can be used to create a single object, creating an object in this way will generate a lot of repeated code. So people started to use the factory pattern. As follows:

function createPerson(name, age, sex) {
    var object = new Object();
    person.name = "小李";
    person.age = 22;
    person.sex = "F";
    person.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "岁.");
    };
    
    return person;
}

var person0 = createPerson("小苏", "21", "M");
var person1 = createPerson("铁子", "27", "M");

The function createPerson() can construct a Person object containing all information based on the accepted parameters. This function can be called an unlimited number of times, and each time it returns an object containing three properties and one method. Although the factory pattern solves the problem of a large amount of code duplication caused by creating multiple similar objects, it does not solve the problem of object identification, that is, how to know the type of an object. With the development of JavaScript, another new pattern has emerged, that is, the constructor pattern.

Constructor Pattern

Constructors in ECMAScript can create objects of specific types. Native constructors like Object objects and Array objects automatically appear in the execution environment at runtime. In addition, we can also customize the constructor to customize the type and method of the object. For example, the previous example could be rewritten using the automatic constructor as the following code:

function Person(name, age, sex) {
    this.name = name;
    this.age  = age;
    this.sex  = sex;
    
    this.introduce = function () {
        console.log("我叫" + this.name + ", 今年" + this.age + "岁.");
    };
}

var person0 = createPerson("小苏", "21", "M");
var person1 = createPerson("铁子", "27", "M");

In this example, the Person() function replaces the createPerson() function. We noticed that the code in the Person() function has the following similarities with the createPerson() function:

  • The object is not explicitly created;

  • The properties and methods are directly assigned to this object;

  • There is no return statement.

In addition, you should also notice that the capital letter P is used at the beginning of the function name. By convention, constructors should always begin with an uppercase letter, and non-constructors should always begin with a lowercase letter.
To create a new instance of Person, the new operator must be used. Calling the constructor in this way actually goes through four processes:

  1. Create a new object;

  2. change the function of the constructor The domain is assigned to the new object (so this points to the new object);

  3. Execute the code in the constructor;

  4. Return this new object.


Related recommendations:

detailed explanation of creating a local server with node.js

Several JS creations Sharing the way of objects

Detailed explanation of three.js creating scene instances


The above is the detailed content of JavaScript creates objects. For more information, please follow other related articles on the PHP Chinese website!

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