js高级--创建对象的几种方式

最新推荐文章于 2024-09-26 01:42:12 发布

打折瘸子那条好腿

最新推荐文章于 2024-09-26 01:42:12 发布

阅读量142

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_66386149/article/details/125196361

版权

一、直接创建对象

优点:简单方便
缺点：无法针对相同对象进行量产（使用同一接口创建很多对象，产生大量重复性代码）

<body>
    <script>
        //创建一个学生对象：包含名称 年龄  身高 
        //方法-显示个人信息
       //优点--创建简单
       //弊端--无法针对相同对象进行量产(使用同一接口创建很多对象，产生大量重复性代码)
        var student={
            name:"张三",
            age:22,
            height:188,
            showInfo:function(){
                console.log(this.name)
            }
        }
        // console.log(student)
         var student={
             name:"张四",
            age:22,
             height:188,
             showInfo:function(){
                 console.log(this.name)
             }
         }
         var student={
             name:"张五",
             age:22,
             height:188,
             showInfo:function(){
                 console.log(this.name)
             }
         }
    </script>

这种方法虽然比较简单，但也存在了很严重的问题，那就是如果需要创建几个相同属性的对象，就需要我们把内容手动创建若干次，这样明显我们工作量也会增加很多

二、工厂模式创建法

工厂模式：通过封装函数，创建指定的对象
创建方法：将创建对象的过程都封装在函数内部，然后再直接调用进行对象的创建
优点：对于相同类型的对象可以快速进行量产
缺点：通过工厂模式创建出来的对象，它无法明确所对应的类型（所创建对象都是object 所以分不清其类型）

<body>
    <script>
        //创建一个学生对象：包含名称 年龄  身高 
        //方法-显示个人信息
        //工厂模式：通过封装函数，创建指定对象
        //创建方法：将创建对像的过程封装到函数内部，然后直接调用进行对象创建
        //优点：快速进行想同类型对象的量产
        //缺点：无法明确，确定的类型  
        function createStudent(name,age,height){
            var obj={} //对象
            obj.name=name
            obj.age=age     // 3个属性
            obj.height=height
            obj.showInfo=function(){//访问属性创建
                console.log(this.name)
            }
            return obj
        }
        var s1=createStudent("王一",33, 158)
        var s2=createStudent("王二",22,185)
        var s3=createStudent("王安", 52, 185)



        function createTeach(name,age,height){
            var obj={}
            obj.name=name
            obj.age=age
            obj.height=height
            obj.showInfo=function(){
                console.log(this.name)
            }
            return obj
        }
        var t1=createTeach("王五",85,85)
        
        //因为所有创建的对象都是object  所以无法明确类型

        var r=t1 instanceof Teach
        console.log(r)//无法明确其类型

ps: 可以通过instanceof来判断对应的变量类型

instanceof: 检测变量的数据类型(变量必须为原型创建出来的)

typeof(): 返回对应变量的数据类型

变量instanceof object 返回的是布尔值

 //typeof() 返回对应变量的数据类型
      //instanceof 检测变量的数据类型     变量必须为原型创建出来的
      //变量instanceof object 返回布尔值
      var arr=[1,2,3]
      var result=arr instanceof Object//true  数组属于特殊对象
      console.log(result)  //引用类型直接为原型


        var num=123//直接赋值  不为原型创建 所以为假
        var result=num instanceof Number//false
         console.log(result)

         var num=123
         var num=new Number(123)//原型创建 所以检测为真
         var result=num instanceof Number//true
         console.log(result)

         var num=new Number(123)
         var result=num instanceof object//true  因为万物皆对象
         console.log(result)
    </script>
</body>
</html>

js分为两类变量类型：简单数据类型：数值字符串。

引用类型

三、构造函数方式创建对象

js么有类，通过构造函数来模拟类，核心思想改变js this 指向的问题
类（class)同一类型事物的总称，通过类创建对应的对象
优点：既能量产，又能检测对应数据的类型
缺点：共同的方法没有封装，没有开辟共同空间，导致占据内存消耗

<body>
    <script>
        //类（class） 一类总称 通过类创建对应的对象
        //js没有类，利用构造函数来模拟类，核心思想 改变this的指向
        //创建一个学生类(构造函数)
        //优点：量产 又能检测对应的类型
        //缺点：相同的方法没有开辟共同的空间，从而导致内存的消耗
        function Student(name,age,height){
            this.name=name
            this.age=age
            this.height=height
            this.showInfo=function(){
                console.log(this.name)
            }
        }
        //利用new来创建对象
        var s1=new Student("王一",15,187)
        var s2=new Student("王二",18,188)

     //每一个对象都开辟了一个showInfo的空间
     
         console.log(s1.showInfo==s2.showInfo)//false  没有开辟共同空间 所以不相等

        function Teach(name){
              this.name=name
        }
        var t1=new Teach("王四")
        var r=t1 instanceof Teach//true   可以检测其类型
        console.log(r)
    </script>
</body>

ps:此处的new 做了什么？

创建了一个空对象

执行后面的构造函数，将后面函数内的this来指向空对象（绑定this指向）

将创建的空对象返回，直接赋值给前方变量

四、原型创建

每个相同对象，原型都一样的构造函数的原型等于实例化对象的原型
将共有方法放入到构造函数的原型中

 function Student(name,age,height){
            this.name=name
            this.age=age
            this.height=height
            
        }
        //能否将构造函数中的方法，定义到原型中 
        //构造函数的原型(prototype)==实例化对象的原型(__proto__)
        Student.prototype.showInfo=function(){
            console.log(this.name)
        }

        var s1=new Student("王一",18,175)
        
           s1.showInfo()
        var s2=new Student("王二",21,185)
        s2.showInfo()

公用的放在原型中，私有的放入构造函数里

优点：方法共有，不用一直创建赋值

可以判断类型，节约内存

可以量产

弊端：对象的属性以后原型里会依然保存其属性

body>
    <script>
         //原型创建对象
        //公用的放在原型中
        //私有的放入构造函数里
        //优点：量产、可以判断类型、节约内存
        function Student(name,age,height){
            this.name=name
            this.age=age
            this.height=height
            
        }
        //能否将构造函数中的方法，定义到原型中 
        //构造函数的原型(prototype)==实例化对象的原型(__proto__)
        Student.prototype.showInfo=function(){
            console.log(this.name)
        }

        var s1=new Student("王一",18,175)
        
        s1_proto_.showInfo=function(){
            console.log("改变了showInfo")
        }
           s1.showInfo()//改变了
        var s2=new Student("王二",21,185)
        s2.showInfo()//改变了   因为他们方法是共有的，存在同一地方的 所以
         //有一个改变就全都会随之改变


        console.log(s1.showInfo==s2.showInfo)//true 因为方法共有 所以为真

        //发现每一个实例化的对象 都存在一个 [[Prototype]]属性 原型
        //通过相同构造函数创建出来的对象 原型相同
        //获取对象原型__proto__
        // console.log(s1.__proto__==s2.__proto__)
    </script>
</body>