JS設計模式 -- 關于對象

1. 用對象收編變量

  var CheckObject = {
    //  驗證姓名
    checkName: function () {},
    // 驗證郵箱
    checkEmail: function () {},
    //  驗證密碼
    checkPassword: function () {}
  }

使用：

CheckObject.checkName() 
  ...

或：

var CheckObject = function () {}
CheckObject.checkName = function () {}
CheckObject.checkEmail = function () {}
CheckObject.checkPassword = function () {}

使用同上
缺點：
這個對象不能復制一份，或者說這個對象類在用new 關鍵字創(chuàng)建新的對象時，新創(chuàng)建的對象時不能繼承這些方法。

2. 真假對象

var CheckObject = function () {
  return {
    checkName: function () {
      //  驗證姓名
    }，
    checkEmail: function () {
      //  驗證郵箱
    }，
    checkPassword: function () {
      //  驗證密碼
    }
  }
}

優(yōu)點：
每次調(diào)用CheckObject 方法返回的都是新的對象，每個人在使用時互補影像。
使用：

var a = CheckObject();
a.checkEmail();

缺點：
創(chuàng)建的新對象a 與 對象CheckObject沒有任何關系

3.使用類創(chuàng)建對象

var CheckObject = function （） {
  this.checkName = function () {},
  this.checkEmail = function () {},
  this.checkPassword = function () {}
}

使用：

var a = new CheckObject();
a.checkEmail();

優(yōu)點：
所有方法都放在了函數(shù)內(nèi)部，并通過this定義，每一次使用new 關鍵字創(chuàng)建對象的時候，新創(chuàng)建的對象都會對類的this上的屬性進行復制。
所以這些新創(chuàng)建的對象都會有自己的一套方法。
缺點：
因為新創(chuàng)建的對象也會有自己的一套方法，因此有時候造成的消耗（什么消耗？）是很奢侈的。

4.檢測類

var CheckObject = function () {};
CheckObject.prototype.checkName = function () {};
CheckObject.prototype.checkEmail = function () {};
CheckObject.prototype.checkPassword = function () {};

簡化寫法：

var CheckObject = function () {};
CheckObject.prototype = {
  checkName: function () {},
  checkEmail: function () {},
  checkPassword: function () {}
}

注意： 以上兩種方式不能混用，否則，在后面為對象的原型對象賦值新對象時，會覆蓋掉之前對prototype對象賦值的方法。
使用：

var a = new CheckObject();
a.checkName();
a.checkEmail();
a.checkPassword();

升級1：

var CheckObject = {
  checkName: function () {
    return this;
  },
  checkEmail: function () {
    return this;
  },
  checkPassword: function () {
    return this;
  }
},

使用：

CheckObject.checkName().checkEmail().checkPassword();

升級2：

var CheckObject = function () {}；
CheckObject.prototype = {
  checkName: function () {
    return this;
  },
  checkEmail: function () {
    return this;
  },
  checkPassword: function () {
    return this;
  }
}

使用：

var a = new CheckObject();
a.checkName().checkEmail().checkPassword();

5. prototype.js

Function.prototype.addMethod = function (name. fn){
  this[name] = fn;
}
//  添加方法
var methods = function () {};
 //  或者
var methods = new Function();
methods.addMethod('checkName', function () {});
methods.addMethod('checkEmail', function () {});
methods.checkName();
methods.checkEmail();

鏈式操作：

Function.prototype.addMethod = function (name, fn) {
  this[name] = fn;
  return this;
}
var methods = function () {};
methods.addMethod('checkName', function() {
  return this;
}).addMethod('checkEmail',function () {
  return this;
});
methods.checkName().checkEmail();

類式調(diào)用：

Function.prototype.addMethod = function (name, fn) {
  this.prototype[name] = fn;
}
//  添加方法
var Methods = function () {};
methods.addMethod('checkName', function () {}).addMethod('checkeEmail', function () {});
//  使用
var m = new Methods();
m.checkEmail();

JS的三類方法：

1）類方法
2）對象方法
3）原型方法

function CheckObject (name) {
  this.name = name;
// 對象方法
  this.checkName = function () {
    console.log(' Name is ' + this.name);
  }
}
//  類方法
CheckObject.checkEmail = function (email) {
  console.log(" Email is " + email);
}
//  原型方法
CheckObject.prototype.checkPassword = function (password) {
  console.log('Password is ' + password);
}

// 測試
var LoginInputCheck = new CheckObject('admin');
console.log(LoginInputCheck );/* 輸出：見圖1 */
console.log(CheckObject); /* 輸出：見圖2 */
console.log(CheckObject.prototype); /*輸出：見圖3*/

LoginInputCheck.checkName(); // 輸出： Name is admin
CheckObject.checkEmail('admin@hello.com'); // 輸出: Email is admin@hello.com
LoginInputCheck.checkPassword('123'); //  輸出:  Password is 123

CheckObject.checkPassword('456');
 /* 輸出：報錯 Uncaught TypeError: CheckObject.checkPassword is not a function */
LoginInputCheck.checkEmail('login@email'); 
/* 輸出：報錯 Uncaught TypeError: LoginInputCheck.checkEmail is not a function*/
圖1.png console.log(LoginInputCheck );
圖2.png console.log(CheckObject);
圖3.png console.log(CheckObject.prototype)

javascript中的每個對象都有prototype屬性，Javascript中對象的prototype屬性的解釋是：返回對象類型原型的引用。
-- 因此，改變原型，會影響通過原型創(chuàng)造的實例

A.prototype = new B();
A的prototype為B的一個實例，可以理解為A將B中的方法和屬性全部克隆了一遍。A具有使用B的方法和屬性。
函數(shù)運行時會先去本體的函數(shù)中去找，如果找到則運行，找不到則去prototype中尋找函數(shù)?；蛘呖梢岳斫鉃閜rototype不會克隆同名函數(shù)。如果要調(diào)用prototype指向的對象的方法可以用call()。
例如：

function A() {
 this.Msg = function () {
   alert(" A 's Msg");
 }
}

function B() {
 this.Msg = function () {
   alert('B 's Msg');
 }
}
B.prototype = new A();
var Ub = new B();
Ub.Msg(); //  輸出： B 's Msg

// if you want to output 'A 's Msg'
var Ua = new A();
Ua.Msg.call(Ub); // 輸出： A ’s Msg ； It means "將Ub當做Ua來調(diào)用，調(diào)用Ua的對象方法Msg"

為什么不直接用A.Msg.call(Ub)? --慣性

最后編輯于 ：
?著作權歸作者所有,轉載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內(nèi)容

  • ??面向對象（Object-Oriented，OO）的語言有一個標志，那就是它們都有類的概念，而通過類可以創(chuàng)建任意...
    霜天曉閱讀 2,262評論 0贊 6
  • 第3章 基本概念 3.1 語法 3.2 關鍵字和保留字 3.3 變量 3.4 數(shù)據(jù)類型 5種簡單數(shù)據(jù)類型：Unde...
    RickCole閱讀 5,527評論 0贊 21
  • 官方中文版原文鏈接 感謝社區(qū)中各位的大力支持，譯者再次奉上一點點福利：阿里云產(chǎn)品券，享受所有官網(wǎng)優(yōu)惠，并抽取幸運大...
    HetfieldJoe閱讀 3,084評論 4贊 14
  • 工廠模式類似于現(xiàn)實生活中的工廠可以產(chǎn)生大量相似的商品，去做同樣的事情，實現(xiàn)同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 8,131評論 2贊 17
  • 莫名其妙的一整棟樓都停電了，沒有網(wǎng)，沒有燈光，默默的關閉了電腦，爬上床，雖然，我?guī)缀醪晃缢??？稍谶@個陰冷灰暗的雨天...
    簡簡木木閱讀 450評論 0贊 3

友情鏈接更多精彩內(nèi)容