Was ist die Verwendung von new in Javascript?-Front-End-Fragen und Antworten-php.cn

Was ist die Verwendung von new in Javascript?

WBOY

Freigeben： 2022-01-28 16:24:47

Original

4575 Leute haben es durchsucht

In JavaScript wird der neue Operator verwendet, um eine benutzerdefinierte Objektinstanz zu erstellen, oder eine Instanz des integrierten Objekts eines Konstruktors kann auf die Eigenschaften in der Person des Konstruktors zugreifen.

Was ist die Verwendung von new in Javascript?

Die Betriebsumgebung dieses Tutorials: Windows 10-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Was ist die Verwendung von new in Javascript?

Verwendung von new

new: Der new-Operator wird verwendet, um eine benutzerdefinierte Objektinstanz oder eine Instanz eines im Konstruktor integrierten Objekts zu erstellen. Was bedeutet es? Es ist etwas schwer auszusprechen. Schauen wir uns das zuerst an.

Was geschah, als

new F()

Die erste Version

Die Kastanie ist da:

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"}

Nach dem Login kopieren

An dieser Kastanie können wir erkennen, dass new die folgenden Fähigkeiten hat:

1. Die von new erstellte Instanz Greifen Sie auf die Eigenschaften im Konstruktor zu. Person

2. Die von new erstellte Instanz kann im Konstruktor auf das neu erstellte Objekt zugreifen Fähigkeiten von New First:

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

Nach dem Login kopieren

Werfen wir einen Blick auf die Wirkung

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"}

Nach dem Login kopieren

Es scheint den Fähigkeiten von New ähnlich zu sein. Aber wie sieht es aus, wenn im Konstruktor ein Rückgabewert vorhanden ist? Schauen Sie sich das noch einmal an:

// 当返回值是对象时：
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"}

Nach dem Login kopieren

Es ist ersichtlich, dass das von new erstellte Instanzobjekt das zurückgegebene Ergebnis ist, wenn der Rückgabewert des Konstruktors ein Objekt ist durch den Konstruktor. Wenn der Rückgabewert ein gewöhnliches Objekt ist, sehen Sie sich Folgendes an:

// 当返回值是普通值时：
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"}

Nach dem Login kopieren

Wenn der Rückgabewert ein gewöhnliches Objekt ist, ist das Ergebnis dasselbe, als ob es keinen Rückgabewert gibt.

Verwandte Empfehlungen:

Javascript-Lern-Tutorial

Das obige ist der detaillierte Inhalt vonWas ist die Verwendung von new in Javascript?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!