本文源于本人关于《JavaScript设计模式与开发实践》(曾探著)的阅读总结。想详细了解具体内容建议阅读该书。
1. 动态类型语言和鸭子类型
语言类型
- 静态类型:在编译时便已确定变量的类型。
- 优点:
- 发现类型匹配不正确
- 提高程序执行速度
- 缺点:
- 迫使程序员按照强契约来编写程序
- 类型声明增加很多代码
- 让程序员精力从业务逻辑上分散
- 优点:
- 动态类型:变量类型要到程序运行的时候,待变量被赋予某个值之后,才会具有某种类型。
- 优点:
- 代码简洁
- 精力集中在业务逻辑上
- 缺点:
- 无法保证变量类型,从而程序运行期有可能发生跟类型相关的错误。
- 优点:
鸭子类型
我需要1000只鸭子组成合唱团来给村长唱歌,但是找遍全村只有999支鸭子,但是有一只鸡的叫声像鸭子,于是它就加入了这支合唱团。
鸭子类型指导我们只用关心对象的行为,而不需要关注对象本身。
在动态语言面向对象设计中,鸭子类型的概念至关重要,利用鸭子类型思想,我们不必借助超类型的帮助,就能轻松实现一个原则:“面向接口编程,而不是面向实现编程”。
2. 多肽:同一操作作用于不同的对象上面,可以产生不同的解释和不同的执行结果。
var makeSound = function(animal) {
if(animal instanceof Duck){
console.log('gagaga');
}else if(animal instanceof Chicken){
console.log('gogogo');
}
}
var Duck = function(){}
var Chicken = function(){}
makeSound(new Duck()); // gagaga
makeSound(new Chicken()); // gogogo
这是一段多肽,问题在于:如果下一次又加了一条狗,那么我们不得不修改makeSound,我们希望makeSound就像一条指令,指令不会发生任何变换,但是响应指令的对象会根据自身的特性发出不同的动作,类似于电影拍摄:
导演一声action,主角开始背单词,照明师负责打灯光,后面的群众演员也根据自己的剧本上的内容作出相应反应。而不是一声action之后,需要分别走到主角面前告诉他要干什么,然后又走向灯光师告诉他要做什么(对应到上例的条件分枝)。
所以最终我们的代码应该这么写:
var Duck = function(){}
Duck.prototype.sound = function(){
console.log('gagaga');
}
var Chicken = function(){}
Chicken.prototype.sound = function(){
console.log('gogogo');
}
var makeSound = function(animal){
animal.sound();
}
由于js是动态语言类型,故不需要类型检查,如果换成Java则需要使用[抽象类动物,接口:叫],[鸭子,gagaga],[鸡,gogogo]这样的继承方式实现多肽。
3. 封装
将信息或者其他东西进行隐藏,外部不需要关心内部实现,只要接口返回的内容保持不变就可以。
封装数据
js没有private,public,protected这些关键字来提供不同的权限,,但js能依赖变量的作用域模仿出public和private这两种封装性。
var myObject = (function(){
var _name = 'yozo';
return {
getName: function() {
return _name;
},
square: function(a) {
return a*a;
}
}
})()
console.log(_name) // undefined
console.log(myObject.getName()); // yozo
_name在外部不能访问, 达到了private的效果,getName暴露了出来,达到了public的效果。
封装实现
类似于上例子的square方法,它的作用是求一个数的平方,我们只需要调用该接口就好,我们并不需要关注内部的具体实现,换句话说我们可以随意修改内部实现,只要对外接口没有变化,就不会影响到其他程序,使对象之间的关系变得松散。
封装类型
就像鸭子类型,我们不需要关心具体是什么类型,只要关注行为就好。js本身为动态类型,我们并不需要再此方面做更多。
封装变化
var getUserInfo = function(userId, callback){
$.ajax('http://xxx.com/getUserInfo?' + userId, function({
if(typeof callback === 'function'){
callback(data)
}
})
}
getUserInfo(123, function(data){
console.log(data.userName);
})
区分变化, 不变化的部分是 永远都要利用userId获得用户信息,变化的部分是,获取数据之后究竟应该触发什么样的行为。这可以最大程度保证程序的可扩展性和稳定性。当我们想办法把程序中变化的部分封装好了之后,剩下的即是稳定而可复用的部分了。
4. 原型模式和基于原型模式的JavaScript对象系统
使用克隆的原型模式:
创建对象的一种模式,不再关心对象的具体类型而是找到一个对象,然后通过克隆创建一个一摸一样的对象:
var Plane = function(){
this.blood = 100;
this.attckLevel = 1;
this.defenseLevel = 1;
}
var plane = new Plane();
plane.blood = 1000;
plane.attckLevel = 7;
plane.defenseLevel = 10;
var clonePlane = Object.create(plane);
console.log(clonePlane.blood);
console.log(clonePlane.attckLevel);
console.log(clonePlane.defenseLevel);
JavaScript中的原型继承
所有的数据都是对象
基本类型包括:undefined, number, boolean, string, function, object。
除了undefined之外,一切都应是对象,number boolean string也可以通过“包装类”的方式来变为对象。
事实上,js中的根对象是Object.prototype,该对象是一个空对象,我们在js遇到的每个对象都是从该对象克隆而来。
要得到一个对象,不是通过实例化类,而是找到一个对象作为原型并克隆它。
function Person(name) {
this.name = name;
};
Person.prototype.getName = function () {
return this.name;
};
var a = new Person('yozo');
var objectFactory = function() {
var obj = new Object();
Constructor = [].shift.call(arguments);
obj.__proto__ = Constructor.prototype; // 指向正确的原型
var ret = Constructor.apply(obj, arguments);
return typeof ret === 'object' ? ret : obj; // 确保构造器总是返回一个对象
}
var a1 = objectFactory(Person, 'yoko');
console.log(a.getName());
console.log(a1.getName());
通常在js中我们也会使用new方法,new这样的写法看来像是类的实例化,其实此时的Person就像一个构造器,用new来创建对象的过程,实际上也只是先克隆Object.prototype对象,再做一些额外操作。我们可以通过objectFactory来理解new的运算过程。
对象会记住它的原型
目前我们一直都在说对象的原型,其实就js真正的实现来说,其实并不能说对象有原型,而只能说对象的构造器有原型。
var a = new Object();
console.log( a.__proto__ === Object.prototype ) // true
对象如果无法响应某个请求,它会把这个请求委托给它的构造器原型
var A = function(){};
a.prototype = { name:'yozo' };
var B = function(){};
B.prototype = new A();
var b = new B();
console.log(b.name); // 输出yozo
- 首先遍历b的所有属性,没有找到name这个属性;
- 委托给构造器的原型,由于
B.prototype = new A();
,查找new A()
这个对象。 - 由于
new A()
这个匿名对象也没有name这个属性,于是查找A.prototype。 - 找到了name,并返回该值。