【JavaScript】常用設計模式及程式設計技巧（ES6描述）

阿新 • • 發佈：2018-12-06

前言

平時的開發中可能不太需要用到設計模式，但是 JS 用上設計模式對於效能優化和專案工程化也是很有幫助的，下面就對常用的設計模式進行簡單的介紹與總結。

1. 單例模式

定義：保證一個類僅有一個例項，並提供一個訪問它的全域性訪問點。


class Singleton {

  constructor(age) {

    this.age = age;

  }



  static getInstance(age) {

    const instance = Symbol.for('instance'); // 防止被覆蓋

    if (!Singleton[instance]) {

        Singleton[instance] = new 
 Singleton(age);

    }

    return Singleton[instance];

  }

}



const singleton = Singleton.getInstance(30);

const singleton2 = Singleton.getInstance(20);

console.log(singleton === singleton2); // true

複製程式碼

2. 策略模式

定義：定義一系列的演算法，把它們一個個封裝起來，並且使它們可以相互替換。

策略模式的核心是整個分為兩個部分：

第一部分是策略類，封裝具體的演算法；

第二部分是環境類，負責接收客戶的請求並派發到策略類。

現在我們假定有這樣一個需求，需要對錶現為S、A、B的同事進行年終獎的計算，分別對應為4倍、3倍、2倍工資，常見的寫法如下:


const calculateBonus = function (performanceLevel, salary) {

  if (performanceLevel === 'S') {

    return salary * 4;

  }

  if (performanceLevel === 'A') {

    return salary * 3;

  }

  if (performanceLevel === 'B' 
) {

    return salary * 2;

  }

};



calculateBonus('B', 20000); // 40000

複製程式碼

可以看到，程式碼裡面有較多的 if else 判斷語句，如果對應計算方式改變或者新增等級，我們都需要對函式內部進行調整，且薪資演算法重用性差，於是我們可以通過策略模式來進行重構，程式碼如下：


// 解決魔術字串

const strategyTypes = {

  S: Symbol.for('S'),

  A: Symbol.for('A'),

  B: Symbol.for('B'),

};

// 策略類

const strategies = {

  [strategyTypes.S](salary) {

    return salary * 4;

  },

  [strategyTypes.A](salary) {

    return salary * 3;

  },

  [strategyTypes.B](salary) {

    return salary * 2;

  }

};

// 環境類

const calculateBonus = function (level, salary) {

  return strategies[level](salary);

};



calculateBonus(strategyTypes.S, 300); // 1200

複製程式碼

策略模式的優點：

利用組合、委託、多型等技術和思想，有效地避免了多重 if-else 語句；
提供了對開放-封閉原則的完美支援，將演算法封裝在獨立的 strategy 中，使得它們易於切換、理解、擴充套件；
strategy 中的演算法也可以用在別處，避免許多複製貼上；

缺點：

增加許多策略類或策略物件；
違反知識最少原則；

3. 代理模式

定義：為一個物件提供一個代用品或佔位符，以便控制對它的訪問。

3.1 虛擬代理

在程式世界裡，操作可能是昂貴的，這時候 B 通過監聽 C 的狀態來將 A 的請求傳送過去，減少開銷。

代理的意義

單一職責: 就一個類(通常也包括物件和函式等)而言，應該僅有一個引起它變化的原因。如果一個物件承擔了多項職責，就意味著這個物件將變得巨大，引起它變化的原因可能會有多個。

例子：圖片預載入。

const myImage = (function () {
    const imgNode = document.createElement('img'); 
    document.body.appendChild(imgNode);
    return function (src) {
        imgNode.src = src;
    }
})();

const proxyImage = (function () {
    const img = new Image;
    img.onload = function () {
        myImage(this.src);
    }
    return function (src) {
        myImage('./loading.gif');
        img.src = src;
    }
})();

proxyImage('./test.jpg');
複製程式碼

這裡的 myImage 只進行圖片 src 的設定，其他代理的工作交給了 proxyImage 方法，符合單一職責原則。此外，也保證了代理和本體介面的一致性。

3.2 快取代理

快取代理可以為一些開銷大的運算結果提供暫時的儲存，在下次運算時，如果傳遞進來的引數跟之前一致，則可以直接返回前面儲存的運算結果。

例子：計算乘積，快取 ajax 資料。

const mult = function () {
    let a = 1;
    for (let i = 0, l = arguments.length; i < l; i++) {
    a = a * arguments[i];
    }
    return a;
}

const proxyMult = (function () {
    const cache = {};
    return function () {
    const args = Array.prototype.join.call(arguments, ','); 
    if (args in cache) {
        return cache[args];
    }
    return cache[args] = mult.apply(this, arguments);
    }
})();

const a = proxyMult(1, 2, 3, 4); // 輸出:24
const b = proxyMult(1, 2, 3, 4); // 輸出:24
複製程式碼

4. 觀察者模式

觀察者模式又叫釋出—訂閱模式，它定義物件間的一種一對多的依賴關係，當一個物件的狀態發生改變時，所有依賴於它的物件都將得到通知。在 JavaScript 開發中，我們一般用事件模型來替代傳統的觀察者模式。

4.1 DOM 事件

最早接觸到的觀察者模式大概就是 DOM 事件了，比如使用者的點選操作。我們沒辦法知道使用者什麼時候點選，但是當用戶點選時，被點選的節點就會向訂閱者釋出訊息。

document.body.addEventListener('click', function() {
  alert('我被點選啦!~');
});
複製程式碼

4.2 自定義事件

要實現自定義事件，需要進行三步：

指定釋出者；
給釋出者新增一個快取列表，用以通知訂閱者；
遍歷快取列表依次觸發存放在裡面的訂閱者的回撥函式；

class Event {
  constructor() {
    this.eventListObj = {};
  }
  static getInstance() {
    const instance = Symbol.for('instance');
    if (!Event[instance]) {
      Event[instance] = new Event();
    }
    return Event[instance];
  }
  listen(key, fn) {
    if (!this.eventListObj[key]) {
      this.eventListObj[key] = [];
    }
    // 訂閱訊息新增進快取列表
    this.eventListObj[key].push(fn);
  }
  trigger(key, ...args) {
    const fns = this.eventListObj[key];
    if (!fns || fns.length === 0) {
      return false;
    }
    fns.forEach((fn) => {
      fn.apply(this, args);
    });
  }
  remove(key, fn) {
    let fns = this.eventListObj[key];
    // 如果沒有被訂閱過
    if (!fns) {
      return false;
    }
    // 根據 fn 引數來判斷是全部移除還是指定移除
    if (!fn) {
      fns && (fns.length = 0);
    } else {
      for (let i = 0; i < fn.length; i++) {
        const f = fns[i];
        if (f === fn) {
          fns.splice(i, 1);
        }
      }
    }
  }
}
const event = Event.getInstance(); // 全域性釋出者
const add = function (a, b) {
  console.log(a + b);
}
const minus = function (a, b) {
  console.log(a - b);
}
event.listen('add', add); // 訂閱加法訊息
event.listen('minus', minus); // 訂閱減法訊息

event.trigger('add', 1, 3); // 觸發加法訂閱訊息
event.trigger('minus', 3, 1); // 觸發減法訂閱訊息

console.log('------- before remove add function:');
console.log(event);

event.remove('add', add); // 取消加法訂閱事件
console.log('------- after remove add function:');
console.log(event);
複製程式碼

執行結果：

例子：ajax 請求登入後進行多種操作，以及在 vue 中 emit 和 on，node.js 中的 events

5. 模板方法模式

模板方法模式是一種只需使用繼承就可以實現的非常簡單的模式。

模板方法模式由兩部分結構組成，第一部分是抽象父類，第二部分是具體的實現子類。

通常在抽象父類中封裝了子類的演算法框架，包括實現一些公共方法以及封裝子類中所有方法的執行順序。

子類通過繼承這個抽象類，也繼承了整個演算法結構，並且可以選擇重寫父類的方法。

下面我們來舉個例子——假如我們要泡一杯茶和一杯咖啡步驟如下：

把水煮沸
用沸水 ( 沖泡咖啡 / 浸泡茶葉 )
把 ( 咖啡 / 茶水 ) 倒進杯子
加糖和牛奶 / 加檸檬

很容易發現其中第一步是共有的，其他步驟大體一致，那麼我們就可以使用模板方法來實現它。( 假如有人不想加糖和牛奶怎麼辦呢？ )

// 抽象出飲料類用來表示咖啡和茶
class Beverage {
  init() {
    this.boilWater();
    this.brew();
    this.pourInCup();
    if (this.customerWantsCondiments()) {
      this.addCondiments();
    }
  }
  // 第一步：把水煮沸
  boilWater(){
    console.log('把水煮沸');
  }
  // 第二步：沖泡飲料，在子類中重寫
  brew(){
    throw new Error('brew function must override in child');
  }
  // 第三步：倒出飲料，在子類中重寫
  pourInCup(){
    throw new Error('pourInCup function must override in child');
  }
  // 第四步：個性化飲料，在子類中重寫
  addCondiments(){
    throw new Error('addCondiments function must override in child');
  }
  // 鉤子方法: 解決了有人不想加糖和牛奶的問題
  customerWantsCondiments() {
    return true;
  }
}

class Coffee extends Beverage {
  brew(){
    console.log('用沸水沖泡咖啡');
  }
  pourInCup(){
    console.log('把咖啡倒進杯子');
  }
  addCondiments(){
    console.log('加糖和牛奶');
  }
  //  不想個性化
  customerWantsCondiments() {
    return false;
  }
}

classTea extends Beverage {
  brew(){
    console.log('用沸水浸泡茶葉');
  }
  pourInCup(){
    console.log('把茶水倒進杯子');
  }
  addCondiments(){
    console.log('加檸檬');
  }
}

new Coffee().init();
new Tea().init();

複製程式碼

6. 職責鏈模式

職責連模式：通過把物件連成一條鏈，讓請求沿著這條鏈傳遞，直到有一個物件能處理為止，解決了傳送者和接收者之間的耦合。

A --> B --> C --> ... --> N，中間有一個物件能處理 A 物件的請求，如果沒有需要在最後處理異常。

現實中的例子：早高峰擠公交的時候遞公交卡，只需要往前遞，總會遞到售票員手裡刷卡，而不用管遞給了誰。

下面舉一個實際的例子來看看——假如現在有個電商定金優惠券功能，付 500 元定金可以獲得 100 元優惠券且一定能買到商品；付 200 元定金可以獲得 50 元優惠券且一定能買到商品，如果付定金只能進入普通購買，需要在庫存足夠的時候才可以買到商品。我們頂一個一個函式，接收三個引數：

orderType：1、2、3 分表代表 500 元定金， 200 元定金和無定金模式；
pay：true、false 代表拍下訂單是否付款；
stock：number 代表庫存餘量；

const order = function (orderType, pay, stock) {
  if (orderType === 1) {
    if (pay === true) {
      console.log('獲得 100 元優惠券');
    } else {
      if (stock > 0) {
        console.log('普通購買, 無優惠券');
      } else {
        console.log('庫存不足');
      }
    }
  } else if (orderType === 2) {
    if (pay === true) {
      console.log('獲得 50 元優惠券');
    } else {
      if (stock > 0) {
        console.log('普通購買, 無優惠券');
      } else {
        console.log('庫存不足');
      }
    }
  } else if (orderType === 3) {
    if (stock > 0) {
      console.log('普通購買, 無優惠券');
    } else {
      console.log('庫存不足');
    }
  }
}
order(1, true, 20); // 獲得 100 元優惠券
複製程式碼

這顯然不是一段好程式碼，大量的 if else 條件分支，如果業務再複雜一點，最後根本就沒法看了。

那麼我們通過 AOP 實現職責鏈：

const order500 = function (orderType, pay, stock) {
  if (orderType === 1 && pay === true) {
    return console.log('已支付定金，獲得100元優惠券');
  }
  return 'NEXT';
}

const order200 = function (orderType, pay, stock) {
  if (orderType === 2 && pay === true) {
    return console.log('已支付定金，獲得50元優惠券');
  }
  return 'NEXT';
}

const orderNormal = function (orderType, pay, stock) {
  if (stock > 0) {
    console.log('普通購買，無優惠券');
  } else {
    console.log('庫存不足');
  }
}

Function.prototype.after = function (fn) {
  const self = this;
  return function (...args) {
    const result = self.apply(this, args);
    if (result === 'NEXT') {
      return fn.apply(this, args);
    }
    return result;
  }
}

const order = order500.after(order200).after(orderNormal);
order(1, false, 10);
複製程式碼

通過分解成三個獨立的函式，返回處理不了的結果'NEXT'，交給下一個節點處理。通過 after 來進行繫結，最後我們在新增需求的時候可以在 after 中間插入即可，耦合度大大降低，但是這樣也有一個不好的地方，職責鏈過長增加了函式的作用域。

7. 中介者模式

在程式裡，物件經常會和其他物件進行通訊，當專案比較大，物件很多的時候，這種通訊就會形成一個通訊網，當我們想要修改某一個物件時，需要十分小心，以免這些改動牽一髮而動全身，導致出現BUG，非常的複雜。

中介者模式就是用來解除這些物件間的耦合，形成簡單的物件到中介者到物件的操作。

下面以現實中的機場指揮塔為例說明。

如果沒有指揮塔的情況，每一架飛機都需要和其他飛機進行通訊，確保航線的安全，我們假設目的地相同就為航線不安全：

// 飛機類
class Plane {
  constructor(name, to) {
    this.name = name;
    this.to = to;
    this.otherPlanes = [];
  }
  success() {
    console.log(`${this.name} 可以正常飛行`);
  }
  fail(plane) {
    console.log(`${this.name} 與 ${plane.name} 航線衝突，請調整`);
  }
  fly() {
    let normal = true;
    let targetPlane = {};
    for (let i = 0; i < this.otherPlanes.length; i++) {
      if (this.otherPlanes[i].to === this.to) {
        normal = false;
        targetPlane = this.otherPlanes[i];
        break;
      }
    }
    if (normal === true) {
      this.success();
    } else {
      this.fail(targetPlane);
    }
  }
}

// 飛機工廠
class PlaneFactory {
  constructor() {
    this.planes = [];
  }
  static getInstance() {
    const instance = Symbol.for('instance'); // 防止被覆蓋
    if (!PlaneFactory[instance]) {
      PlaneFactory[instance] = new PlaneFactory();
    }
    return PlaneFactory[instance];
  }
  plane(name, to) {
    const plane = new Plane(name, to);
    this.planes.push(plane);
    for (let i = 0; i < this.planes.length; i++) {
      if (plane.name !== this.planes[i].name) {
        plane.otherPlanes.push(this.planes[i]);
      }
    }
    return plane;
  }
}

const planeFactory = PlaneFactory.getInstance();

const planeA = planeFactory.plane('planeA', 1);
const planeB = planeFactory.plane('planeB', 2);
const planeC = planeFactory.plane('planeC', 3);
const planeD = planeFactory.plane('planeD', 2);

planeA.fly(); // planeA 可以正常飛行
planeB.fly(); // planeB 可以正常飛行
planeC.fly(); // planeC 可以正常飛行
planeD.fly(); // planeD 與 planeB 航線衝突，請調整
複製程式碼

當飛機足夠多時，這樣的方式就會變得非常複雜，而且某一天有飛機出故障維修不參與飛行，那麼改動也是麻煩的。

存在指揮塔的情況，飛機不需要知道其他飛機的存在，只需要向指揮塔通訊即可，而且添加了移除故障飛機的方法。

// 指揮塔
class Tower {
  constructor() {
    this.planes = [];
    this.operations = {
      add: this.add,
      remove: this.remove,
      fly: this.fly,
    };
  }
  static getInstance() {
    const instance = Symbol.for('instance'); // 防止被覆蓋
    if (!Tower[instance]) {
      Tower[instance] = new Tower();
    }
    return Tower[instance];
  }
  receiveMessage(msg, ...args) {
    this.operations[msg].apply(this, args);
  }
  add(plane) {
    this.planes.push(plane);
  }
  remove(plane) {
    for (let i = 0; i < this.planes.length; i++) {
      if (this.planes[i].name === plane.name) {
        this.planes.splice(i, 1);
      }
    }
  }
  fly(plane) {
    let normal = true;
    let targetPlane = {};
    for (let i = 0; i < this.planes.length; i++) {
      if (this.planes[i].name !== plane.name && this.planes[i].to === plane.to) {
        normal = false;
        targetPlane = this.planes[i];
        break;
      }
    }
    if (normal === true) {
      plane.success();
    } else {
      plane.fail(targetPlane);
    }
  }
}

// 獲得指揮塔例項
const tower = Tower.getInstance();

// 飛機類
class Plane {
  constructor(name, to) {
    this.name = name;
    this.to = to;
  }
  success() {
    console.log(`${this.name} 可以正常飛行`);
  }
  fail(plane) {
    console.log(`${this.name} 與 ${plane.name} 航線衝突，請調整`);
  }
  remove() {
    tower.receiveMessage('remove', this);
  }
  fly() {
    tower.receiveMessage('fly', this);
  }
}

// 飛機工廠
class PlaneFactory {
  static plane(name, to) {
    const plane = new Plane(name, to);
    tower.receiveMessage('add', plane);
    return plane;
  }
}

const planeA = PlaneFactory.plane('planeA', 1);
const planeB = PlaneFactory.plane('planeB', 2);
const planeC = PlaneFactory.plane('planeC', 3);
const planeD = PlaneFactory.plane('planeD', 2);

planeA.fly(); // planeA 可以正常飛行
planeB.fly(); // planeB 與 planeD 航線衝突，請調整
planeC.fly(); // planeC 可以正常飛行
planeD.fly(); // planeD 與 planeB 航線衝突，請調整
planeD.remove(); // 假如 planeD 出故障了，進行移除
planeB.fly(); // planeB 可以正常飛行
複製程式碼

中介者模式是知識最少原則的一種實現，是指一個物件儘可能少的瞭解其他的物件，如果物件之間的耦合度過高，一個物件發生改變之後，難免會影響到其他物件，在中介者模式中，物件幾乎不知道其他物件的存在，它們只能通過中介者物件來通訊。但是這樣的結果就是中介者物件難免會變的臃腫。

8. 裝飾者模式

裝飾者（decorator）模式：給物件動態地增加職責的方式。

我們在開發中經常會使用到，因為在 JavaScript 中對物件動態操作是一件再簡單不過的事情了。

const person = {
  name: 'shelly',
  age: 18,
}
person.job = 'student';
複製程式碼

裝飾函式

給物件擴充套件屬性和方法相對簡單，但是在改寫函式時卻不是那麼容易，尤其是儘量保證開放-封閉原則的前提下。我們可以通過使用 AOP 裝飾函式來達到理想的效果。

let add = function (a, b) {
  console.log(a + b);
}
// 在函式執行之前執行
Function.prototype.before = function (beforeFn) {
  const self = this;
  return function (...args) {
    beforeFn.apply(this, args);
    return self.apply(this, args);
  }
}
// 在函式執行之後執行
Function.prototype.after = function (afterFn) {
  const self = this;
  return function (...args) {
    const result = self.apply(this, args);
    afterFn.apply(this, args);
    return result;
  }
}
// 裝飾 add 函式
add = add
  .before(function () {
    console.log('before add');
  })
  .after(function () {
    console.log('after add');
  });

add(1, 2);
複製程式碼

9. 設計原則和程式設計技巧

9.1 單一職責原則

單一職責原則（SRP）：一個物件（方法）只做一件事情。如果一個方法承擔了過多的職責，將來改寫它的可能性就越大。

這一原則在單例模式、代理模式中都有廣泛的應用。

何時該分離？

這是很難把控的一個點，比如 ajax 請求，建立 xhr 物件和傳送請求雖然是兩個職責，但是他們是一起變化，可以不用分離；像 jQuery 的 attr 方法，既賦值，又取值，理論上應該分離，卻方便了使用者。所以需要我們在實際上拿捏。

9.2 最少知識原則

最少知識原則（LKP）：一個軟體實體應當儘可能地少於其他實體發生相互作用。這裡的實體包括了物件、類、模組、函式等。

常見的做法是引入第三方物件來承擔多個物件間的通訊，例如中介者模式、封裝。

9.3 開放 - 封閉原則

開放 - 封閉原則（OCP）：軟體實體（類、模組、函式）等應該是可以擴充套件的，但是不可修改。

OCP 在幾乎所有的設計模式中得到了很好的表現。

9.3.1 擴充套件

假如我們要修改一個函式，業務邏輯極其複雜，那麼我們遵守開放 - 封閉原則在原來的基礎繫結一個 after 方法，傳入回撥函式實現我們新的需求而不用去改變之前的程式碼。

let theMostComplicatedFn = function (a, b) {
  console.log('我是極其複雜的函式');
  console.log(a + b);
}
theMostComplicatedFn.after = function (afterFn) {
  const self = this;
  return function (...args) {
    afterFn.apply(this, args);
    const result = self.apply(this, args);
    return result;
  }
}
theMostComplicatedFn = theMostComplicatedFn.after(function (a, b) {
  console.log(a, b);
});

theMostComplicatedFn(1, 2);
// 1 2
// 我是極其複雜的函式
// 3
複製程式碼

9.3.2 多型

利用物件的多型性也可以讓程式遵循開放 - 封閉原則，這是一個常用的技巧。

我們都知道貓吃魚，狗吃肉，那麼我們用程式碼來表達一下。

const food = function (animal) {
  if (animal instanceof Cat) {
    console.log('貓吃魚');
  } else if (animal instanceof Dog) {
    console.log('狗吃肉');
  }
}

class Dog {}
class Cat {}
food(new Dog()); // 狗吃肉
food(new Cat()); // 貓吃魚
複製程式碼

有一天加入了羊，又得再加一個 else if 來判斷，如果很多呢？那麼我們就要一直去改變 food 函式，這顯然不是一種好的方法。我們現在可以利用多型性，將共同的 food 抽取出來。

const food = function (animal) {
  animal.food();
}

class Dog {
  food() {
    console.log('狗吃肉');
  }
}
class Cat {
  food() {
    console.log('貓吃魚');
  }
}
class Sheep {
  food() {
    console.log('羊吃草');
  }
}
food(new Dog()); // 狗吃肉
food(new Cat()); // 貓吃魚
food(new Sheep()); // 羊吃草
複製程式碼

這樣，當我們以後要增加新的動物時，就不需要每次都去改變 food 函數了。

9.3.3 其他方式

鉤子函式、回撥函式。

9.4 程式碼重構

9.4.1 提煉函式

把一段程式碼提煉成函式的好處是：

避免出現超大函式
獨立出來的函式有利於程式碼複用
獨立出來的函式更容易被覆寫
獨立出來的函式如果有一個好的命名，它本身就起到了註釋的作用

9.4.2 合併重複的條件片段

如果一個函式體內有一些條件分支語句，而這些條件分支語句的內部散佈了一些重複的程式碼，那麼就有必要進行合併去重工作。

9.4.3 把條件分支語句提煉成函式

下面是一個例子：

const getPrice = function (price) {
  const date = new Date();
    if (date.getMonth() >= 6 && date.getMonth() <=9) { // 夏天
      return price * 0.8;
    }
    return price;
}
複製程式碼

條件語句乍一看需要理解一會兒，那麼此處可以做一下調整：

// 通過函式名也起到了註釋作用
const isSummer = function () {
  const month = new Date().getMonth();
  return month >= 6 && month <=9;
}

const getPrice = function (price) {
  const date = new Date();
  if (isSummer()) {
    return price * 0.8;
  }
  return price;
}
複製程式碼

9.4.4 合理使用迴圈

在函式體內，如果有些程式碼實際上負責的是一些重複性的工作，那麼合理利用迴圈不僅可以完成同樣的功能，還可以使程式碼量更少。我們以建立 xhr 物件為例：

const createXHR = function () {
  let xhr;
  try {
    xhr = new ActiveXObject('MSXML2.XMLHttp.6.0');
  } catch (e) {
    try {
      xhr = new ActiveXObject('MSXML2.XMLHttp.3.0');
    } catch (e) {
      xhr = new ActiveXObject('MSXML2.XMLHttp');
    }
  }
  return xhr;
};
const xhr = createXHR();
複製程式碼

下面我們通過迴圈，可以達到和上面一樣的效果：

const createXHR = function () {
  const versions = ['MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
  for (let i = 0, version; version = versions[i++];) {
    try {
      return new ActiveXObject(version);
    } catch (e) {
    }
  }
};
const xhr = createXHR();
複製程式碼

9.4.5 提前讓函式退出代替巢狀條件分支

在多層條件分支語句中，我們可以挑選一些分支，在進入這些分支後，就立即讓函式退出，減少非關鍵程式碼的混淆。

9.4.6 傳遞物件引數代替過長的引數列表

函式引數過長過多會引起呼叫呼叫者的不適，可能出現傳少或傳反的情況。如果有這種情況，我們可以通過將引數包裝成一個物件傳入函式，然後在函式體內進行取值就可以了。