new操作符的实现

最新推荐文章于 2023-03-14 00:58:39 发布

少吃一口就会少吃一口

最新推荐文章于 2023-03-14 00:58:39 发布

阅读量164

点赞数

文章标签： 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>

[[prototype]]和__proto__意义相同，均表示对象的内部属性，其值指向对象原型。前者在一些书籍，规范中表示一个对象的原型属性，后者则是在浏览器实现中指向对象原型。
显示原型：prototype 隐式原型：__proto__

少吃一口就会少吃一口

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
new操作符的实现

<!DOCTYPE html><html lang="en"><head> <title>构造函数实例的使用</title></head><body> <script> function Foo(n) { this.name = 'sundingyi' this.age = n this.say = f
复制链接

扫一扫