자바스크립트에서 new의 사용법은 무엇입니까?-프런트엔드 Q&A-php.cn

자바스크립트에서 new의 사용법은 무엇입니까?

WBOY

풀어 주다： 2022-01-28 16:24:47

원래의

4573명이 탐색했습니다.

JavaScript에서 new 연산자는 사용자 정의 객체 인스턴스를 생성하는 데 사용됩니다. 또는 생성자의 내장 객체 인스턴스는 생성자 Person의 속성에 액세스할 수 있습니다.

자바스크립트에서 new의 사용법은 무엇입니까?

이 튜토리얼의 운영 환경: Windows 10 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

javascript에서 new의 사용법은 무엇입니까?

new의 사용

new: new 연산자는 사용자 정의 개체 인스턴스 또는 생성자 내장 개체의 인스턴스를 만드는 데 사용됩니다. 무슨 뜻인가요? 발음이 좀 어렵네요. 먼저 살펴보겠습니다.

new F()

첫 번째 버전

The chestnut은 여기에 있습니다.

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

로그인 후 복사

이 chestnut에서 new가 다음과 같은 기능을 가지고 있음을 알 수 있습니다.

1. 생성자 Person의 속성에 액세스합니다.

2. new로 생성된 인스턴스는 생성자 프로토타입의 속성에 액세스할 수 있습니다.

3. New는 생성자에서 이를 새로 생성된 객체에 바인딩할 수 있습니다. 뉴퍼스트의 능력 :

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 학습 튜토리얼

위 내용은 자바스크립트에서 new의 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!