[Interview question] What does js do when a new object is created?

Dachang interview questions share interview question bank

Front-end and back-end interview question banks (necessary for interviews) Recommended: ★★★★★

Address: front-end interview question bank   web front-end interview question bank VS java back-end interview question bank Daquan

In JavaScript, an instance object can be created through the new operator, and this instance object inherits the properties and methods of the original object. Therefore, the significance of new is that it implements inheritance in JavaScript, not just instantiating an object.

The role of new

Let's first understand the function through an example  new . The example is as follows:

function Person(name) {
  this.name = name
}
Person.prototype.sayName = function () {
  console.log(this.name)
}
const t = new Person('小明')
console.log(t.name)  // 小明
t.sayName()  // 小明
复制代码

From the above example we can draw the following conclusions:

• newPerson The instance object created by  the constructor  can access the properties in the constructor.

• newPerson The instance created   through the constructor  can access the properties in the prototype chain of the constructor, that is to say, through new the operator, the instance and the constructor are connected through the prototype chain.

The constructor  Person does not specify  return any value (returns by default  undefined), what happens if we let it return a value?

function Person(name) {
  this.name = name
  return 1
}
const t = new Person('小明')
console.log(t.name)  // 小明
复制代码

It is returned in the constructor in the above example  1, but this return value is not useful, and the result is exactly the same as the previous example. We can draw another conclusion:

If the constructor returns a primitive value, then this return value is meaningless.

Let's try again what happens with the returned object:

function Person(name) {
  this.name = name
  return {age: 23}
}
const t = new Person('小明')
console.log(t)  // { age: 23 }
console.log(t.name)  // undefined
复制代码

Through the above example, we can find that when the return value is an object, the return value will be returned normally. Again we came to a conclusion:

If the return value of the constructor is an object, then this return value will be used normally.

Summary: These two examples tell us that constructors should try not to return values. Since returning a primitive value has no effect, returning an object renders the new operator useless.

implement new

First of all, we need to be clear about  new what js does when using operators:

1. js internally creates an object
2. This object can access the properties on the prototype of the constructor, so you need to connect the object to the constructor
3. The this inside the constructor is assigned to this new object (that is, this points to the new object)
4. The original value returned needs to be ignored, and the returned object needs to be processed normally

After knowing the steps, we can start to realize the function of new:

function _new(fn, ...args) {
  const newObj = Object.create(fn.prototype);
  const value = fn.apply(newObj, args);
  return value instanceof Object ? value : newObj;
}
复制代码

The test example is as follows:

function Person(name) {
  this.name = name;
}
Person.prototype.sayName = function () {
  console.log(this.name);
};

const t = _new(Person, "小明");
console.log(t.name);  // 小明
t.sayName();  // 小明
复制代码

The above is about the role of the new operator in JavaScript, and how to implement a new operator.

Dachang interview questions share interview question bank

Front-end and back-end interview question banks (necessary for interviews) Recommended: ★★★★★

Address: front-end interview question bank   web front-end interview question bank VS java back-end interview question bank Daquan