如何实现一个 new

ゞ浴缸里的玫瑰 2021-09-18 02:16 338阅读 0赞

面试官问：能否模拟实现\`JS\`的\`new\`操作符

me or you：木问题！！！

**一、进行分析new的过程，主要有以下几点**

1、创建一个新的对象

2、把obj的\_\_proto\_\_指向fn的prototype,实现继承

3、改变this的指向，执行构造函数、传递参数,fn.apply(obj,) 或者 fn.call()

4、返回新的对象obj

二、实现代码

<script>
        /*
        @author: guoguo
        @title: 如何实现一个 new
        @data：2019.2.19
        */
        function Dog(name) {
            this.name = name
            this.say = function () {
                console.log('name = ' + this.name)
            }
        }
        function Cat(name) {
            this.name = name
            this.say = function () {
                console.log('name = ' + this.name)
            }
        }
        function _new(fn, ...arg) {
            const obj = {}; //创建一个新的对象
            obj.__proto__ = fn.prototype; //把obj的__proto__指向fn的prototype,实现继承
            fn.apply(obj, arg) //改变this的指向
            return Object.prototype.toString.call(obj) == '[object Object]'? obj : {} //返回新的对象obj
        }
    
        //测试1
        var dog = _new(Dog,'aaa')
        dog.say() //'name = aaa'
        console.log(dog instanceof Dog) //true
        console.log(dog instanceof Cat) //true
        //测试2
        var cat = _new(Cat, 'bbb'); 
        cat.say() //'name = bbb'
        console.log(cat instanceof Cat) //true
    
    </script>

源码地址：[https://github.com/GuoYuFu123/test-project/blob/master/new/new.html][https_github.com_GuoYuFu123_test-project_blob_master_new_new.html]

# **原创不易，自由转载，注明出处** #

[https_github.com_GuoYuFu123_test-project_blob_master_new_new.html]: https://github.com/GuoYuFu123/test-project/blob/master/new/new.html

发表评论取消回复

表情：

评论列表（有 0 条评论，338人围观）

还没有评论，来说两句吧...

相关阅读

相关如何new一个对象

在JavaScript中，可以使用new操作符来创建一个对象。举个例子，假设我们要创建一个名为"Person"的构造函数，它有两个属性："name"和"age"。我们可以这

叁歲伎倆/ 2024年03月25日 06:35/ 0 赞/ 42 阅读

相关实现new关键字

一、new做了什么 1.创建了一个全新的对象。 2.这个对象会被执行\[\[Prototype\]\]（也就是\_\_proto\_\_）链接。 3.生成的新对象会

素颜马尾好姑娘i/ 2023年08月17日 15:55/ 0 赞/ 146 阅读

相关字节：如何模拟实现 new 操作符

点击上方前端瓶子君，关注公众号回复算法，加入前端编程面试算法每日一题群 [https://mp.weixin.qq.com/s/2elzsKW1uqVsp0

不念不忘少年蓝@/ 2023年01月15日 14:28/ 0 赞/ 199 阅读

相关 [JavaScript]new操作符做了什么？如何实现一个 new?

做了什么？ 1、创建了一个空的js对象（即\{\}） 2、将空对象的原型prototype指向构造函数的原型 3、将空对象作为构造函数的上下文（改变this指向）

- 日理万妓/ 2022年12月10日 14:40/ 0 赞/ 204 阅读

相关实现一个new操作符

实现new操作符 function New(func) \{ var res = \{\}; if (func.prototype !== null) \

清疚/ 2022年10月31日 12:14/ 0 赞/ 14 阅读

相关手动实现一个 new 操作方法

首先我们需要了解 js new操作符到底做了什么事情： > new 操作用来创建一个实例对象，js创建实例对象过程如下： > 1、生成一个空对象 > 2、让空对象继承构

以你之姓@/ 2022年08月30日 05:25/ 0 赞/ 142 阅读

相关如何实现一个malloc

任何一个用过或学过C的人对malloc都不会陌生。大家都知道malloc可以分配一段连续的内存空间，并且在不再使用时可以通过free释放掉。但是，许多程序员对malloc背后的

川长思鸟来/ 2022年08月01日 00:11/ 0 赞/ 190 阅读

相关 new本质（原理），手写实现一个 new

灵魂两问： 1. new 的原理是什么？ 2. 通过 new 的方式创建对象和通过字面量创建有什么区别？生成对象方式 let a = {age: 1};

系统管理员/ 2022年03月17日 02:46/ 0 赞/ 305 阅读

相关如何实现一个 LazyMan？

网上看到一道 JavaScript 笔试题，感觉还挺有意思的，在此记录一番。考察知识点：闭包，事件轮询机制，链式调用，队列实现一个LazyMan，可以按照以下方

冷不防/ 2022年01月19日 00:35/ 0 赞/ 211 阅读

相关如何实现一个 new

面试官问：能否模拟实现\`JS\`的\`new\`操作符 me or you：木问题！！！一、进行分析new的过程，主要有以下几点 1、创建一个新的对象 2、把obj

ゞ浴缸里的玫瑰/ 2021年09月18日 02:16/ 0 赞/ 339 阅读