JavaScriptでのnewの使い方は何ですか-フロントエンドQ&A-php.cn

JavaScriptでのnewの使い方は何ですか

WBOY

リリース： 2022-01-28 16:24:47

オリジナル

4516 人が閲覧しました

JavaScript では、new 演算子はカスタムオブジェクトインスタンス、またはコンストラクターに組み込まれたオブジェクトのインスタンスを作成するために使用されます。new によって作成されたインスタンスは、コンストラクター Person のプロパティにアクセスできます。

JavaScriptでのnewの使い方は何ですか

このチュートリアルの動作環境: Windows 10 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript での new の使用法とは何ですか

new の目的

new: new 演算子は、カスタムオブジェクトインスタンス、または組み込みコンストラクターを作成するために使用されます。オブジェクトの例。どういう意味ですか?ちょっと発音が難しいので、まずは見てみましょう。

新しい F() の場合に何が起こるか

最初のバージョン

栗はここにあります:

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

ログイン後にコピー

この栗から、新しいものにはが含まれていることがわかります。次の機能:

1. new によって作成されたインスタンスは、コンストラクター Person のプロパティにアクセスできます;

2. new によって作成されたインスタンスは、コンストラクタープロトタイプのプロパティにアクセスできます;

3. new は、コンストラクター内でこれを新しく作成されたオブジェクトにバインドできます;

次に、最初に new のこれら 3 つの機能を実装します:

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

ログイン後にコピー

効果を確認してください

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

ログイン後にコピー

ニューの能力と似ているようです。しかし、コンストラクターに戻り値がある場合はどうなるのでしょうか? もう一度見てみましょう:

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

ログイン後にコピー

コンストラクターの戻り値がオブジェクトの場合、new によって作成されるインスタンスオブジェクトはコンストラクタの戻り値戻り値が通常のオブジェクトの場合の結果を見てください:

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

ログイン後にコピー

戻り値が通常のオブジェクトの場合、戻り値がない場合と同じ結果になります。

関連する推奨事項: JavaScript 学習チュートリアル

以上がJavaScriptでのnewの使い方は何ですかの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。