Object 提供的物件建立方式

weixin_33840661發表於2017-04-12

Object解讀

Object中的create方法的第一個引數是待建立物件的原型物件,第二個引數是待建立物件的屬性定義。
**屬性定義解讀如下:**
其中第二個引數是可選的,如果被指定了且不是undefined型別,
一個物件的可列舉的自身的屬性(並非原型鏈上的可列舉屬性)
指定的屬性描述符將會被新增到新建立的物件,和指定的屬性名稱一樣,
這個引數的形式和使用Object.defineProperties()方法的的第二個引數是一致的。
返回值: 一個以第一個引數為原型物件且含有第二個引數指定的屬性的新建立的物件
異常:當第二個引數不是空或者或者是一個普通物件;


示例

//shape -super class
function Shape(){
  this.x=0;
  this.y=0;
};
//super class method
Shape.prototype.move=function(x,y){
    this.x+=x;
    this.y+=y;
    console.info('shape moved....');
};

//Rectangle -sub class
function Rectangle(){
   Shape.call(this);//使用物件冒充實現繼承
};

//sub class extends super class
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); //will output true
console.log('Is rect an instance of Shape?',rect instanceof Shape);// will output true
rect.move(1,1);// will output 'shape moved....'

clipboard.png


Object.create的使用範例:

//原型物件
var proto  =  {
    init:function(){
       console.info('init method...');
    },
    service:function(){
       console.info('service method');
    },
    destroy:function(){
       console.info('destroy method..');
    }
 
 }
 //目標物件
 var target = Object.create(proto,{
     k_init:{
        value:function(){
            console.info('k_init method...');
        }
     },
     k_service:{
        value:function(){
            console.info('k_service method...');
        }
     },
     k_destroy:{
        value:function(){
            console.info('k_destroy method...');
        }
     }
});

console.info(target)--->輸入如下:

clipboard.png

console.info(Object.getPrototypeOf(target))--->輸出如下:

clipboard.png

未完待續...

相關文章