手写：javascript中的关键字new

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了手写：javascript中的关键字new，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3741字，纯文字阅读大概需要6分钟。

内容图文

简单介绍一下new

new再熟悉不过了，new后面跟着构造函数，可以创建对象，这个对象的原型指向构造函数的原型对象，说起来可能有点绕，直接看代码吧

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

let person1 = new Person("张三", 22);

console.log(person1.__proto__ === Person.prototype); // true
console.log(person1 instanceof Person); // true

而new后面的构造函数，也可以这样调用

let person2 = new Person;

其实这样写就等同于,不传任何参数调用构造函数

let person2 = new Person();

打印person2可以看到

Person { name: undefined, age: undefined }

一般情况下，构造函数是不定义返回值的，那我们试一试，如果构造函数定义返回值，会怎么样,首先，返回一个字符串

function Person(name, age){
    this.name = name;
    this.age = age;

    return "person"
}

let person1 = new Person("张三", 22);
let person2 = new Person;

console.log(person1); // Person { name: '张三', age: 22 }
console.log(person2); // Person { name: undefined, age: undefined }
console.log(person1.__proto__ === Person.prototype); // true
console.log(person1 instanceof Person) // true

看来构造函数返回字符串没有影响，那返回一个对象呢

function Person(name, age){
    this.name = name;
    this.age = age;

    return {
        id : "person"
    }
}

let person1 = new Person("张三", 22);
let person2 = new Person;

console.log(person1); // { id: 'person' }
console.log(person2); // { id: 'person' }
console.log(person1.__proto__ === Person.prototype); // false
console.log(person1 instanceof Person) // false

可以看到，如果返回一个对象，那么通过new关键字创建的对象则为构造返回的值，且也不继承于构造的原型对象

手写

了解的差不多了，开始手写
首先定义一个函数名为myNew,参数接收一个function，也就是构造函数,

function myNew(Constructor){
    if(typeof Constructor !== "function"){
        throw "参数Constructor必须是方法（function）"
    }
}

ok，紧接着需要创建一个新的对象，并且这个对象的原型指向的是构造函数的原型对象
所以

function myNew(Constructor){
    if(typeof Constructor !== "function"){
        throw "参数Constructor必须是方法（function）"
    }
    let obj = {};
    obj.__proto__ = Constructor.prototype;
}

接着，因为执行构造函数的是，需要传参数，并且在构造函数内部会为this赋值，所以我们需要执行构造函数，并且把构造函数内的上下文指向到obj

function myNew(Constructor){
    if(typeof Constructor !== "function"){
        throw "参数Constructor必须是方法（function）"
    }
    let obj = {};
    obj.__proto__ = Constructor.prototype;
    // 获取参数
    let params = Array.from(arguments);
    // 把参数第一位,也就是构造函数移除
    params.shift();
    // 执行构造函数，并且吧上下文只设置为obj
    Constructor.apply(obj, params);

    return obj
}

但是我们需要前面提到了，有时候构造函数是可能有返回值的，所以最终代码为

最终源码

function myNew(Constructor){
    if(typeof Constructor !== "function"){
        throw "参数Constructor必须是方法（function）"
    }
    let obj = {};
    obj.__proto__ = Constructor.prototype;
    // 获取参数
    let params = Array.from(arguments);
    // 把参数第一位,也就是构造函数移除
    params.shift();
    // 执行构造函数，并且吧上下文只设置为obj
    let result = Constructor.apply(obj, params);

    // 判断构造函数执行返回是不是object，是的话返回这个对象
    return typeof result === "object" ? result : obj
}

我们以之前的例子来验证一下

function Person(name, age){
    this.name = name;
    this.age = age;

    return "person"
}

let person1 = myNew(Person, "张三", 22);
let person2 = myNew(Person);

console.log(person1); // Person { name: '张三', age: 22 }
console.log(person2); // Person { name: undefined, age: undefined }
console.log(person1.__proto__ === Person.prototype); // true
console.log(person1 instanceof Person) // true

构造有返回值的时候

function Person(name, age){
    this.name = name;
    this.age = age;

    return {
        id : "person"
    }
}

let person1 = myNew(Person, "张三", 22);
let person2 = myNew(Person);

console.log(person1); // { id: 'person' }
console.log(person2); // { id: 'person' }
console.log(person1.__proto__ === Person.prototype); // false
console.log(person1 instanceof Person) // false

与前面完全一致

内容总结

以上是互联网集市为您收集整理的手写：javascript中的关键字new全部内容，希望文章能够帮你解决手写：javascript中的关键字new所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端