Web全栈工程师之路(三)——JavaScript篇(十九)——构造函数

以下是html代码，个人建议放在IDE里运行，边看效果，边学习~
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>构造函数</title>
    <script>
        /*  
            创建一个构造函数，专门用来创建Person对象
                构造函数就是一个普通的函数，创建方式和普通函数没有区别，
                不同的是构造函数习惯上首字母大写

            构造函数和普通函数上的区别就是调用方式的不同
                普通函数是直接调用，而构造函数需要使用new关键字来调用
            
            构造函数的执行流程：
                1.立刻创建一个新的对象
                2.将新建的对象设置为函数中的this，在构造函数中可以使用this来引用新建的对象
                3.逐行执行函数中的代码
                4.将新建的对象作为返回值返回

            使用同一个构造函数创建的对象称之为一类对象，也将一个构造函数称为一个类
                我们将通过一个构造函数创建的对象，称为是该类的实例
        */

        //创建构造函数
        function Person(name,age,gender){
            //没有return但还是返回了，这是构造函数的一大特点
            alert(this); //这个this就是我们新建的这个对象
            this.name = name; //在调用这个Person构造函数来新建的对象中添加一个叫做name内容为"老子"的属性
            this.age = age;
            this.gender = gender;
        }

        var per = new Person("老子",18,"男"); //利用构造函数创造对象

        console.log(per); //看一看这个对象里有没有name属性(有的)

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

        var dog = new Dog();
        console.log(dog); //看一看前沿是否还是Object，这就是不同点，可以与per对象比较一下看看
        
        /*  
            使用instanceof可以检查一个对象是否是一个类的实例
                语法：
                    对象 instanceof 构造函数
                如果是，返回true，否则返回false
        */
        console.log(per instanceof Person); //判断per对象是否属于Person类(属于)
        
        console.log(per instanceof Object); //判断per对象是否属于Object类(属于)
        /*  
            所有的对象都是Object的后代，所以任何对象和Object作instanceof检查时都会返回true
        */


        /*  
            创建一个Human构造函数
            - 在Human构造函数中，为每一个对象都添加了一个syaName方法
                目前我们的方法是在构造函数内部创建的，也就是构造函数每执行一次都会创建一个新的sayName方法
                也就是所有实例的sayName都是唯一的，各不相同的，存在一定的浪费
                这完全没有必要，完全可以使所有的对象共享同一个方法
        */
        function Human(name,age,gender){
            this.name = name;
            this.age = age;
            this.gender = gender;
            //向对象中添加一个方法
            this.sayName = function(){
                alert("大家好，我是"+this.name);
            };
        }

        //创建两个Human的实例
        var man = new Human("李耳",18,"男");
        var woman = new Human("貂蝉",18,"女");

        //判断各个属性的sayName方法是否是同一个
        console.log(man.sayName == woman.sayName);  //输出false

        //下面解决这个重复创建方法的问题
        
        function Human2(name,age,gender){
            this.name = name;
            this.age = age; 
            this.gender = gender;
            //向对象中添加刚刚已经建立的函数，直接调用即可，无需再次创建新的
            this.sayName = sayHello;
        }

        //在外部单独建立一个函数
        /*  
            将函数定义在全局作用域，污染了全局作用域的命名空间
            而且定义在全局作用域中也很不安全
        */

        function sayHello(){
                alert("大家好，我是"+this.name);
        };

        
        var man2 = new Human2("李耳",18,"男");
        var woman2 = new Human2("貂蝉",18,"女");

        //判断各个属性的sayName方法是否是同一个
        console.log(man2.sayName == woman2.sayName);  //输出true

        man.sayName();
        woman.sayName();
        //问题解决

    </script>
</head>
<body>
    
</body>
</html>
posted @ 2020-12-15 19:28 骨桜阅读(112) 评论(0) 收藏举报
刷新页面返回顶部
BoneSakura

Web全栈工程师之路(三)——JavaScript篇(十九)——构造函数

公告
