面向对象的编程模式

  1. 对象的构造函数和继承(包括多重继承)

  2. 模块的封装方法渐进

    IIFE,宽放大模式
    
  3. 多种继承实现的方法比较

    类继承,原型继承..

A. 对象的构造函数和继承


  1. 构造函数继承的三个步骤

一、在子类中调用父类的构造函数
二、将子类的 protype 指向父类的 原型
三、为子类赋予其自己的构造函数 + 方法

    function Shape(){
        this.x = 0;
        this.y = 0;
    }

    Shape.prototype.move = function(x, y) {
        this.x += x;
        this.y += y;
        console.log('this.x ' + this.x + ' this.y ' + this.y);
    }

    function Rectangle(x, y) {
        Shape.call(this);
        this.x = x;
        this.y = y;
   }

    Rectangle.prototype = Object.create(Shape.prototype);
    Rectangle.constructor = Rectangle;
    Rectangle.prototype.print = function() {
        console.log('Rectangle');
    }

    var rect = new Rectangle(1, 1);

    rect.move(1, 2);    // 2, 3
    rect.print()    // Rectangle
    rect instanceof Rectangle  // true
    rect instanceof Shape      // true

  ![构造函数继承_Image.png](http://upload-images.jianshu.io/upload_images/951996-7d138ff44ed75a74.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

  注意 Rectangle 中 Shape.call() 的位置应该是在最前面的
  1. 多重继承

    多重继承的实现和构造函数的继承实现基本类似

    子类函数同事执行多个父类函数的构造函数,但是子类函数只能继承一个父函数的原型链

    function S() {
         M1.call(this);
         M2.call(this);
     }
    

B.模块封装渐进


  1. 使用对象进行封装
  2. 使用构造函数进行封装
  3. 使用立即执行函数封装(返回一个封装好的对象)

实际应用中,只要出现了函数的地方,都可以认为其是简单的封装

  1. 使用对象进行封装

     var module1 = Object.create({
         _count : 1,
         m1: function() {
             console.log(this._count);
         },
         m2: function() {}
     })
    
     module1._count = 3;
     module1.m1();
    

缺点很明显,外部可以随意修改封装对象内部的值

  1. 使用构造函数进行封装(或者结合原型对象进行封装)

     function StringBuilder() {            // 构造函数和实例是一体的
           this._buffer = [];
           this.method1 = function (str) {    // 构造函数进行封装
                buffer.push(str);
           };
    
           this.toString = function () {
               return buffer.join('');
           };
     }
    
     StringBuilder.prototype = {        // 使用原型进行封装
         constructor: StringBuilder,
         add: function (str) {
               this._buffer.push(str);      // 这里还是引用了内部变量
         },
         toString: function () {
               return this._buffer.join('');
         }
     };
    

缺点:

   构造函数封装使得实例对象和构造函数混为一体
      
   原型的封装可以在外部访问构造函数的内部变量
  1. 使用 IIFE(自执行函数) 进行封装,** 原理:闭包的原理 **
  • 使用原始的自执行函数进行封装

  • 模块的 宽放大模式 将一个模块分成为好几个模块(模块封装的扩展),通过对象进行传递

        var module1 = ( function (mod){
            ...
            return mod;
        })(window.module1 || {});
    
    上述代码扩展了module1 模块
    
  • 扩展模块同时传递自定义操作

      (function($, window, document) {
    
          function go(num) { ... }
    
          function handleEvents() { ... }
    
          function initialize() { ... }
    
          function dieCarouselDie() { ... }
    
          //attach to the global scope
          window.finalCarousel = {
                init : initialize,
                destroy : dieCouraselDie
          }
    
      })( jQuery, window, document );
    

.

你可能感兴趣的:(面向对象的编程模式)