《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的过程