JS에서 NEW의 구현 원리와 재작성 방법-JS 튜토리얼-php.cn

JS에서 NEW의 구현 원리와 재작성 방법

php中世界最好的语言

풀어 주다： 2020-02-27 14:19:05

앞으로

3453명이 탐색했습니다.

JavaScript의 new 연산자는 사용자 정의 객체 유형의 인스턴스 또는 생성자를 사용하여 내장 객체의 인스턴스를 생성합니다. 이번 글에서는 NEW의 구현 원리와 재작성 방법을 소개하겠습니다.

JS에서 NEW의 구현 원리와 재작성 방법

new의 경우 다음과 같이 클래스 및 인스턴스와 확실히 연결됩니다.

function Func() {
    let x = 100;    
    this.num = x +}
let f = new Func();

로그인 후 복사

위 코드에서는 먼저 객체 지향 용어로 함수의 인스턴스를 만듭니다. 함수 클래스. 이 함수를 직접 실행하면 일반 함수입니다. new로 실행하면 이 함수를 사용자 정의 클래스라고 합니다.

일반적인 함수 실행이라면 다음과 같은 여러 작업을 수행합니다.

새로운 실행 컨텍스트 EC(Execution Context 실행 환경) 형성
AO(Activation Object) 변수 객체 형성, 인수 초기화 및 형식적인 매개변수 할당
스코프 체인 초기화
코드 실행

새로운 함수 실행이라면 일반적인 함수 실행 측면과 고유한 기능을 모두 갖습니다.

기본적으로 객체는 생성되며 이 객체는 현재 클래스의 인스턴스입니다.
새로 생성된 인스턴스를 가리키도록 this 포인터를 선언합니다.
return을 작성하든 안 하든 새로 생성된 인스턴스는 Return이 됩니다. 여기에는 특별한 점이 있습니다. 사용자가 직접 콘텐츠를 반환하고 반환된 값이 참조 유형 값인 경우 기본 반환 인스턴스를 덮어쓰며 반환된 값은 더 이상 class of the class

console.log(f);  //=>{num:200}
//f是Func这个类的实例 
//相当于给创建的实例对象新增一个num的属性 obj.num=200 （因为具备普通函数执行的一面，所以只有this.xxx=xxx才和创建的实例有关系，此案例中的x只是AO中的私有变量）

console.log(f instanceof Func); //=>TRUE instanceof用来检测某一个实例是否属于这个类

로그인 후 복사

new가 나올 때마다 새로운 인스턴스 객체가 나옵니다

console.log(f === f2); //=>false

로그인 후 복사

이제 new가 무엇인지 알았으니 new를 다시 시도해 봅시다:

/* 
 * 内置NEW的实现原理 
 * @params
 *    Func：操作的那个类
 *    ARGS：NEW类的时候传递的实参集合
 * @return
 *    实例或者自己返回的对象
 */
function _new(Func, ...args) {
    //默认创建一个实例对象（而且是属于当前这个类的一个实例）
    let obj = {};

    //也会把类当做普通函数执行
    //执行的时候要保证函数中的this指向创建的实例
    let result = Func.call(obj, ...args);

    //若客户自己返回引用值，则以自己返回的为主，否则返回创建的实例
    if ((result !== null && typeof result === "object") || (typeof result === "function")) {
        return result;
    }
    return obj;
}

로그인 후 복사

해보자:

let f3 = _new(Func);
console.log(f3); // =>{num: 200}

로그인 후 복사

계속 테스트해 보겠습니다:

Func.prototype.log = function () {
    console.log(&#39;ok&#39;);
}

let f4 = _new(Func);
f4.log(); //=>Uncaught TypeError: f4.log is not a function

로그인 후 복사

즉, Func 프로토타입의 메서드는 인스턴스에서 호출할 수 없습니다.

/* 
 * 内置NEW的实现原理 
 * @params
 *    Func：操作的那个类
 *    ARGS：NEW类的时候传递的实参集合
 * @return
 *    实例或者自己返回的对象
 */
function _new(Func, ...args) {
    //默认创建一个实例对象（而且是属于当前这个类的一个实例）
    // let obj = {};
    let obj = Object.create(Func.prototype);

    //也会把类当做普通函数执行
    //执行的时候要保证函数中的this指向创建的实例
    let result = Func.call(obj, ...args);

    //若客户自己返回引用值，则以自己返回的为主，否则返回创建的实例
    if ((result !== null && typeof result === "object") || (typeof result === "function")) {
        return result;
    }
    return obj;
}

로그인 후 복사

이것으로 충분합니다.