传统构造函数存在的问题以及解决方法（原型）

矫情吗；* 2022-06-12 23:25 144阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script>
            //写一个构造函数，用来创建学生对象
            //属性：姓名 年龄 身高 体重
            //行为：学习  吃饭  看片 把妹
    
            function studyMethod(){
                console.log("我叫"+ this.name +"Good Good Study Day Day Up");
            }
    
    
            function Student(stuName) {
                this.name = stuName;
                this.study = studyMethod;
                //方法* 8*10^20
            }
    
            //如果构造函数没有参数，那么在调用的时候 小括号 可以省略
            var stu = new Student("geng");
            stu.study();
    
            var stu1 = new Student("li");
            stu1.study();
    
            //如果在构造函数中定义函数，那么每次创建对象，都会重新创建该函数
            //但是函数内部代码完全相同，就造成了资源浪费
            //为了处理这个问题，我们要让所有的对象共用一个方法
            //在构造函数外部定义好该函数，将该函数赋值给构造函数内的方法
    
            //使用这种方式写好的方法中的this指向的就是调用该方法的对象
            //this 谁调用就是谁
    
    
            //******使用这种方式存在的问题********
            //1.全局变量增多，造成污染
            //2.代码结构混乱，不易维护
    
    
            //---------------解决办法：用原型，简单介绍一下：------------------------------
            function Person(name, status) {
                this.name = name;
                this.status = status;
                this.act = function () {
                    console.log("演戏");
                };
                this.exercise = function () {
                    console.log("就不强身健体");
                }
            }
    
            var p = new Person("xyz","single");
    
            //p.exercise();
    
    
            //原型是个什么玩意儿？
            //在构造函数创建出来的时候，系统会默认的帮构造函数创建并关联一个神秘的对象，这个对象就是原型
            //原型默认的是一个空的对象
    
            //原型的作用
            //原型中的属性和方法 可以被使用该构造函数创建出来的对象 使用
    
            //如何访问构造函数的原型
            // 构造函数.prototype
            console.log(Person.prototype);
            console.log(p.prototype); //注意 prototype是构造函数的属性，跟对象没有关系
    
            //如何给原型对象添加属性和方法？
            //使用对象的动态特性
    
            Person.prototype.exercise = function () {
                console.log("强身健体，保卫祖国");
            }
    
            p.exercise();
    
            //当使用对象去访问属性和方法的时候
            //会首先在对象自己内部进行查找，如果找到了，就直接使用
            //如果没有找到，就去原型中查找，查找到之后，使用
            //如果原型中还没有， 如果是属性，就是Undefined
            //如果是方法，就报错
    
            //p.sing();  //本身和原型中都没有 就报错
    
            // -----------------------用原型的办法构造函数---------------------------------
            function Person(name, age, gender) {
                this.name = name;
                this.age = age;
                this.gender = gender;
    //            this.sayHello = function () {
    //                console.log("你好我是" + this.name);
    //            }
            }
    
            var p =new Person("张学友",18,"male");
    
            var p1 = new Person("刘德华",19,"male");
    
            Person.prototype.sayHello = function () {
                console.log("你好我是" + this.name);
            }
    
            Person.prototype["sing"] = function () {
                console.log("一千个伤心的母牛");
            }
    
            p.sayHello();
            p1.sayHello();
    
            p.sing();
            p1.sing();
            //如何使用原型来解决构造函数存在的问题？
            //构造函数的原型对象中的成员，可以被该构造函数创建出来的所有对象访问
            //而且，所有的对象共享该对象
            //所以，我们可以将构造函数中需要创建的函数，放到原型对象中存储
            //这样就解决 全局变量污染的问题 以及 代码结构混乱的问题()；
    
    
    
        </script>
    </head>
    <body>
    
    </body>
    </html>