javaScript prototype

對js對象原型的測試:

<html>
<head>
<title>
瞭解prototype
</title>
<script type="text/javascript">
function baseClass(){
//對象方法
this.showMsg=function(){
   console.log("baseClass::showMsg");
}
}

function extendClass(){
//對象方法
  this.upd=function(){
  console.log("this.upd");
  }
}

extendClass.prototype=new baseClass();   //克隆base到extendClass,此時extendClass已經含有方法showMsg
extendClass.prototype.updFun=function(){
  console.log("updFun is called");
}    //在extendClass添加原型方法updFun,和在extendClass加一個此方法一樣,主要區別是這樣可以添加方法,而不修改原本的類,而且這個又可以當成類方法,可以直接調用

//類方法
extendClass.updClass=function(args){
    console.log("updClass");  
}

//原型方法,但對應的是一個json,當extendClass初始化的時候,會調用baseas的匿名方法
extendClass.prototype.updd={
  baseas:(function(args){
     //args即是window
    console.log("has in based");
	console.log(args);
  })(window),
    //非匿名方法,不會主動調用,如何調用還不知道
  base2:function(args){
    console.log("has in badsed2222");
	console.log(args);
  }
}
var instance=new extendClass();
extendClass.prototype.updFun();
//不能寫成instance.updClass,對象上沒有該方法,和原型方法區別比較明顯
extendClass.updClass();
//調用對象方法
instance.showMsg();
//調用原型方法,和extendClass.prototype.updFun()一樣
instance.updFun();
//調用upd方法
instance['upd'].call();
//如果有xbig,則使用,否則就是{}
 var xbig= xbig||{};
console.log("xbig:"+JSON.stringify(xbig));  //xbig:{}
//給xbig的ins賦值json串,fb對應的是方法
 xbig.ins={fa:"1",fb:function(){
 console.log("fb");
}}
 xbig.ins.module= {upd:function(args){
  //call的第一個參數爲this,第二個參數是args,在這個方法內部,可以操作this,如果是一個節點,則可以修改節點的值
   console.log(this);
   console.log("I`d like to do");
   console.log("args:"+args);
}};
xbig.ins.module['upd'].call({a:1},"somesthing1");
var xbig2= xbig||{};    
console.log("xbig2:"+JSON.stringify(xbig2));  //xbig2:{"ins":{"fa":"1","module":{}}}
xbig2.ins.module['upd'].call(instance,"somesthing2");
</script>
</head>
<body>
<h1>prototype到底是什麼意思1</h1>
</body>
</html>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章