《JavaScript設計模式》筆記(一)

《JavaScript設計模式》需要讀者具有一定的js基礎,否則不太容易看得懂,本人學習過程中就有諸多疑問點,也算崎嶇坎坷。建議大家可以先行閱讀《JavaScript高級程序設計》。

一、 定義函數的兩種方式

第一章的1.1 和 1.2小節其實是籠統的提出定義函數的兩種方式,下面是實例講解:

  • 函數聲明
// 函數調用
say();
// 打印say
console.log(say);
// 函數聲明
function say() {
  console.log("Hi");
}

test-1

test-1.png
  • 函數表達式
// 打印say
console.log(say);
// 函數表達式
var say = function () {
  console.log("Hi");
}

test-2

test-2.png
函數提升
  1. 對于函數聲明,js解釋器不僅提升了函數名,并且提升了函數的定義。即在程序最開始先解析函數定義,再執行其他代碼,所以可以在函數聲明之前調用。

test-1編譯后的代碼示意:

// 函數聲明
function say() {
  console.log("Hi");
}
// 函數調用
say();
// 打印say
console.log(say);
  1. 對于函數表達式,js解釋器僅僅提升了變量名,當執行到函數體時才會開始解析。

test-2編譯過后代碼示意:

var say = undefined;
// 打印say
console.log(say);
// 函數表達式
say = function () {
  console.log("Hi");
}

二、 對象

1.3 - 1.5小節都是關于如何多樣化創建對象,1.6 - 1.7小節是模擬類,1.8小節是鏈式調用。

為了減少覆蓋或被覆蓋的風險,可以使用對象封裝變量和函數。

  • 對象字面量
var Person = {
  say: function () {
    console.log("Hi");
  },
  eat: function () {
    console.log("eat");
  }
}
  • 點語法添加方法

這里通過點語法添加的是靜態方法,對象實例是無法訪問的!!!

var Person =  function () {};
Person.say = function () {
  console.log("Hi");
}
Person.eat = function () {
  console.log("eat");
}

此時使用console.log()打印Person結果為? () {},因為console.log(Person)實際打印的是Person.toString()。

Function對象覆蓋了從object繼承來的Object.prototype.tostring方法,函數的tosting方法會返回一個表示函數源代碼的字符串。具體來說,包括 function關鍵字,形參列表,大括號,以及函數體中的內容。

建議使用console.dir()打印。

匿名函數.png
  • 簡易工廠
var  Person = function () {
  return {
    say: function () {
      console.log("Hi");
     },
    eat: function () {
      console.log("eat");
    }
  }
}
var Person = function () {
  // 公有方法
  this.say = function () {
    console.log("Hi");
  },
  this.eat = function () {
    console.log("eat");
  }
}

創建對象實例

var person = new Person();
  • 原型
var Person = function () {};
// 原型方法
Person.prototype = {
  say: function () {
    console.log("Hi");
  },
  eat: function () {
    console.log("eat");
  }
}
  • 鏈式調用

關鍵在于返回this

var Person = function () {};
Person.prototype = {
  say: function () {
    console.log("Hi");
    return this;
  },
  eat: function () {
    console.log("eat");
    return this;
  }
}

鏈式調用

var person = new Person();
person.say().eat()

三、 Function

  • 函數式調用

注意下面this[name] = fn,這句代碼相當于添加靜態方法,所以即使通過new關鍵字來創建新對象,對象實例也無法訪問類的靜態方法。

Function.prototype.addMethod = function(name, fn) {
  // 這里相當于添加靜態方法
  this[name] = fn;
  return this;
}
// var methods = new Function ();   不建議使用
var methods = function () {};

// 鏈式添加
methods.addMethod('say', function () {
  console.log("Hi");
  return this;
}).addMethod('eat', function () {
  console.log("eat");
  return this;
});
// 鏈式調用
methods.say().eat();
  • 類式調用
Function.prototype.addMethod = function(name, fn) {
  // 這里相當于添加原型方法
  this.prototype[name] = fn;
  return this;
}
var Methods = new Function ();

Methods.addMethod('say', function () {
  console.log("Hi");
  return this;
}).addMethod('eat', function () {
  console.log("eat");
  return this;
});

var m = new Methods ();
m.say().eat();

參考

segmentfault conlog()是如何打印函數的
Function.prototype.string()
js中object轉化成string的過程

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 工廠模式類似于現實生活中的工廠可以產生大量相似的商品,去做同樣的事情,實現同樣的效果;這時候需要使用工廠模式。簡單...
    舟漁行舟閱讀 7,827評論 2 17
  • 單例模式 適用場景:可能會在場景中使用到對象,但只有一個實例,加載時并不主動創建,需要時才創建 最常見的單例模式,...
    Obeing閱讀 2,093評論 1 10
  • 1. Java基礎部分 基礎部分的順序:基本語法,類相關的語法,內部類的語法,繼承相關的語法,異常的語法,線程的語...
    子非魚_t_閱讀 31,759評論 18 399
  • 1. git 原理 git與其他版本控制器不同,不保存文件前后變化的差異數據,只保存每次變化的文件的快照,生成指紋...
    桃逸閱讀 454評論 0 0
  • 收聽播客請點擊:簡書短篇小說播客第十期 青蛇后傳·南風悠悠(上) 青蛇后傳·南風悠悠(下) 文:四葉香徊主播:暖晴...
    暖晴a閱讀 478評論 21 9