面向对象的JavaScript-004

1.

 

// Below is an example of how to use Object.create() to achieve classical inheritance. This is for single inheritance, which is all that JavaScript supports.
    // Shape - superclass
    function Shape() {
      this.x = 0;
      this.y = 0;
    }

    // superclass method
    Shape.prototype.move = function(x, y) {
      this.x += x;
      this.y += y;
      console.info('Shape moved.');
    };

    // Rectangle - subclass
    function Rectangle() {
      Shape.call(this); // call super constructor.
    }

    // subclass extends superclass
    Rectangle.prototype = Object.create(Shape.prototype);
    Rectangle.prototype.constructor = Rectangle;

    var rect = new Rectangle();

    console.log('Is rect an instance of Rectangle?', rect instanceof Rectangle);// true
    console.log('Is rect an instance of Shape?', rect instanceof Shape);// true
    rect.move(1, 1); // Outputs, 'Shape moved.'

    // If you wish to inherit from multiple objects, then mixins are a possibility.
    // The mixin function would copy the functions from the superclass prototype to the subclass prototype, the mixin function needs to be supplied by the user. An example of a mixin like function would be jQuery.extend().
    
    function MyClass() {
      SuperClass.call(this);
      OtherSuperClass.call(this);
    }

    MyClass.prototype = Object.create(SuperClass.prototype); // inherit
    mixin(MyClass.prototype, OtherSuperClass.prototype); // mixin

    MyClass.prototype.myMethod = function() {
      // do a thing
    };
    

    // Using propertiesObject argument with Object.create()
    var o;

    // create an object with null as prototype
    o = Object.create(null);


    o = {};
    // is equivalent to:
    o = Object.create(Object.prototype);


    // Example where we create an object with a couple of sample properties.
    // (Note that the second parameter maps keys to *property descriptors*.)
    o = Object.create(Object.prototype, {
      // foo is a regular 'value property'
      foo: { writable: true, configurable: true, value: 'hello' },
      // bar is a getter-and-setter (accessor) property
      bar: {
        configurable: false,
        get: function() { return 10; },
        set: function(value) { console.log('Setting `o.bar` to', value); }
    /* with ES5 Accessors our code can look like this
        get function() { return 10; },
        set function(value) { console.log('setting `o.bar` to', value); } */
      }
    });


    function Constructor() {}
    o = new Constructor();
    // is equivalent to:
    o = Object.create(Constructor.prototype);
    // Of course, if there is actual initialization code in the
    // Constructor function, the Object.create() cannot reflect it


    // Create a new object whose prototype is a new, empty object
    // and add a single property 'p', with value 42.
    o = Object.create({}, { p: { value: 42 } });

    // by default properties ARE NOT writable, enumerable or configurable:
    o.p = 24;
    o.p;
    // 42

    o.q = 12;
    for (var prop in o) {
      console.log(prop);
    }
    // 'q'

    delete o.p;
    // false

    // to specify an ES3 property
    o2 = Object.create({}, {
      p: {
        value: 42,
        writable: true,
        enumerable: true,
        configurable: true
      }
    });

    // Polyfill
    // This polyfill covers the main use case which is creating a new object for which the prototype has been chosen but doesn't take the second argument into account.

    // Note that while the setting of null as [[Prototype]] is supported in the real ES5 Object.create, this polyfill cannot support it due to a limitation inherent in versions of ECMAScript lower than 5.
    if (typeof Object.create != 'function') {
      Object.create = (function() {
        var Temp = function() {};
        return function (prototype) {
          if (arguments.length > 1) {
            throw Error('Second argument not supported');
          }
          if(prototype !== Object(prototype) && prototype !== null) {
            throw TypeError('Argument must be an object or null');
         }
         if (prototype === null) { 
            throw Error('null [[Prototype]] not supported');
          }
          Temp.prototype = prototype;
          var result = new Temp();
          Temp.prototype = null;
          return result;
        };
      })();
    }