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

最新推荐文章于 2023-11-20 18:18:32 发布

约德尔蒙

最新推荐文章于 2023-11-20 18:18:32 发布

阅读量530

点赞数

分类专栏： OOP(面向对象)

本文链接：https://blog.csdn.net/gyq04551/article/details/73526838

版权

OOP(面向对象) 专栏收录该内容

14 篇文章 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>

约德尔蒙

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
传统构造函数存在的问题以及解决方法（原型）

Title //写一个构造函数，用来创建学生对象 //属性：姓名年龄身高体重 //行为：学习吃饭看片把妹 function studyMethod(){ console.log("我叫"+ this.name +"Good Good Study Day Day Up");
复制链接

扫一扫