JavaScript高級對象建立模式 object 對象字面量工廠模式自定義構造函數構造函數+原型

時間 2021-05-04

標籤函數 this prototype code 對象內存原型 console function 欄目 JavaScript 简体版

原文原文鏈接

對象建立模式

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)

對象字面量模式this

套路：使用{}建立對象，同時指定屬性/方法
適用場景：起始時對象內部數據是肯定的

問題：若是建立多個對象，有重複代碼prototype

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
          }
      }

工廠模式code

套路：經過工廠函數動態建立對象並返回
適用場景：須要建立多個對象
問題：對象沒有一個具體的類型，都是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)

構造函數+原型的組合模式原型

套路：自定義構造函數，屬性在函數中初始化，方法添加到原型上

適用場景：須要建立多個類型肯定的對象io

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)