什么是构造函数


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


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


  • 构造函数的函数名称​​首字母​​​ 必须​​大写​​
  • 构造函数只能够通过​​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​​ 下个文章当中在进行介绍。