• js对象的创建模式


    方式一: Object构造函数模式

    * 套路: 先创建空Object对象, 再动态添加属性/方法
    * 适用场景: 起始时不确定对象内部数据
    * 问题: 语句太多
    /*
      一个人: name:"Tom", age: 12
       */
      // 先创建空Object对象
      var p = new Object()
      p = {} //此时内部数据是不确定的
      // 再动态添加属性/方法
      p.name = 'Tom'
      p.age = 12
      p.setName = function (name) {
        this.name = name
      }
    
      //测试
      console.log(p.name, p.age)
      p.setName('Bob')
      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 createObj(name, age) { //返回一个对象的函数===>工厂函数
        var obj = {
          name: name,
          age: age,
          setName: function (name) {
            this.name = name
          }
        }
    
        return obj
      }
    
      // 创建2个人
      var p1 = createObj('Tom', 12)
      var p2 = createObj('Bob', 13)
    console.log(p1.constructor) // Object 指向的构造函数是Object 
    console.log(p2.constructor) // Object 指向的构造函数是Object
    
      // p1/p2是Object类型
    // 那么为什么说没办法判断类型呢?那么我们创建一条狗的对象
    // 可以看出,狗的constructor也是指向Object,那么我们人和狗的类型就没办法去区分了
    let dog = createObj('二哈',10)
    console.log(dog.constructor) // Object 指向的构造函数是Object
    
    
      function createStudent(name, price) {
        var obj = {
          name: name,
          price: price
        }
        return obj
      }
      var s = createStudent('张三', 12000)
      // s也是Object
    方式四: 自定义构造函数模式
    * 套路: 自定义构造函数, 通过new创建对象
    * 适用场景: 需要创建多个类型确定的对象
    * 问题: 每个对象都有相同的数据, 浪费内存
    function Person(name,age){
        // 1.系统自动创建对象,并且把这个对象赋值到this上,此步不需要我们操作
        // let this = new Object()
        
        // 2.给这个对象赋属性、方法,需要我们自己操作
        this.name = name
        this.age = age
        this.eat = function(){
            console.log(name + '吃饭')
        }
        
        // 3.系统自动返回创建的对象
        // return this
    }
    
    let p1 = new Person("leah",28)
    console.log(p1.constructor) // Person 指向的构造函数是Person
    
    function Dog(name,age){
        this.name = name
        this.age = age
    }
    
    let dog = new Dog("二哈",10)
    console.log(dog.constructor) // Dog 指向的构造函数是Dog
     默认是返回新创建的对象,特别需要注意的是 
    如果显式return一个对象数据类型,那么将来new的对象,就是显式return的对象
    // 当我们显式return一个原始数据类型
    function Person(name,age){
        this.name = name
        this.age = age
        
        return "1"
    }
    
    let p = new Person("leah",28) // { name: 'leah', age: 28 }
    
    // 当我们显式return一个对象数据类型时
    function Person(name,age){
        this.name = name
        this.age = age
        
        return [1,2,3]
    }
    
    let p = new Person("leah",28) // [ 1, 2, 3 ]
    // 我们发现,当显式return一个对象数据类型时,我们new出来的对象,得到的是return的值
    方式六: 构造函数+原型的组合模式
    * 套路: 自定义构造函数, 属性在函数中初始化, 方法添加到原型上
    * 适用场景: 需要创建多个类型确定的对象
    function Person(name, age) { //在构造函数中只初始化一般函数
        this.name = name
        this.age = age
      }
      Person.prototype.setName = function (name) { //共享方法绑定到prototype上
        this.name = name
      }
    
      var p1 = new Person('Tom', 23)
      var p2 = new Person('Jack', 24)
      console.log(p1, p2)
     

     

    不积跬步无以至千里
  • 相关阅读:
    Android与js交互实例
    动态规划-最长公共子序列
    android调用js
    比特币不是虚拟货币,这是一个真实世界----李笑来
    Linux进程同步之POSIX信号量
    编程至死第0天
    JMX操作ActiveMQ(2)
    Oracle层次查询和with函数的使用
    boost::asio async_write也不能保证一次发完所有数据 一
    解决Eclipse一直loading workbench无法启动的问题
  • 原文地址:https://www.cnblogs.com/lyt0207/p/12040352.html
Copyright © 2020-2023  润新知