1. 面向对象的JavaScript

本文源于本人关于《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,并返回该值。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,456评论 5 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,370评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,337评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,583评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,596评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,572评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,936评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,595评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,850评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,601评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,685评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,371评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,951评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,934评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,167评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,636评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,411评论 2 342

推荐阅读更多精彩内容