A brief discussion of JavaScript constructors-JS Tutorial-php.cn

A brief discussion of JavaScript constructors

PHPz

Release： 2017-04-04 10:26:06

Original

1677 people have browsed it

When it comes to "Construction Function", most people will think of the concept of Java classes. JavaScript also has constructors, whose usage syntax is similar to that of Java or The syntax for creating objects is similar in other class-based languages.

JavaScript constructor is a special type of function, characterized by:

Use the <a href="http://www.php.cn/wiki/165.html" target="_blank">new</a> keyword to call the function
The first letter of the function is capitalized

During the interview, I often ask two questions about the constructor:

Does the first letter of the constructor have to be capitalized?
Will there be an error if I run the constructor directly without using the new keyword? If no error occurs, what is the difference between calling the constructor with new and without new?

Basically 100% of the students can answer question 1 correctly (both uppercase and lowercase), and 20% of students will answer question 2 incorrectly, especially the second question.

So, let us see what role newoperator plays?

1. Use the new operator to call the function

Example:

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = new Person('nicole');
person1.say(); // "I am nicole"

Copy after login

Use new to call the constructor, the following changes will occur inside the function:

Create a this variable, which points to an empty object. And the object inherits the prototype of the function;
properties and methods are added to the object referenced by this;
Implicitly return this object (if no other object is returned explicitly)

Use a pseudo program to demonstrate the above changes:

function Person(name){
  // 创建this变量，指向空对象
  var this = {}; 
  // 属性和方法被加入到this引用的对象中
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  // 返回this对象
  return this;
}

Copy after login

It can be seen that the biggest feature of calling the constructor with

new is that the this object points to the object generated by the constructor, so person1 .say()will return string: "I am nicole".

小贴士

如果指定了返回对象，那么，"this"对象可能被丢失。

function Person(name){
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
  var that = {};
  that.name = "It is that!";
  return that;
}

var person1 = new Person('nicole');
person1.name; // "It is that!"

Copy after login

2. Call the function directly

If you call the function directly, then

this object points to window, and no object will be returned by default (Unless the return value is explicitly declared).

Let’s take the

Person function as an example and directly call the Person function:

var person1 = Person('nicole');
person1; // undefined
window.name; // nicole

Copy after login

It can be seen that the result of directly calling the constructor is not what we want need.

3. Summary

In order to prevent calling the constructor because you forget to use the

new keyword, you can add some judgment conditions to force the call to the new keyword , the code is as follows:

function Person(name){
  if (!(this instanceof Person)) {
    return new Person(name);
  }
  this.name = name;
  this.say = function(){
    return "I am " + this.name;
  }
}

var person1 = Person('nicole');
console.log(person1.say()); // I am nicole
var person2 = new Person('lisa');
console.log(person2.say()); // I am lisa

Copy after login

The above is the detailed content of A brief discussion of JavaScript constructors. For more information, please follow other related articles on the PHP Chinese website!