JavaScript가 새로운 기능을 제어합니다.

VUE3.0을 빠르게 시작하는 방법: 학습

서문

new 기능은 무엇입니까?

new 연산자는 사용자 정의 개체 유형의 인스턴스나 생성자가 있는 내장 개체 유형 중 하나를 만듭니다.

정의만 보면 여전히 다소 모호합니다. JavaScript 에서 new 의 기능을 이해하기 위해 구체적인 예를 살펴보겠습니다.

예를 들어

// 실생활에서 살을 뺄 수는 없지만 날씬한 몸매를 유지해야 합니다. 온라인 function Thin_User(이름, 나이) {
    this.name = 이름;
    this.나이 = 나이;
}

Thin_User.prototype.eatToMuch = 함수() {
    // 망상을 하고 눈물을 흘린다. console.log('나 너무 많이 먹는데 너무 말랐어!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name) // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // 참
// 엄청 먹지만 엄청 말랐어요!!!
xiaobao.eatToMuch();

• 생성자 Thin_User
• Thin_User.prototype 의 속성에 액세스하고,

이를 보다 간단하게 설명하며, new 다음 작업을 수행

xiaobao 알 수 있습니다

• . 객체의 __proto__->Thin_User.prototype
• 생성자를 실행하고 this 새 객체에 지정하여
• 새 객체를 반환합니다.

보충 지침:

new 는 키워드이므로 배열을 시뮬레이션하는 고차 방법처럼 재정의할 수 없으므로 다음과 같이 작성합니다. new 효과를 시뮬레이션하는 createObject 함수. 사용법은 다음과 같습니다:

function Thin_User(이름, 나이) {}

const u1 = 새로운 Thin_user(...)
const u2 = createObject(Thin_User, ...a)

예비 시뮬레이션

위 분석에 따르면 createObject 작성하는 일반적인 단계는 다음과 같습니다.

• 새 개체 obj 만들고
• obj.__proto__->constructor.prototype 설정합니다. ( 그러나 JavaScript는 권장하지 않습니다. __proto__ 속성을 직접 수정하면 프로토타입을 구체적으로 수정하기 위해 setPrototypeOf 메서드가 제공됩니다 . )
• constructor.call/apply(obj, ...) 사용하여 obj 에 속성을 추가하고
• obj

__proto__和prototype 반환합니다. JavaScript를 보면 완전한 이해가 가능합니다. 프로토타입 및 프로토타입 체인.
call/apply , 호출 및 적용에 대한 JavaScript 튜토리얼을 볼 수 있습니다.

이를 학습한 후 코드의 첫 번째 버전을 작성할 수 있습니다.

function createObject(Con) {
    //새 객체 obj 생성
    // var obj = {};일 수도 있습니다. var obj = Object.create(null);

    // obj.__proto__ 변환 -> 생성자 프로토타입 // (권장되지 않음) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //생성자 실행 Con.apply(obj, [].slice.call(arguments, 1));

    // 새 객체를 반환합니다 return obj;}

반환 값 효과

우리 모두 알고 있듯이 함수에는 반환 값이 있으므로 생성자에 반환 값이 있는 경우 new 를 최종 실행한 후 반환되는 결과는 무엇입니까?

반환 값은 기본 유형입니다.

생성자 반환 값이 기본 유형이라고 가정하면 최종 반환 결과를 살펴보겠습니다.

function Thin_User(name, age) {
    this.name = 이름;
    this.나이 = 나이;
    return '나는 영원히 마른 상태를 유지할 것이다';
}

Thin_User.prototype.eatToMuch = 함수() {
    console.log('나 너무 많이 먹는데 너무 말랐어!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
console.log(xiaobao.name) // zcxiaobao
console.log(xiaobao.age); // 18
console.log(xiaobao.isThin); // 참
// 엄청 먹지만 엄청 말랐어요!!!
xiaobao.eatToMuch();

최종 반환 결과에 간섭이 있는 것 같습니다. 생성자가 반환 값을 처리하지 않습니까?

걱정하지 마세요. 반환 값이 객체인 상황을 계속 테스트해 보겠습니다.

반환 값은 개체

함수 Thin_User(name, age)입니다.
    this.name = 이름;
    this.나이 = 나이;
    반품 {
        이름: 이름,
        나이: 나이 * 10,
        뚱뚱하다: 사실
    }
}

Thin_User.prototype.eatToMuch = 함수() {
    // 망상을 하고 눈물을 흘린다. console.log('나 너무 많이 먹는데 너무 말랐어!!!');
}

Thin_User.prototype.isThin = true;

const xiaobao = new Thin_User('zcxiaobao', 18);
// 오류: xiaobao.eatToMuch는 함수가 아닙니다.
xiaobao.eatToMuch();

eatToMuch 실행하면 콘솔에서 직접 오류가 보고되고 현재 함수가 없으므로 xiaobao 개체를 인쇄했습니다.

xiaobao 객체의 age 변경되고, fat 속성이 추가된 것으로 확인되었는데, 이는 생성자의 반환 값과 정확히 동일합니다.

이 두 예제를 읽고 나면 기본적으로 생성자가 값을 반환하는 상황을 명확하게 알 수 있습니다. 생성자가 객체를 반환하면 객체가 직접 반환됩니다.

최종 시뮬레이션

함수 createObject(Con) {
    //새 객체 obj 생성
    // var obj = {};일 수도 있습니다. var obj = Object.create(null);

    // obj.__proto__ 변환 -> 생성자 프로토타입 // (권장되지 않음) obj.__proto__ = Con.prototype
    Object.setPrototypeOf(obj, Con.prototype);

    //생성자를 실행하고 생성자 반환 값을 받아들입니다. const ret = Con.apply(obj, [].slice.call(arguments, 1));

    // 생성자의 반환 값이 객체이면 객체를 직접 반환합니다. // 그렇지 않으면 obj를 반환합니다.
    return typeof(ret) === '객체' ret: obj;}