JavaScript-构造函数

什么是构造函数

  • 构造函数和工厂函数一样, 都是专门用于创建对象的
  • 构造函数本质上是工厂函数的简写

构造函数和工厂函数的区别

  • 构造函数的函数名称 首字母 必须 大写
  • 构造函数只能够通过 new 来调用
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function Person(name, age) {
            /*
            系统自动添加的
            let obj = {};
            let this = obj;
            return this;
            **/

            this.name = name;
            this.age = age;
            this.say = function () {
                console.log("hello world");
            }
        }
    </script>
</head>
<body>
</body>
</html>

🐤当我们 new Person("BNTang", 34); 系统做了什么事情。

  • 会在构造函数中自动创建一个对象
  • 会自动将刚才创建的对象赋值给 this
  • 会在构造函数的最后自动添加 return this;
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function Person(name, age) {
            /*
            系统自动添加的
            let obj = {};
            let this = obj;
            return this;
            **/

            this.name = name;
            this.age = age;
            this.say = function () {
                console.log("hello world");
            }
        }

        let objOne = new Person("tyh", 34);
        let objTwo = new Person("zs", 44);

        console.log(objOne);
        console.log(objTwo);
    </script>
</head>
<body>
</body>
</html>

🐤方法中的 this 谁调用就是谁, 所以如果当前是 objOne 调用, 所以当前的 this 就是 objOne。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function Person(name, age) {
            /*
            系统自动添加的
            let obj = {};
            let this = obj;
            return this;
            **/

            this.name = name;
            this.age = age;
            this.say = function () {
                console.log(this.name, this.age);
            }
        }

        let objOne = new Person("tyh", 34);
        let objTwo = new Person("zs", 44);

        objOne.say();
        objTwo.say();
    </script>
</head>
<body>
</body>
</html>

由于两个对象中的 say 方法的实现都是一样的, 但是保存到了不同的存储空间中，所以有性能问题。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function Person(name, age) {
            /*
            系统自动添加的
            let obj = {};
            let this = obj;
            return this;
            **/

            this.name = name;
            this.age = age;
            this.say = function () {
                console.log("hello world");
            }
        }

        let objOne = new Person("tyh", 34);
        let objTwo = new Person("zs", 44);

        // false
        console.log(objOne.say === objTwo.say);
    </script>
</head>
<body>
</body>
</html>

通过三个等号来判断两个函数, 表示判断两个函数是否都存储在同一块内存中，如下所示。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function demo() {
            console.log("demo");
        }
        
        // true
        console.log(demo === demo);
    </script>
</head>
<body>
</body>
</html>

构造函数优化上

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function say() {
            console.log("hello world");
        }

        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.say = say;
        }

        let objOne = new Person("lnj", 34);
        let objTwo = new Person("zs", 44);
        
        // true
        console.log(objOne.say === objTwo.say);
    </script>
</head>
<body>
</body>
</html>

🐤当前这种方式解决之后，存在的弊端。

  • 阅读性降低了
  • 污染了全局的命名空间

构造函数优化中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let fns = {
            say: function () {
                console.log("hello world");
            }
        }

        function Person(name, age) {
            this.name = name;
            this.age = age;
            this.say = fns.say;
        }

        let objOne = new Person("tyh", 34);
        let objTwo = new Person("zs", 44);

        // true
        console.log(objOne.say === objTwo.say);
    </script>
</head>
<body>
</body>
</html>

由于 test 函数都是属于同一个对象, 所以返回 true。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        let fns = {
            test: function () {
                console.log("test");
            }
        }
    </script>
</head>
<body>
</body>
</html>

构造函数优化下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Demo</title>
    <script type="text/javascript">
        function Person(name, age) {
            this.name = name;
            this.age = age;
        }

        Person.prototype = {
            say: function () {
                console.log("hello world");
            }
        }

        let objOne = new Person("tyh", 34);
        let objTwo = new Person("zs", 44);

        objOne.say();
        objTwo.say();

        // true
        console.log(objOne.say === objTwo.say);
        console.log(Person.prototype);
    </script>
</head>
<body>
</body>
</html>

如上的 prototype 下个文章当中在进行介绍。

posted @   BNTang  阅读(218)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
阅读排行：
· winform 绘制太阳，地球，月球 运作规律
· 超详细：普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· AI 智能体引爆开源社区「GitHub 热点速览」
· 写一个简单的SQL生成工具
点击右上角即可分享
微信分享提示