javascript——this指向、工厂函数、构造函数、方法重复问题_js 构造函数实例化的对象重复实例是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/h_jQuery/article/details/119561192

this

解析器在调用函数时，每次都会向函数内部传递一个隐含的参数；这个隐含的函数就是this，this指向的是一个对象，这个对象我们称为函数执行的上下文对象，根据函数的调用方式的不同，this会指向不同的对象

1.以函数的形式调用，this永远指向的是window

2.以方法的形式调用，this指向的是调用它的对象

3.以构造函数的形式调用，this指向该构造函数的实例对象

使用工厂函数创建对象

1.0

<script>
        // 使用工厂方法创建对象：可以大批量的创建对象
        function creatPerson() {
            // 创建新对象
            var obj = new Object();
            // 向对象中添加属性
            obj.name = 'zs';
            obj.age = 22;
            obj.gender = '男';
            obj.sayName = function() {
                alert(this.name)
            };
            // 返回新的对象
            return obj;
        }
        var zs = creatPerson();
        var ls = creatPerson();
        var ww = creatPerson();
        //这三个对象都是一样的
        console.log(zs);
        console.log(ls);
        console.log(ww);
    </script>

2.0

<script>
        // 使用工厂方法创建对象：可以大批量的创建对象
        function creatPerson(name, age, gender) {
            // 创建新对象
            var obj = new Object();
            // 向对象中添加属性
            obj.name = name;
            obj.age = age;
            obj.gender = gender;
            obj.sayName = function() {
                alert(this.name)
            };
            // 返回新的对象
            return obj;
        }
        var zs = creatPerson('zs', 22, '男');
        var ls = creatPerson('ls', 24, '男');
        var ww = creatPerson('ww', 26, '男');
        console.log(zs);
        console.log(ls);
        console.log(ww);
    </script>

<script>
        // 创建一个狗类
        function creatDogs(name, age) {
            var obj = new Object();
            obj.name = name;
            obj.age = age;
            obj.sayHi = function() {
                alert('汪汪汪');
            }
            return obj;
        }
        var ww = creatDogs('柴犬', 5);
        console.log(ww);
    </script>

使用工厂方法创建对象，使用的构造函数都是Object，所以创建的对象都是Object这个类型，这就导致无法区别出多种不同类型的对象

构造函数创建对象

<script>
        // 创建构造函数，专门用来创建Person对象的，构造函数就是一个普通的函数，创建方式和普通函数没有区别。
        // 不同的是构造函数的命名习惯是首字母大写
        // 构造函数和普通函数的区别就是调用方式的不同，普通函数就是直接调用，而构造函数需要使用new关键字来调用
        // 构造函数的执行流程：
        /* 
        1.立刻创建一个新对象
        2.将新创建的对象设置为函数中的this,在构造函数中可以使用this；来引用新建的对象
        3.逐行执行函数中的代码
        4.将新建的对象作为返回值返回

        使用同一个构造函数创建的对象，称为一类对象，也将一个构造函数称为一个类；
        将通过一个构造函数创建的对象，称为该类的实例
        */
        function Person(name, age, gender) {
            this.name = name;
            this.age = age;
            this.gender = gender;
            this.sayName = function() {
                console.log(this.name);
            }
        }
        var p = new Person();
        console.log(p);
        p.sayName();
        /* 
        使用instanceof可以检测一个对象是否是一个类的实例；
        语法：对象 instanceof 构造函数
        如果是就返回true，不是就返回false
        */
        console.log(p instanceof Person);
        // 所有的对象都是Object的后代，所以任何对象和Object在instanceof检测时，都会返回true
        console.log(p instanceof Object);
    </script>

构造函数内的方法重复问题

<!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>
    <script>
        /* 
            创建一个Person构造函数
            在Person构造函数中，为每一个对象都添加了一个sayName方法，
            这个方法是在构造函数内部创建的，也就是构造函数每执行一次就会创建一个信的sayName方法，也就是所有实例的sayName都是唯一的
            这就导致了构造函数执行一次就会创建一个新的方法，而每个方法都是一样的

            这是完全没有必要的，完全可以使所有的对象共享同一个方法
                */
        function Person(name, age, gender) {
            // 向对象中添加属性
            this.name = name;
            this.age = age;
            this.gender = gender;
            // 这个方法是在构造函数内部定义的
            // this.sayName = function() {
            //     console.log(this.name);
            // }
            this.sayName = fun;
        }
        // 将sayName方法在全局作用域中定义
        function fun() {
            console.log(this.name);
        }

        // 创建一个Person类的实例对象
        var p1 = new Person('zs', 22, '男');
        var p2 = new Person('ls', 26, '男');

        console.log(p1.sayName == p2.sayName); //false
    </script>
</head>

<body>

</body>

</html>