Udacity上的Javascript Design Pattern

其实js才是真正的面向对象的语言,因为里面只有对象而没有class。

这里的OO,就是要在JS中实现类似传统语言中面向对象的设计模式,来实现其他语言中OO模式的目的(比如继承)。

  • 在JS中使用OO模式的意义:code saving and share memory / DRY / 让对象可以使用既有的functions
  • 作用域
    • if和loop等的{}是没有作用域的,只有function的{}里是作用域
    • Execution context:动态
      1. 内存scope,但并不能被代码引用/使用
      2. 用于在运行时存放变量
      3. 表示为:是从哪里开始寻找变量的
      4. key-value pair,变量名-变量值
      5. 一开始有一个global scope
      6. 每次执行函数,就会临时创建一个scope,变为当前的Execution context。执行完毕之后释放
    • Lexical scope:代码静态的作用域
  • 闭包:函数可以捕获静态作用域中的变量
    • 如果我们定义了一个function,这个function本身能把它能触及的所有Lexical scope里的变量捕获(实际上是持有这个lexical scope),则待到它被调用的时候,可以直接使用这些被捕获的值
  • this到底指向谁?
    • this的值是被动态绑定的,调用的那一刻才被决定
      • 默认:global object
      • 被一个object invoke:obj.func1( a, b ); func1里面的this指向obj
      • 被指定的object invoke:func2.call( obj2, a, b ); func2里面的this指向obj2
      • 关键字new:var obj = new Constr( ); 用new调用的时候,构造器中的this为构造出来的新obj
  • JS中实现OO的几种方式:
    • Prototype Chain ( delegate ) - 有创建新对象
      • var rose = Object.create( gold );
      • rose就可以通过委托的方式“使用”gold的属性和函数(如果rose本身没有相应属性的话)
      • rose.func1( a ); 这种调用方式,无论func1是“属于”rose,或是属于gold,或者更上面的obj,func1里的this会指向rose
    • Decoration - 没有创建新对象
      • 定义一个carlike的funciton,接受一个object作为参数,给这个object添加一些属性,添加一些函数,最终返回这个被“装饰过”的object
      • 需要添加的那些新函数,可以让所有的object都共享同一个,或是给每个object都“安装”相同的新函数
        • 共享:节省内存
        • 非共享:每个object的新函数都有针对每个object单独的闭包
          var carlike = function (obj, loc) {
              obj.loc = loc;
              obj.move = move;
              return obj;
          };
          var move = function() {
              this.loc++;
          };
          var amy = carlike( {}, 1 );
          var ben = carlike( {}, 9 );
          amy.move();
          ben.move();
          // after refactor
          // 每个被decorate过的obj都会有自己单独的move function
          // 这是不把move function曝露在global scope下的代价
          // 好处是每个obj的move function都会有自己单独的闭包变量(捕获的变量)
          var carlike = function (obj, loc) {
              obj.loc = loc;
              obj.move = function() {
                  obj.loc++;
              };
              return obj;
          };
          var amy = carlike( {}, 1 );
          var ben = carlike( {}, 9 );
          amy.move();
          ben.move();
  • Functional Class - 有创建新对象
    • 在一个function中直接构建一个全新的object,并返回
    • 看起来比较像传统OO语言中的Class的构造器
          // Version 1
          var Car = function(loc) {
              var obj = { loc: loc };
              obj.move = move;
              return obj;
          };
          var move = function() {
              this.loc++;
          };
          // 没有使用new关键字
          // 多个对象share同一个move函数
          var amy = Car(1);
          amy.move();
          var ben = Car(2);
          ben.move();
          // Version 2
          var Car = function(loc) {
              var obj = { loc: loc };
              // 非内建函数;给obj添加methods
              extend(obj, Car.methods);
              return obj;
          };
          // 这样就不会把methods曝露在global作用域下
          // 而move这个function的lexical scope不在Car这个function中
          Car.methods = {
              move: function () {
                  this.loc++;
              }
          };
  • Prototypal Class - 有创建新对象
    • 使用了原型链(代理)模式的Functional Class,让所有的objects共享相同的functions
    • 让每个新object的delegate都指向"Class"( constructor )的prototype,这样需要扩展所有object的能力,只需往"Class"的prototype添加函数即可
          var Car = function(loc) {
              // 新建的所有obj都会向Car.prototype这个对象delegate
              // 无需再复制一次所有的functions
              var obj = {Object.create(Car.prototype)};
              obj.loc = loc;
              return obj;
          };
          Car.prototype.move = function (){
              this.loc++;
          };
          var amy = Car(1);
          amy.move();
  • Pseudoclassical Patterns - 有创建新对象( new )
    • 使用new关键字
    • Prototypal Class的简便形式
    • 也是通过往constructor的prototype添加function,来扩展当前所有objects的能力
          // 不同点
          var Car = function(loc) {
              // 如果是用new关键字invoke Car这个function
              // 则可以省去下面2行注释的代码
              // this obj = {Object.create(Car.prototype)};
              this.loc = loc;
              // return this;
          };
          // 共同点
          Car.prototype.move = function (){
              this.loc++;
          };
          var amy = new Car(1);
          amy.move();
  • Super and sub class
    • 在Functional Class的基础上,实现类似“父类、子类”的功能(继承)
    • super class是一个function,返回一个通用的obj
    • child class也是一个function,调用super class的function获取obj之后,添加额外的定制,然后返回新的obj
          // "super class"
          var Car = function(loc) {
              var obj = { loc: loc };
              obj.move = function(){
                  obj.loc++;
              };
              return obj;
          };
          // "child class 1 不同点"
          var Van = function(loc){
              // 获取通用的obj
              var obj = Car(loc);
              // 添加不同点
              obj.grab = function(){};
              return obj;
          };
          // "child class 2"
          var Cop = function(loc){
              // 获取通用的obj
              var obj = Car(loc);
              // 添加不同点
              obj.call = function(){};
              return obj;
          };
          var cal = Cop(2);
          cal.move();
          cal.call();
  • Pseudo-classical Subclass(比较复杂)
    • 使用new关键字实现继承
    • "子类"的构造函数中调用父类的构造函数,随后子类的object可以调用和父类对象相同的“属性”
      • SuperclassConstructor.call( this, params );
    • 原型链的建立,让子类除属性之外,还可以像"父类"对象委托函数的调用
      • Subclass.prototype = Object.create( Superclass.prototype ); // 让Subclass.prototype重新指向一个新对象,这个新对象会向Superclass.prototype委托
      • Subclass.prototype.constructor = Subclass; // 新对象的constructor还是指向Superclass,所以这里要重新设定一下
      • 给Subclass.prototype添加新的function
var Car = function(loc) {
              this.loc = loc;
          };
          
          Car.prototype.move = function(){
              this.loc++;  
          };
          
          var Van = function(loc){
              // this = Object.create(Van.prototype);
              // Key statement!
              Car.call(this, loc);
              // return this;
          };
          
          Van.prototype = Object.create(Car.prototype);
          Van.prototype.constructor = Van;
          Van.prototype.grab = function(){};
          
          var zed = new Car(3);
          zed.move();
          
          var amy = new Van(9);
          amy.move();
          amy.grab();
  • 大致总结:
    • 以上7条中,2没有创建新的对象,1和后5条有创建新对象
    • 3为最朴素的创建新对象的方法
    • 4、5使用了原型链,5是4的简便用法
    • 6、7是继承的实现:6比较简单( 基于3 ),7比较复杂

你可能感兴趣的:(Udacity上的Javascript Design Pattern)