JS中创建对象的四种方式

本文探讨了JavaScript中创建对象的四种方法:直接创建法、工厂模式、构造函数以及原型创建。每种方法都有其独特的优缺点,例如直接创建法简单但无法量产,工厂模式便于量产但无法明确对象类型,构造函数能明确类型但会造成内存损耗,而原型创建则解决了方法共享的问题。通过对这些模式的比较,有助于更好地理解和运用JavaScript中的对象创建机制。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

创建一个学生对象:

属性:姓名、年龄

方法:吃饭

1.直接创建法:

优点:创建简单

缺点:无法量产

 var student={
            name:'王一',
            age:21,
            eat:function(){
                console.log(this.name+"正在吃")
            }
        }

缺点:无法量产——当我们需要创建多个学生对象的时候需要将这一段代码重写 如:

var s1={
            name:'王二',
            age:22,
            eat:function(){
                console.log(this.name+"正在吃")
            }
        }

 var s2={
            name:'王三',
            age:23,
            eat:function(){
                console.log(this.name+"正在吃")
            }
        }

2.工厂模式——将创建对象的过程封装到函数内部 ,直接调用函数进行对象创建。通过函数来创建对象

优点:可以量产

缺点:无法明确对象的类型 ,全都是object类型的,无法进行类型的细分

  function Student(name,age){
            var s=new Object()
            s.name=name
            s.age=age
            s.eat=function(){
                console.log(this.name+'正在吃')
            }
            return s
        }

  var s1=Student("王一",21) //object
  var s2=Student("王二",10)

通过参数的改变来创建不同的学生对象,该方法相较于直接创建法更加的便捷(可以量产),但也存在着一定的弊端,如:无法明确对象的类型 ,全都是object类型的,无法进行类型的细分

  function Teach(name,age){
            var t=new Object()
            t.name=name
            t.age=age
            t.eat=function(){
                console.log(this.name+'正在吃')
            }
            return t
        }

var t1=Teach("张三",30)

console.log(t1 instanceof Teach)//返回false

注:instanceof 用于检测数据类型 返回布尔值 通常用于检测复杂数据类型 简单数据类型没法检测。instanceof 检测变量的数据类型  ,对应变量必须为原型创建出来的 。简单数据类型在直接创建时,不走原型。 

3.构造函数——构造函数的方式来模拟类!!! 利用js中this指向性可以改变的问题来实现

优点:可以明确对应的对象类型

缺点:不同对象中的相同方法无法公用,需要独立存储,造成内存损耗

 function Student(name,age){
            this.name=name
            this.age=age
            this.eat=function(){
                console.log(this.name+"正在吃")
            }
        }
        function Teach(name,age){
            this.name=name
            this.age=age
            this.eat=function(){
                console.log(this.name+"正在吃")
            }
        }

 var s1=new Student("王一",21)

 var s2=new Student("王二",22)

 var t1=new Teach("张三",24)
 console.log(s1 instanceof Student)//返回true
 console.log(t1 instanceof Teach)//返回true

注:通过同一个构造函数创建出来的对象原型是相等的
        对象的原型__proto__
        console.log(s1.__proto__==s2.__proto__)//返回true

缺点:s1中eat方法  s2也有eat方法  造成内存的消耗
        console.log(s1.eat==s2.eat)//返回false

4.原型创建:将公有的方法 放到原型中

优点:解决了构造函数存在的方法无法公用的问题

  //构造函数原型 ==实例化对象的原型
        //将共有的方法放入构造函数的原型中 

        function Student(name,age){
            this.name=name
            this.age=age
        }
        Student.prototype.eat=function(){
            console.log(this.name+'正在吃')
        }

        var s1=new Student("王一",21)
        s1.eat() 
        var s2=new Student("王二",22)
        s2.eat() 
       console.log(s1.eat==s2.eat)//返回true

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值