Home > Article > Web Front-end > 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.
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!