[关闭]
@zero1036 2016-12-09T08:46:02.000000Z 字数 7071 阅读 1184

JavaScript设计模式

JavaScript

在学习使用Javascript之前,我的程序猿生涯里面仅有接触的编程语言是C#跟Java——忽略当年在大学补考了N次的C与VB。

从静态编程语言,转到动态语言JS,刚开始的时候,遇到不少困难与错误。可能因为先入为主,在JS编程之中,往往不由自主地以C#的逻辑、编程思路、设计模式进行JS开发。

时间长了,渐渐发现JS设计模式对于前端开发的重要性,但在分享JS设计模式之前,希望首先分享几点个人觉得很重要的JS设计模式基础。有些地方,可能研究得也不是很深入,有什么错误的话,望指正。

动态类型语言

静态类型语言,在编译阶段,就需要确定变量的类型。但动态类型语言,只有程序运行时,根据当时语言执行环境,变量才会赋予其类型。

所以C#,不能抛开runtime与编译器单独运行,Java也离不开JVM。同时也有一大堆问题需要考虑的,跨平台、类型转换、反射、Ioc、接口编程、抽象化、动态代理等等一大堆概念技术的产生,还不是因为静态语言的强类型特性,需要更多的手段让其得到灵活多态的特性。

  1. public class Main
  2. {
  3. public void Function()
  4. {
  5. //在编译的时候,.net runtime必须要知道dog是一只狗
  6. Dog dog = new Dog();
  7. Console.WriteLine(dog.Name);
  8. }
  9. }

但,JS只需要个文本编辑器,没有编译通过不通过的概念,加载了浏览器就能跑。

  1. var a = 1;
  2. console.log(typeof a);//number
  3. a = "a";
  4. console.log(typeof a);//string

原型模式

ECMAScript 5之前JS是没有类的,W3C的大牛是有所发现的,所以ES6会新的类语法,但是各大浏览器(IE)猴年马月才跟进就不得而知了——绝对不是针对IE。

在静态类型语言开发中,类是任意实体的结构,当需要这个实体的时候,系统依照这个结构,“画”出这个==对象==。
譬如,要设计车,首先是要设计稿,设计稿就是类,然后照着设计稿生产的每一台车就是具体的对象。
所以,静态类型语言当中,得到一个对象的最关键就是先有这个对象的设计稿(类),就是知道它的类型。

但是,JS不一样。
JS是以原型模式作为设计基础。得到一个对象之前,我们不关心对象属于什么类型,它的设计稿是怎么样的,JS是通过拷贝一个其他对象而获得对象的。

  1. //定义超人是超人,超人可以飞
  2. var superman = {
  3. name: "superman",
  4. fly: function () {
  5. console.log(this.name + " is flying");
  6. }
  7. };
  8. superman.fly();//superman is flying
  9. //万一,想要个妹子呢,搞个女超人如何?女超人也会飞?要不就复制一个超人的对象吧。
  10. //通过Object.create复制一个超人,但定义它是女超人。
  11. var superwomen = Object.create(superman);
  12. superwomen.name = "superwomen";
  13. superwomen.fly();//superwomen is flying
  14. //DC的不喜欢,来个漫威吧,再搞个钢铁侠?钢铁侠也会飞
  15. var ironman = Object.create(superman);
  16. ironman.name = "ironman";
  17. ironman.fly();//ironman is flying

千万别误解了superman就是类,而superwomen、ironman就是superman实例化得到的对象,superman、superwomen、ironman都是对象,superwomen、ironman都是superman对象拷贝的结果。

1、所有的数据都是对象

上面的例子,通过var obj={}创建对象,其等价于var obj=new Object()。Object对象可以创建对象,但不仅是Object才是对象,所有的数据都是对象,包括Number、Boolean、String、Function、Object。这是原型模式很重要的一条原则。
正是这一点,我们也可以利用function定义对象:function obj(){};

不过与var obj=new Object()不同,function定义的对象,是一个带构造器的函数,通过new关键字调用构造器可以获取其原型对象。参考以下例子。

  1. //定义一个对象
  2. var superman = {
  3. name: "superman",
  4. fly: function () {
  5. console.log(this.name + " is flying");
  6. }
  7. };
  8. superman.fly();//superman is flying
  9. //定义一个函数,同时也是一个带构造器的函数
  10. function superman2() {
  11. this.name = "superman";
  12. this.fly = function () {
  13. console.log(this.name + " is flying");
  14. };
  15. };
  16. //错误:superman2是函数,fly()不是函数
  17. superman2.fly();//error:undefined is not a function
  18. //错误:superman2()是调用函数,但函数没有返回带fly()函数的对象
  19. superman2().fly();//error:Cannot read property 'fly' of undefined
  20. //正确:new不是C#实例化关键字,new是调用superman2的构造器并返回其对象
  21. var sm = new superman2();
  22. sm.fly();//superman is flying

2、对象的属性请求,会从对象传递到对象原型

当需要获得对象属性时,会首先请求对象本身,如果,对象本身没有属性可以响应,则响应其对象原型prototype;如果prototype也没有属性可以响应,则进一步请求原型的原型,从而形成一条原型链。当然,原型链的层级不能太长,具体长度没有研究过,我觉得3级也差不多了。

  1. //定义人
  2. function human() {
  3. this.sexy = "male";
  4. };
  5. //定义所有英雄的原型
  6. function heroBase() {
  7. this.trait = "strong cool";
  8. };
  9. //英雄的原型是人
  10. heroBase.prototype = new human();
  11. //定义超人
  12. function superman() {
  13. this.fly = function () {
  14. console.log("superman");
  15. };
  16. };
  17. //超人的原型就是英雄
  18. superman.prototype = new heroBase();
  19. console.log(new superman().sexy);//male
  20. console.log(new superman().trait);//strong cool

这个步骤就是:
* 超人的性别是神马?
* 光看超人不知道,要看超人原型:英雄
* 看英雄也不知道,要看英雄原型:人
* 人的sexy属性告诉我们,他是男人

好吧,也许你发现了,上面例子是有bug的,超人是外星人;但你肯定发现了,这不就是继承吗?继承都有了,多态还能远吗?

3、JS就是通过原型模式实现继承的,且是单一继承

我个人的理解是,JS的继承跟C#的继承虽然实现形式不同,但有一点原则是相同的,单一继承非多继承。如上例子换成以下代码:
superman.prototype = new heroBase();
superman.prototype = new human();
最终结果是,超人的原型首先定为英雄,但又被人所覆盖了。符合单一继承的原则。

4、特别补充:关于__proto__prototype的区别

之前一直以为搞懂了原型模式,最近看到一篇很好文章 [[学习笔记] 小角度看JS原型链 梦禅][1],涨姿势了。

在 segmentfault 上看到这样一道题目:

  1. var F = function(){};
  2. Object.prototype.a = function(){};
  3. Function.prototype.b = function(){};
  4. var f = new F();

问:f 能取到a,b吗?原理是什么?

关键理解:
prototype是对象原型
__proto__是对象构造器的原型
关于两者区别,推荐一遍博文,解释非常详细,[理解js中的原型链,prototype与proto的关系][2]

自己列了例子,应该比较容易理解

  1. var F = function () { };
  2. Object.prototype.a = function () {
  3. console.log("a");
  4. };
  5. Function.prototype.b = function () {
  6. console.log("b");
  7. };
  8. var f = new F();
  9. //注意:对象的__proto__属性,指向对象的父级构造器的prototype原型
  10. console.log(f);
  11. console.log(f.__proto__); //F.prototype
  12. console.log(F.prototype.__proto__); //Ojbect.prototype
  13. console.log(Object.prototype.a()); //a
  14. console.log(f.__proto__.__proto__.a()); //a
  15. /****************************************************************/
  16. console.log(f.constructor); //F
  17. console.log(F.__proto__); //Function.prototype
  18. console.log(Function.prototype.b()); //b
  19. console.log(f.constructor.__proto__.b()); //b
  20. //结论:所有对象的__proto__都指向其构造器的prototype
  21. //结论:所有构造器/函数的__proto__都指向Function.prototype,它是一个空函数(Empty function)
  22. //结论:Function.prototype的__proto__最终指向Object.prototype
  1. 所有对象的proto都指向其构造器的prototype
  2. 所有构造器/函数的proto都指向Function.prototype,它是一个空函数(Empty function)
  3. Function.prototype的proto最终指向Object.prototype

多态

JS的多态是通过两点实现的:1、原型模式实现继承;2、动态类型实现泛型

回想一下,我们刚学习C#的那个经典例子

  1. public class Hero
  2. {
  3. public virtual void Fly()
  4. {
  5. Console.WriteLine("hero fly");
  6. }
  7. }
  8. public class SuperMan : Hero
  9. {
  10. public override void Fly()
  11. {
  12. base.Fly();
  13. Console.WriteLine("SuperMan fly");
  14. }
  15. }
  16. public class IronMan : Hero
  17. {
  18. public override void Fly()
  19. {
  20. base.Fly();
  21. Console.WriteLine("IronMan fly");
  22. }
  23. }
  24. public class Main
  25. {
  26. public void MainFunction()
  27. {
  28. LetsFly(new SuperMan());
  29. LetsFly(new IronMan());
  30. }
  31. public void LetsFly(Hero hero)
  32. {
  33. hero.Fly();
  34. }
  35. }

再来看看JS的实现

  1. function superman() {
  2. this.fly = function () {
  3. console.log("superman fly");
  4. };
  5. }
  6. function bird() {
  7. this.fly = function () {
  8. console.log("bird fly");
  9. };
  10. };
  11. function letsFly(hero) {
  12. hero.fly();
  13. }
  14. var sm = new superman();
  15. var b = new bird();
  16. letsFly(sm);//superman fly
  17. letsFly(b);//bird fly;

LetsFly()方法,C#跟JS接受的同样都是Hero这个对象

对于C#而言,LetsFly方法要求不管是神马Hero,只要实现了基类Hero的Fly,它就能执行LetsFly方法,以后即使有再多的英雄,继承Hero即可。

而JS,LetsFly方法要求不管是神马对象,只要有Fly方法,它就能执行LetsFly方法,以后即使有再多的英雄,英雄会Fly即可。

对比之下,优缺点是显而易见的,前者受到束缚,尤其在复杂类型之间继承与引用提现的更加凸显,但类型安全性高;

后者无拘无束,但类型安全性低,如上例子,LetsFly传入的可能不是Hero,很可能是Bird。

闭包与高阶函数

关于闭包“closure”,刚开始接触的时候,百度了N遍相关教程还是看得我一头雾水,
听说还会有内存泄露的问题,好吧,在开发中干脆就不用吧。直到有一天,偶尔看到高阶函数,对于闭包以及整个JS语言的理解可以说产生了翻天覆地的变化。

在这之前,先给大家回顾一下,闭包之所以成为闭包之前,有一个很重要的前提概念:变量的生命周期。
在函数体内,var定义的变量,变量属于函数内,函数外无法访问;反之如果没有定义var的变量,像x=12,x属于全局变量。
全局变量的生命周期是永久的,由页面加载到关闭;而内部变量,从函数执行到结束,GC检测到内部变量没有再被使用则会销毁它。

  1. var fn = function () {
  2. var a = "a";
  3. b = "b";
  4. var fni = function () {
  5. c = "c";
  6. }();
  7. }();
  8. //console.log(a);//a is not defined
  9. console.log(b);//b
  10. console.log(c);//c

关键就在这,如果内部变量在函数执行结束后,仍然有被使用呢?

解决方案就是——高阶函数

高阶函数名字看起来高端,实际很简单,满足以下条件其一就是高阶函数:

1、函数的参数是函数;

2、函数的返回值是函数;

  1. function myFunction() {
  2. console.log("我是个函数");
  3. };
  4. //高阶函数1——函数的参数是函数
  5. function fnHO1(fn) {
  6. fn();
  7. }
  8. //高阶函数2——函数的返回值是函数
  9. function fnHO2() {
  10. return myFunction;
  11. };
  12. //调用高阶函数1
  13. fnHO1(myFunction);//我是个函数
  14. //调用高阶函数2
  15. fnHO2();//神马都没有发生
  16. //调用高阶函数2,获得的是它的内部函数体
  17. var f2 = fnHO2();
  18. //再执行,才是调用它的内部函数
  19. f2();//我是个函数

在高阶函数的基础,我们来看看,史上最经典的闭包实例。

  1. function add_outer() {
  2. var i = 1;
  3. //返回值是内部函数,inner调用了其外部的变量
  4. //所以inner执行结束时,i没有被销毁
  5. return function inner() {
  6. i++;
  7. return i;
  8. };
  9. };
  10. //执行add_outer获取的是它的内部函数体inner,但没有执行
  11. var inner = add_outer();
  12. //真正执行的时候,变量i没有被销毁,形成递增
  13. console.log(inner());//2
  14. console.log(inner());//3
  15. console.log(inner());//4

我对于闭包的理解很简单:==函数返回值是个内部函数,内部调用了函数的内部变量==。

两个条件,缺一不可。如果将以上例子改一下,内部有函数,但不是返回值,就不是闭包了。

  1. function add_outer() {
  2. var i = 1;
  3. //返回值不是函数,形成不了闭包
  4. function inner() {
  5. i++;
  6. console.log(i);
  7. };
  8. inner();
  9. };
  10. //执行多次,值也不会变
  11. add_outer();//2
  12. add_outer();//2

也许大家会疑问,既然内部变量i在函数结束后仍然使用,导致GC无法回收其内存,那不就是内存泄露吗?
是的。其实我们反过来想,如果我们不使用闭包的方式实现以上累加的例子,改为使用全局变量存放变量i,全局变量i是否同样也是不能被回收呢?!

  1. //function add_outer() {
  2. var i = 1;
  3. function inner() {
  4. i++;
  5. return i;
  6. };
  7. //};
  8. ////执行add_outer获取的是它的内部函数体inner,但没有执行
  9. //var inner = add_outer();
  10. //真正执行的时候,变量i没有被销毁,形成递增
  11. console.log(inner());//2
  12. console.log(inner());//3
  13. console.log(inner());//4

因此,闭包与高阶函数,只是函数式编程的编写方式,即使并不是造成内存泄露的原因。关于闭包与内存泄露的问题,请移步 http://www.cnblogs.com/yakun/p/3932026.html

原型模式、闭包与高阶函数应该可以说是JS设计模式的基础要领吧。在下一章,再分享一下JS的几种常用设计模式。

还是像前面所说的,有什么地方说错,望大家指正。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注