new操作符的实现

最新推荐文章于 2024-09-14 18:12:44 发布

少吃一口就会少吃一口

最新推荐文章于 2024-09-14 18:12:44 发布

阅读量207

点赞数

文章标签： javascript vue.js node.js

本文链接：https://blog.csdn.net/qq_42349528/article/details/120673586

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <title>构造函数实例的使用</title>
</head>
<body>
    <script>
        function Foo(n) {
            this.name = 'sundingyi'
            this.age = n
            this.say = function() {
            	console.log(this.name)
            }
        }
        console.log(new Foo(18))
    </script>
</body>
</html>

看了以上的代码，你是否会有疑问？凭什么只要new操作符new一下，就可以实例化出一个函数？还可以继承函数里面的属性和方法？

<!DOCTYPE html>
<html lang="en">
<head>
    <title>构造函数实例的使用</title>
</head>
<body>
    <script>
        function Foo(n) {
            this.name = 'sundingyi'
            this.age = n
            this.say = function() {
            	console.log(this.name)
            }
        }
        //以下js代码实现new操作符的功能
        function objectFactory() {
            //1.创建一个空对象
            const obj = {}
            // 取到arguments里面的第一个值，就是构造函数
            const [Constructor,...args] = [...arguments] //数组解构
            //const Constructor = [].shift.call(arguments)
            //2.将构造函数的prototype属性，赋值给新对象内部的[[Prototype]]
            //将构造函数的显示原型赋值给新对象的隐式原型中
            obj.__proto__ = Constructor.prototype
            //3.让构造函数的this指向这个对象
            //执行构造函数代码（也就是为这个新对象添加属性方法）
            Constructor.apply(obj, arguments)
            //4.返回对象
            return obj
        }
        cosole.log(objectFactory(Foo,18))
    </script>
</body>
</html>