What is the usage of new in javascript

In JavaScript, the new operator is used to create a custom object instance, or an instance of an object built into the constructor; the instance created by new can access the properties in the constructor Person.

The operating environment of this tutorial: Windows 10 system, JavaScript version 1.8.5, Dell G3 computer.

What is the usage of new in javascript

The purpose of new

new: The new operator is used to create a custom object instance, or a constructor built-in object Example. What does it mean? It’s a bit hard to pronounce. Let’s take a look at it first.

What happens when new F()

First version

The chestnut is here:

function Person(name, age) {
    this.name = name
    this.age = age
    console.log(this) // Person{name: "xuedinge", age: "20"}
}
Person.prototype.have = "cat"
const person = new Person("xuedinge", "20")
console.log(person.name) // xuedinge
console.log(person.have) // cat
console.log(person) // Person{name: "xuedinge", age: "20"}

From this chestnut, we can see , new has the following capabilities:

1. The instance created by new can access the properties in the constructor Person;

2. The instance created by new can access the properties on the constructor prototype;

3. new can bind this in the constructor to the newly created object;

Then we will first implement these three capabilities of new:

function fakeNew(Fn) {
    // 创建一个空对象
    let obj = new Object()
    // 将新对象的原型指针指向构造函数的原型
    obj.__proto__ = Fn.prototype
    // 处理除了 Fn 以外的剩余参数
    Fn.apply(obj, [].slice.call(arguments, 1))
    return obj
}

Look at the effect

function Person(name, age) {
    this.name = name
    this.age = age
    console.log(this) // Person {name: "xuedinge", age: "20"}
}
Person.prototype.have = "cat"
function fakeNew(Fn) {
    // 创建一个空对象
    let obj = new Object()
    // 将新对象的原型指针指向构造函数的原型
    obj.__proto__ = Fn.prototype
    // 处理除了 Fn 以外的剩余参数
    Fn.apply(obj, [].slice.call(arguments, 1))
    return obj
}
const newPerson = fakeNew(Person, "xuedinge", "20")
console.log(newPerson.name) // xuedinge
console.log(newPerson.have) // 20
console.log(newPerson) // Person {name: "xuedinge", age: "20"}

It seems to be similar to new’s ability. But what happens when there is a return value in the constructor? Let’s look at this again:

// 当返回值是对象时：
function Person(name, age) {
    this.name = name
    this.age = age
    console.log(this) // Person {name: "xuedinge", age: "20"}
    return {
      car: "leikesasi"
    }
}
Person.prototype.have = "cat"
const person = new Person("xuedinge", "20")
console.log(person.name) // undefined
console.log(person.have) // undefined
console.log(person.car) // leikesasi
console.log(person) // {car: "leikesasi"}

It can be seen that when the return value of the constructor is an object, the instance object created by new is the return value of the constructor. The result, when the return value is an ordinary object, look at this:

// 当返回值是普通值时：
unction Person(name, age) {
    this.name = name
    this.age = age
    console.log(this) // Person{name: "xuedinge", age: "20"}
    return "leikesasi"
}
Person.prototype.have = "cat"
const person = new Person("xuedinge", "20")
console.log(person.name) // xuedinge
console.log(person.have) // cat
console.log(person) // Person{name: "xuedinge", age: "20"}

When the return value is an ordinary object, the result is the same as when there is no return value.

Related recommendations: javascript learning tutorial

The above is the detailed content of What is the usage of new in javascript. For more information, please follow other related articles on the PHP Chinese website!