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

来源：互联网发布：mac 命令查看运行程序编辑：程序博客网时间：2024/06/14 02:07
<!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>
阅读全文
0 0