前端js面试题1---手撕new操作符

最新推荐文章于 2024-04-26 16:41:39 发布

苏米素

最新推荐文章于 2024-04-26 16:41:39 发布

阅读量305

点赞数

分类专栏：前端学习笔记

本文链接：https://blog.csdn.net/sumisu666/article/details/115548539

版权

前端学习笔记专栏收录该内容

20 篇文章 2 订阅

订阅专栏

部分参考链接: 重学 JS 系列：聊聊 new 操作符.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script type="text/javascript">
        // 创建一个对象
        // 将构造函数的作用域赋给新对象 this执行新创建的对象
        // 执行构造函数中的代码
        // 判断：如果传入的对象的类型是对象，则返回新对象；反之直接返回

        // 参考链接：https://blog.csdn.net/caoluola2594/article/details/100962398
        // 自己疑惑的地方：！！！！
        // 构造函数如果返回值为对象，那么这个返回值会被正常使用
        // 这个例子告诉了我们一点，构造函数尽量不要返回值。因为返回原始值不会生效，返回对象会导致 new 操作符没有作用。
        function New() {
            var obj = {};
            var Constroctor = [].shift.call(arguments); // 将第一个值拿出来
            obj.__proto__ = Constroctor.prototype; // 将对象与构造函数原型链接起来
            var result = Constroctor.apply(obj, arguments); // 将构造函数的this指向这个对象，并传递参数
            
            return typeof result === "object" ? result : obj;
        }

        // 构造函数
        function Person(name,age) { 
            this.name = name;
            this.age = age;
        }

        // 有返回对象的构造函数
        function Test(name, age) { 
            this.name = name;
            this.age = age;
             
            return {sex:"女"};
        }

        var c = New(Person, 'sms', 12);
        console.log(c); // Person {name: "sms", age: 12}


        var d = New(Test, 'ssm', 20);
        console.log(d); // {sex: "女"}  导致New操作符失效
    </script>
</body>
</html>