《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

函数提升

对于函数声明，js解释器不仅提升了函数名，并且提升了函数的定义。即在程序最开始先解析函数定义，再执行其他代码，所以可以在函数声明之前调用。

test-1编译后的代码示意：

// 函数声明
function say() {
  console.log("Hi");
}
// 函数调用
say();
// 打印say
console.log(say);

对于函数表达式，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的过程

《JavaScript设计模式》笔记(一)

一、 定义函数的两种方式

函数提升

二、 对象

三、 Function

参考

推荐阅读更多精彩内容

一、定义函数的两种方式

二、对象