Comment JavaScript simule-t-il l'implémentation du nouveau mot-clé ? (avec code)

Le contenu de cet article explique comment simuler le nouveau mot-clé en JavaScript ? (Le code est ci-joint), qui a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. J'espère qu'il vous sera utile.

J'ai été trop occupé par le travail ces derniers temps et je n'ai pas mis à jour mon blog depuis près de deux semaines. J'ai toujours l'impression qu'il y a certaines choses qui m'attendent. Bien que le contenu du travail m'ait grandement amélioré, je le fais. J'ai toujours l'impression que je continue de marcher la tête enfouie. Parfois, j'ai besoin de lever la tête pour voir si ma situation actuelle ne correspond pas à mes attentes, alors je choisis toujours d'aller chez Starbucks pour écrire quelques mots le week-end.

Aujourd'hui, nous enregistrons l'implémentation de simulation du nouveau mot-clé en JavaScript.Avant de simuler un certain comportement de langage, nous devrions réfléchir à ce que fait ce comportement, grâce à la pratique, nous pouvons enfin mieux maîtriser les points de connaissance. pourquoi de nombreuses questions d'entretien portent sur les implémentations de simulation, afin d'examiner la profondeur des connaissances du candidat.

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

Comme le montre ce qui précède :

1. new crée et renvoie un nouvel objet, qui est une instance du constructeur

2. L'attribut constructeur de l'instance d'objet est en fait l'attribut constructeur de l'objet prototype du constructeur

3. Le __proto__ de l'instance d'objet est associé à l'objet prototype du constructeur

Le contenu ci-dessus concerne la connaissance des objets prototypes et des chaînes de prototypes en JavaScript. Les étudiants qui ne sont pas assez clairs peuvent consulter mon blog précédent.

Puisque new est un mot-clé de JS, nous ne pouvons pas implémenter le mot-clé, mais nous pouvons simuler le comportement du nouveau mot-clé via des fonctions.

1. Idée de base

Si nous savons ce que fait le nouveau mot-clé, alors nous avons l'idée de base pour la mise en œuvre de la simulation.

/**
 * 模拟实现 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

L'idée de base est correcte ! Nous avons donc terminé la simulation préliminaire du nouveau mot-clé. Les amis peuvent le taper eux-mêmes pour voir s'ils peuvent comprendre chaque phrase de code.

2. Traitement des valeurs de retour

Les constructeurs sont également des fonctions, avec différents types de valeurs de retour. Parfois, le constructeur renvoie le contenu de l'objet spécifié, cette partie doit donc être traitée.

/**
 * 模拟实现 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

Lorsque la valeur de retour renvoie un objet personnalisé, la nouvelle fonction simulée renvoie l'objet personnalisé.

Résumé

La signification du mot-clé JavaScript new est de permettre à une fonction ordinaire de générer un nouvel objet et d'associer le __proto__ de l'instance d'objet à l'objet prototype de la fonction.

Certaines parties de cet article nécessitent quelques connaissances préalables, mais dans l'ensemble, il est relativement facile à comprendre.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!