美文网首页
一篇就够-JS的new实现

一篇就够-JS的new实现

作者: johe_jianshu | 来源:发表于2020-03-24 19:18 被阅读0次

new的作用

function Fruit(name){
    this.name = name;
}
Fruit.prototype.show = function(){
    console.log(this.name);
}

var banana = new Fruit('banana');
//输出Fruit.protoype
console.log(Object.getPrototypeOf(banana));
//输出Fruit.prototype
console.log(banana.__proto__);
//输出'banana'
console.log(banana.show());
//输出'banana'
console.log(banana.name);
//输出true
console.log(banana.hasOwnProperty("name"));
//输出false
console.log(banana.hasOwnProperty("show"));

可以看到,经过new之后返回了一个对象,该对象的构造函数原型为Fruit.prototype,也就是proto指向Fruit.prototype
并且banana可以调用show和name属性,但name是其拥有的属性,show是原型上的属性。
也就是new做了以下几件事

  • 返回一个对象,该对象的proto指向构造函数的原型
  • 该对象会实现构造函数中的实例属性,也就是调用构造函数的apply方法

初步实现new操作符

function objectFactory(paramConstrutor){
    if(typeof paramConstrutor !== 'function' ){
        throw new Error("");
    }
    var args = Array.prototype.slice.call(arguments,1);
    //设置obj的proto为constructor的proto,也就是继承共享属性
    //两种方式,
    //一种是直接设置__proto__,官方不建议,后面可能变成只读属性
    var obj = new Object();
    obj.__proto__ = paramConstrutor.prototype;
    //一种是通过Object.create()或者该方式的polyfill
    //模拟Object.create()
    function Empty(){};
    Empty.prototype = paramConstructor.prototype;
    var obj = new Empty();
    //继承实例属性
    paramConstructor.apply(obj,args);
    return obj;
}

如果构造函数由返回值,那应该是返回新建的对象还是返回值呢?

  • 直接返回返回值,当返回值是Object、Function、Array、Date、RegExg、Error
  • 返回新建对象,当返回值是Null、Undefined、Number、Boolean、String、Symbol
function Fruit(name){
    this.name = name;
    return {
        a:1
    }
}

var banana = new Fruit('banana');
//{a:1}
console.log(banana);
function Fruit(name){
    this.name = name;
    return 1;
}

var banana = new Fruit('banana');
//Fruit {name:'banana‘}
console.log(banana);

完整代码

根据上面的返回值,进一步完善代码。
需要了解的:

  • typeof检测除了Function之外的都为object
  • typeof检测Null为object
function objectFactory(paramConstructor){
    if(typeof paramConstructor !== 'function'){
        throw new Error("");
    }
    var args = Array.prototype.slice.call(arguments,1);
    //继承共享属性,修改proto属性
    function Empty(){};
    Empty.prototype = paramConstructor.prototype;
    var obj = new Empty();
    //继承实例属性
    var result = paramConstructor.apply(obj,args);
    var isObejct = typeof result === 'object' && result !== null;
    var isFunction = typeof result === 'function';
    if(isObejct ||isFunction ){
        return result
    }
    return obj;
}

相关文章

  • 一篇就够-JS的new实现

    new的作用 可以看到,经过new之后返回了一个对象,该对象的构造函数原型为Fruit.prototype,也就是...

  • js实现new

    new一个函数时发生了什么? 创建一个新的对象将构造函数的原型复制给新对象(this就指向了新对象)执行构造函数中...

  • 一篇就够-JS继承的多种方式和实现

    原型链继承 方法:子构造函数的prototype指向为父构造函数的实例,因为原型链是proto的链表,父构造函数的...

  • 手写Promise

    基本实现new Promise 和 then /catch方法 Promise.js test.js测试 调用手...

  • 2016/9/21 前端笔试题笔记

    js实现语言继承的核心是 prototypesubTyoe.prototype = new superType()...

  • js手动实现new

    1,创建一个空对象2,链接到构造函数的原型3,绑定this到该对象4,返回新对象 使用Object.create简化写法

  • js学习札记-new关键字

    js 的new关键字解析的过程中引擎执行了很多步骤,我们可以自己写一个仿new的函数来实现new关键字。 说js ...

  • js new的模拟实现

    new new 运算符创建一个用户定义的对象类型的实例或具有构造函数的内置对象类型之一 1、用new Object...

  • 实现js中的new

    观察 观察new的结果,rec1是一个对象,对象被赋予了构造函数的属性,并根据传参赋予属性相应的值。并且rec1的...

  • js基础-new关键字

    js 的new关键字解析的过程中引擎执行了很多步骤,我们可以自己写一个仿new的函数来实现new关键字。 js n...

网友评论

      本文标题:一篇就够-JS的new实现

      本文链接:https://www.haomeiwen.com/subject/areayhtx.html