An overview of the

In JavaScript, there are several ways to create objects:

  1. Object literal: The prototype object of the created object is Object.
  2. Use the Factory function to create an Object that may or may not be Object (as the case may be);
  3. Use constructor Function to create objects that are constructor_function_name. Prototype;
  4. Class syntax is used to create an object. The prototype object is class_name. Prototype.

If you want to create an object, do it in a different way, and the resulting object might be different (the prototype object might not be the same).

Object Literal

Create an object:

let harry = {
    name: 'Harry Smith'.salary: 90000.raiseSalary: function(percent) {
        this.salary *= 1 + percent/100; }};Copy the code

Above, raiseSalary is called function-Valued Property. RaiseSalary is a property of Harry. Another way of writing it is:

let harry = {
    name: 'Harry Smith'.salary: 90000.raiseSalary(percent) {
        this.salary *= 1 + percent/10; }};Copy the code

Factory Function

A factory function is simply a function that returns an object.

When creating an object with the Factory function, you do not need to use the new keyword. Here is a factory function:

function createEmployee(name, salary) {
    return {
        name: name,
        salary: salary,
        raiseSalary: function (percent) {
            this.salary *= 1 + percent / 100; }}; }const newEmployee = createEmployee("Harry Smith".80000); 
Copy the code

For each object created with our factory function, there is a Function-Valued raiseSalary property. The output is as follows:



So how do you make all of thememployeeObjects share the sameraiseSalaryFunction? Prototypes are implemented in JavaScript.

Prototypes

The following prototype object contains the shared raiseSalary function:

const employeePrototype = {
    raiseSalary: function(percent) {
        this.salary *= 1 + percent/100; }}Copy the code

Rewrite the createEmployee function:

function createEmployee(name, salary) {
    const result = {name, salary}; 
    Object.setPrototypeOf(result, employeePrototype); 
    return result; 
}

const newEmployee = createEmployee("Harry Smith".80000); 
console.log(newEmployee.__proto__ === employeePrototype);  // true
Copy the code

The output is as follows:



As you can see, there is already a chain of prototypes (prototype chain), newly creatednewEmployeeThe prototype Object of the employeePrototype Object is employeePrototype, and the prototype Object of employeePrototype is Object.

console.log(Object.getPrototypeOf(newEmployee)); 
// The result is {raiseSalary: ƒ}
Copy the code

Constructor Function

Factory function (); constructor function ()

function Employee(name, salary) {
    this.name = name;
    this.salary = salary;
}

Employee.prototype.raiseSalary = function(percent) {
    this.salary *= 1 + percent/100; 
}

const newEmployee = new Employee('Harry Smith'.90000); 
console.log(newEmployee.__proto__ === Object.prototype); // false
console.log(newEmployee.__proto__ === Employee.prototype); // true
Copy the code

For the constructor function, JavaScript uses new to create a new object.

Factory Function vs Constructor Function

  • Both can be used to create new objects;
  • The constructor function name starts with a capital letter;
  • As mentioned earlier, we do not need to use the new keyword when creating objects using factory function. But, although you don’t need it, you can actually create it with new. That is, both factory function and constructor function can use new to create objects. However, there are differences between the two methods of creating objects:
    1. Factory function, an object created with new, if not already usedObject.setPrototypeOf(), its prototype Object is Object;
    2. Constructor function, an object created with new whose prototype object is (constructor_function_name. Prototype). Such as the aboveconsole.log(newEmployee.__proto__ === Employee.prototype)The output oftrue.

Class Syntax

JavaScript now has a Java equivalent of class syntax:

class Employee {
    constructor(name, salary) {
        this.name = name;
        this.salary = salary;
    }

    raiseSalary(percent) {
        this.salary *= 1 + percent / 100; }}Copy the code

This class syntax does the same thing as the constructor function. Class syntax is recommended.

Behind the scenes, the class declaration merely declares a constructor function Employee. The constructor keyword declares the body of the Employee constructor function. The raiseSalary method is added to Employee.prototype.