JavaScript高级 对象创建模式 object 对象字面量 工厂模式 自定义构造函数 构造函数+原型

贾㻞
• 阅读 948

对象创建模式

Object构造函数模式

  • 套路:先创建空Object对象,再动态添加属性/方法
  • 使用场景:起始时不确定对象内部数据
  • 问题:语句太多
        var p = new Object()
        p.name = 'Tom'
        p.age = 12
        p.setName = function (name){
            this.name = name
        }
        
        p.setName('JACK')
        console.log(p.name,p.age)
        

对象字面量模式

  • 套路:使用{}创建对象,同时指定属性/方法
  • 适用场景:起始时对象内部数据是确定的
  • 问题:如果创建多个对象,有重复代码

          var p = {
              name:'TOM'
              age:'12'
              setName:function(name){
                  this.name=name
              }
          }
          
          console.log(p.name,p.age)
          p.setName('jack')
          console.log(p.name,p.age)
          
          var p2={
              name:'BOB'
              age:'13'
              setName:function(name){
                  this.name = name
              }
          }
          

工厂模式

  • 套路:通过工厂函数动态创建对象并返回
  • 适用场景:需要创建多个对象
  • 问题:对象没有一个具体的类型,都是Object类型
        function creatPerson(name,age){    //返回一个对象的函数==>工厂函数
            var obj={
                name:name,
                age:age,
                setName:function (name){
                    this.name = name
                }
            }
            
            return obj
        }
        
        //创建2个人
        var p1 = creatPerson('TOM',12)
        var p2 = creatPerson('BOB',13)

        //p1,p2是Object类型
        function creatStudent(name,price){
            var obj = {
                name:name,
                price:price
            }
            return obj
        }
        var s = creatStudent('张三',12000)
        
        

自定义构造函数模式

  • 套路:自定义构造函数,通过new创建对象
  • 适用场景:需要创建多个类型确定的对象
  • 问题:每个对象都有相同的数据,浪费内存

          //定义类型
          function Person(name,age){
              this.name = name
              this.age = age
              this.setName = function(name){
                  this.name = name
              }
          }
          var p1 = new Person('TOM',12)
          p1.setName('JACK')
          console.log(p1.name,p1.age)
          
          function Student(name,price){
              this.name = name
              this.price = price
          }
          var s = new Student('BOB',13000)
          console.log(s instanceof Student)
          
          var p2 = new Person('JACK',23)
          console.log(p1,p2)
          

构造函数+原型的组合模式

  • 套路:自定义构造函数,属性在函数中初始化,方法添加到原型上
  • 适用场景:需要创建多个类型确定的对象

          function Person(name,age){
              this.name = name
              this.age = age
          }
          Person.prototype.setName = function (name){
              this.name = name
          }
          
          var p1 = new Person('TOM',23)
          var p2 = new Person('JACK',24)
          console.log(p1,p2)
点赞
收藏
评论区
推荐文章
Karen110 Karen110
4年前
一篇文章带你了解JavaScript Object 对象
一、概念JavaScript原生提供Object对象(注意起首的O是大写),介绍该对象原生的各种方法。JavaScript的所有其他对象都继承自Object对象,即那些对象都是Object的实例。二、Object()Object本身是一个函数,可以当作工具方法使用,将任意值转为对象。这个方法常用于保证某个值一定是对象。如果参数为空(或者为undefi
菜园前端 菜园前端
2年前
前端学习重点-原型与原型链
原文链接:什么是原型?每一个函数都包含一个prototype属性,这是一个指针指向"原型对象"(prototypeobject),也就是我们平时说的原型。每一个函数都包含不同的原型对象。当将函数用作构造函数的时候,新创建的对象(实例)会从原型对象上继承属性
灯灯灯灯 灯灯灯灯
4年前
「超全超细」Java设计模式图文详解!!!
java设计模式—原型模式Java原型模式1、概述  啥是原型模式?  原型模式属于设计模式中的创建型中的一员,  原型模式:使用原型实例指定待创建对象的类型,并且通过复制这个原型来创建新的对象!  说大白话就是自己复制自己,通过原生对象复制出一个新的对象,这两个对象结构相同且相似;  需要注意的是,原型对象自己不仅是个对象还是个工厂!并且通过克隆方式创
Stella981 Stella981
3年前
JavaScript 对象和包装类
对象的创建方法{}varobj{}系统自带的构造函数varobjnewObject()//Array()//Number()自定义的构造函数functionPerson(){}varperson1newPe
可莉 可莉
3年前
23.JavaScript原型和原型链
1.原型:prototype,所有的函数都有一个属性prototype,称之为函数原型默认情况下,prototype是一个普通的Object对象默认情况下,prototype中有一个属性constructor,它也是一个对象,它指向构造函数本身functionTest(){}Test.prototype:函数Test的原型Test.pr
Wesley13 Wesley13
3年前
IOC的使用
1.概要:在spring中,都是使用反射机制创建对象,将创建对象的权利交给spring容器,就是控制反转(ioc)对象创建方式有参构造无参构造工厂模式(静态,非静态)2.创建IDEA控制台测试项目!(https://oscimg.oschina.net/oscnet/a77ea6a2907139751d63
Wesley13 Wesley13
3年前
C++中构造函数和析构函数
构造函数定义它是一种特殊的方法。主要用来在创建对象时初始化对象,即为对象成员变量赋初始值,总与new运算符一起使用在创建对象的语句中。另外,一个类可以有多个构造函数,我们可以根据其参数个数的不同或参数类型的不同来区分它们(这就是构造函数的重载)特点1.构造函数的命名必须和类名完全相同;2.构造函数的功能主要用于在类的对象创建时定义
Stella981 Stella981
3年前
Javascript定义类(class)的三种方法
在面向对象编程中,类(class)是对象(object)的模板,定义了同一组对象(又称"实例")共有的属性和方法。Javascript语言不支持"类",但是可以用一些变通的方法,模拟出"类"。一、构造函数法这是经典方法,也是教科书必教的方法。它用构造函数模拟"类",在其内部用this关键字指代实例对象。  function
Wesley13 Wesley13
3年前
C++构造函数详解(复制构造函数 也是 拷贝构造函数)
构造函数是干什么的该类对象被创建时,编译系统对象分配内存空间,并自动调用该构造函数,由构造函数完成成员的初始化工作,故:构造函数的作用:初始化对象的数据成员。构造函数的种类!复制代码(https://oscimg.oschina.net/oscnet/54a3f729e89451abb86a0bec4639
Wesley13 Wesley13
3年前
JS创建对象模式7种方法详解
创建对象的几种模式虽然Object构造函数或者字面量,都可以用来创建对象,但这些方式有明显的缺点:使用同一个接口创建很多对象,会产生大量的代码,于是,工厂模式诞生了1工厂模式工厂模式是广为人知的设计模式,抽象了创建具体对象的过程。在ES6的Class创建类之前,是无法创建类的,开发人员就发明了一种函数,用函数来封
小万哥 小万哥
1年前
Java 构造函数与修饰符详解:初始化对象与控制权限
Java构造函数Java构造函数是一种特殊的类方法,用于在创建对象时初始化对象的属性。它与类名相同,并且没有返回值类型。构造函数的作用:为对象的属性设置初始值执行必要的初始化操作提供创建对象的多种方式构造函数的类型:默认构造函数:无参数的构造函数,如果用户