Detailed explanation of JavaScript constructor

Having a good understanding of constructors is the key to mastering the JavaScript language. We all know that JavaScript is not like other languages. It does not have the class keyword, but it has a constructor that is very similar to function. In this article, let’s learn in detail how JavaScript constructors construct objects.

Constructors are very similar to ordinary functions, but we use them through the new keyword. There are two main types of constructors, native constructors (Array, Object), which can be automatically generated in the execution environment, and custom constructors. Functions, you can define your own methods and properties.

Using constructors is very effective when you want to create many similar objects (with the same properties and methods). Most programmers follow the convention of using a capital letter to distinguish constructors from ordinary functions. Take a look at the code below.

function Book() { 
    // unfinished code} 
var myBook = new Book();

The last line of code creates a Book object and assigns it to a variable; after this is completed, even if the Book constructor does not do anything, myBook is also an instance of Book. As you can see, apart from capitalizing the first letter and using the new keyword, there is no difference between a constructor and a normal function.

Judge the type of instance

To determine whether an object is a certain instance, we can use the instanceof operator:

myBook instanceof Book    // => truemyBook instanceof String  // => false

Note : If the right hand side is not an instance of a function, an error will be reported:

myBook instanceof {}; // => TypeError: invalid 'instanceof' operand ({})

Another method is to use the constructor attribute. All object instances have a constructorAttribute, this attribute points to the constructor that created it.

myBook.constructor == Book;   // => true

is just like myBook’s constructor points to Book. All objects inherit the constructor property from their prototype:

var s = new String("text");
s.constructor === String;      // => true"text".constructor === String; // => truevar o = new Object();
o.constructor === Object;      // => truevar o = {};
o.constructor === Object;      // => truevar a = new Array();
a.constructor === Array;       // => true[].constructor === Array;      // => true

Although using constructor can be used to detect instance types, it is recommended to use instanceofmethod. Because the constructor attribute can be overridden... it is not very reliable to use.

Custom Constructor

Constructors are like cookie stampers. Made from the same impression, they are all the same model (the same is true for men who don’t have a good thing).

function Book(name, year) {    this.name = name;    this.year = '(' + year + ')';
}

BookThe constructor requires two parameters. When using the new keyword to construct an object, the two formal parameters will be passed to BookThe object's name and year.

var firstBook = new Book("Pro AngularJS", 2014);var secondBook = new Book("Secrets Of The JavaScript Ninja", 2013); 
var thirdBook = new Book("JavaScript Patterns", 2010);

console.log(firstBook.name, firstBook.year);           
console.log(secondBook.name, secondBook.year);           
console.log(thirdBook.name, thirdBook.year);

As you can see, we can quickly create another book by passing different parameters. The same is true for JavaScript's Array() and Date().

Object.defineProperty method

Object.defineProperty method can be used in the constructor to configure properties.

function Book(name) { 
    Object.defineProperty(this, "name", { 
        get: function() { 
            return "Book: " + name;       
        },        
        set: function(newName) {            
            name = newName;        
        },               
        configurable: false     
    }); 
}var myBook = new Book("Single Page Web Applications");
console.log(myBook.name);    // => Book: Single Page Web Applications// we cannot delete the name property because "configurable" is set to falsedelete myBook.name;    
console.log(myBook.name);    // => Book: Single Page Web Applications// but we can change the value of the name propertymyBook.name = "Testable JavaScript";
console.log(myBook.name);    // => Book: Testable JavaScript

The above code calls the ancestor method. It provides getter and setter interfaces. The getter method is responsible for returning the encapsulated value, and the setter method accepts parameters and assigns the value to the property. When we operate access on a property, these two methods are called. By configuring configurable, we can set whether the value can be deleted.

Object literal representation is the preferred constructor

There are nine built-in constructors in the JavaScript language: Object(), Array(), String(), Number(), Boolean(), Date(), Function(), Error() and RegExp(). When we need to create these values, we are free to use literals or constructors. But under the same circumstances, literal objects are not only easier to read, but also faster because they can be optimized during parsing. So use literals when you need to use simple objects.

// a number object// numbers have a toFixed() methodvar obj = new Object(5);
obj.toFixed(2);     // => 5.00// we can achieve the same result using literalsvar num = 5;
num.toFixed(2);     // => 5.00// a string object// strings have a slice() method var obj = new String("text");
obj.slice(0,2);     // => "te"// same as abovevar string = "text";string.slice(0,2);  // => "te"

Using the new keyword is essential

Remember to use the newkeyword when using the constructor. If you accidentally forget it, then the constructor this in points to the global object (default is window in the browser).

function Book(name, year) {
    console.log(this);    this.name = name;    this.year = year;
}var myBook = Book("js book", 2014);  
console.log(myBook instanceof Book);  
console.log(window.name, window.year);var myBook = new Book("js book", 2014);  
console.log(myBook instanceof Book);  
console.log(myBook.name, myBook.year);

The result of running the above code is as follows:

If it is in strict mode, the above code will throw an error because of strict mode We are not allowed to call the constructor without using the new keyword.

Constructors with higher scope

In order to solve the risk of forgetting to use the new keyword, we can judge the value of this Create a higher scope constructor.

function Book(name) { 
    if (!(this instanceof Book)) { 

        // the constructor was called without "new".        return new Book(name);
    } 
}

After adding this code, we can use the constructor 'unscrupulously'.

function Book(name, year) { 
    if (!(this instanceof Book)) { 
        return new Book(name, year);
    }    this.name = name;    this.year = year;
}var person1 = new Book("js book", 2014);var person2 = Book("js book", 2014);
console.log(person1 instanceof Book);    // => trueconsole.log(person2 instanceof Book);    // => true

很多内建的构造器都是这么做的。通过判断this是否为当前类型。如果程序员忘记加new关键字，那么我们就返回一个通过new出来的对象。

结论

JavaScript没有类这种说法（但是它可以使面向对象的），所以对于习惯了使用类的程序员来说是种困惑。当然JavaScript的构造函数跟普通函数没什么区别，只是通过new关键字生成出来而已。如果我们需要”印饼干”的话，它就非常有用了。

相关推荐：

JavaScript构造器模式实例分析

什么是构造器？引用类型是什么？

有关查询构造器的文章推荐7篇

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