Udacity上的Javascript Design Patte

其实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比较复杂