JavaScript는 새 키워드 구현을 어떻게 시뮬레이션합니까? (코드 포함)-JS 튜토리얼-php.cn

JavaScript는 새 키워드 구현을 어떻게 시뮬레이션합니까? (코드 포함)

不言

풀어 주다： 2018-11-12 16:34:26

앞으로

2741명이 탐색했습니다.

이 기사의 내용은 JavaScript가 새 키워드 구현을 어떻게 시뮬레이션하는지에 관한 것입니다. (코드 첨부) 특정 참고 가치가 있습니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

최근 일이 너무 바빠서 거의 2주 동안 블로그를 업데이트하지 못했습니다. 작업 내용이 많이 좋아졌지만 항상 해야 할 일이 남아 있다는 느낌이 듭니다. 항상 머리를 묻은 채로 걸어야 하고, 가끔은 고개를 들어야 한다는 것, 우선 현재 상황이 기대에 미치지 못하는지 살펴보기로 해서 그래도 글을 쓰기 위해 스타벅스를 선택합니다. 주말에 한마디.

오늘은 JavaScript에서 새 키워드의 시뮬레이션 구현을 기록합니다. 특정 언어 동작을 시뮬레이션하기 전에 연습을 통해 마침내 지식 포인트를 더 잘 익힐 수 있습니다. 모든 질문은 응시자의 지식 깊이를 테스트할 목적으로 시뮬레이션을 구현한 이유에 대해 묻습니다.

function Person(name) {
    this.name = name;
}
var person = new Person('jayChou');
typeof(person)  // "object"
person instanceof Person  // true
person.__proto__ === Person.prototype  // true
person.constructor === Person  //  true
person.constructor === Person.prototype.constructor  // true

로그인 후 복사

위에서 볼 수 있듯이:

new는 생성자 함수의 인스턴스인 새 객체를 생성하고 반환합니다.
객체 인스턴스의 생성자 속성은 실제로 생성자입니다. 생성자의 프로토타입 객체 속성
객체 인스턴스의 __proto__는 생성자의 프로토타입 객체와 연결됩니다

위 내용은 JavaScript의 프로토타입 객체 및 프로토타입 체인에 대한 지식에 관한 것입니다. 충분히 명확하지 않으면 내 이전 블로그를 확인할 수 있습니다.

new는 JS의 키워드이므로 키워드를 구현할 수 없지만 함수를 통해 new 키워드의 동작을 시뮬레이션할 수 있습니다.

1. 기본 아이디어

새 키워드가 무엇인지 알면 시뮬레이션 구현에 대한 기본 아이디어가 있습니다.

/**
 * 模拟实现 JavaScript new 操作符
 * @param  {Function} constructor [构造函数]
 * @return {Object|Function|Regex|Date|Error}      [返回结果]
 */
function mockNew() {
    // 创建一个空对象
    let resultObj = new Object();

    // 取传入的第一个参数，即构造函数，并删除第一个参数。
    let constructor =  Array.prototype.shift.call(arguments);
    
    // 类型判断，错误处理
    if(typeof constructor !== "function") {
        throw("构造函数第一个参数应为函数");
    }
    
    // 绑定 constructor 属性
    resultObj.constructor = constructor;
    
    // 关联 __proto__ 到 constructor.prototype
    resultObj.__proto__ = constructor.prototype;
    
    // 将构造函数的 this 指向返回的对象
    constructor.apply(resultObj, arguments);
    
    // 返回对象
    return resultObj;
}

function Person(name) {
    this.name = name;
}


var person = mockNew(Person, "jayChou");

console.log(person);

// constructor: ƒ Person(name)
// name: "jayChou"
// __proto__: Object

로그인 후 복사

기본 생각이 맞습니다! 그래서 우리는 새로운 키워드에 대한 예비 시뮬레이션을 완료했습니다. 친구들이 직접 입력하여 코드의 각 문장을 이해할 수 있는지 확인할 수 있습니다.

2. 반환 값 처리

생성자도 다양한 유형의 반환 값을 갖는 함수입니다. 때로는 생성자가 지정된 개체 콘텐츠를 반환하므로 이 부분을 처리해야 합니다.

/**
 * 模拟实现 JavaScript new 操作符
 * @param  {Function} constructor [构造函数]
 * @return {Object|Function|Regex|Date|Error}      [返回结果]
 */
function mockNew() {
    // 创建一个空对象
    let emptyObj = new Object();

    // 取传入的第一个参数，即构造函数，并删除第一个参数。
    // 关于为什么要用 Array.prototype.shift.call 的形式，见之前的博客文章 《JavaScript之arguments》
    let constructor =  Array.prototype.shift.call(arguments);
    
    // 类型判断，错误处理
    if(typeof constructor !== "function") {
        throw("构造函数第一个参数应为函数");
    }
    
    // 绑定 constructor 属性
    emptyObj.constructor = constructor;
    
    // 关联 __proto__ 到 constructor.prototype
    emptyObj.__proto__ = constructor.prototype;
    
    // 将构造函数的 this 指向返回的对象
    let resultObj = constructor.apply(emptyObj, arguments);
    
    // 返回类型判断, 如果是对象，则返回构造函数返回的对象
    if (typeof resultObj === "object") {
        return resultObj
    }
    
    // 返回对象
    return emptyObj;
}

function Person(name) {
    this.name = name;
    return {
        name: this.name,
        age: 40
    }
}


var person = mockNew(Person, "jayChou");

console.log(person);

// {name: "jayChou", age: 40}
// age: 40
// name: "jayChou"
// __proto__: Object

로그인 후 복사

반환 값이 사용자 정의 개체를 반환하면 사용자 정의 개체를 반환하는 새 함수를 시뮬레이션합니다.