物件導向的鏈式調用

標籤：調用   state   順序   callback   res   添加   sel   改變   代碼   

1、 對象的鏈式調用

function Chain(){
　　this.n=0;//屬性不一定一開始的時候全部都要初始化
　　this.fn1=function(_obj){//this指向  new Chain()執行個體化的對象
　　　　alert(this.n++);//注意：alert(this.n++)與this.fn1中的this 不一定指向的對象是一樣的
　　　　return this;
　　}
　　this.fn2=function(){//同上
　　　　alert(this.n++);//注意：alert(this.n++)與this.fn1中的this 不一定指向的對象是一樣的
　　　　return this;
　　}
}

var _chain1 = new Chain();
var _chain2 = new Chain();
_chain1.fn1().fn2();//依次彈出 0 ， 1
_chain2.fn2().fn1();//依次彈出0 ， 1
_chain1.fn1();//彈出 0
_chain2.fn2().fn1().fn2();//依次彈出 2 ， 3 ， 4（注意：由於前面的_chain2.fn2().fn1()）

2、此代碼能解決鏈式調用，但不能解決順序執行

function Asynchronous(){
　　var _self=this;

//由於ajax的回呼函數（callBack），this的指向指向window對象下，要想this指向new Asychronous()執行個體化對象，需要用_self=this,指向執行個體化對象
　　this.visitJson1=function(){
　　　　ajaxRequest("post","json1.json",true,null,function(data){
　　　　　　alert(data);
　　　　});
　　}
　　this.visitJson2=function(){
　　　　ajaxRequest("post","json2.json",true,null,function(data){
　　　　　　alert(data);
　　　　});
　　}
　　this.visitJson3=function(){
　　　　ajaxRequest("post","json3.json",true,null,function(data){
　　　　　　alert(data);
　　　　});
　　}
}
var _async=new Asynchronous();
_async.visitJson1().visitJson2().visitJson3();//彈出的結果也不一定按照json1,json2,json3輸出,由於ajax非同步,不能同步輸出（即順序輸出）

//正確的如下  （封裝的ECMAScript 6中的promise函數）

function Asynchronous(fn){

　　this.list = [fn];//把promise當中所有的then內回呼函數添加到數組中;之所以用數組，因為ajax是一個不確定什麼時候執行完的機制,是非同步,

　　//要想要每個函數同步輸出（順序輸出）,需要把函數它們放進一個數組裡面,依次執行
　　this.state = 0;//預設為回呼函數未完執行成狀態
　　this.n = 0;//作用：標記應該執行第幾個回呼函數
　　/**
　　* then作用：只是把回呼函數存到數組當中，然後等待被調用。
　　*/
　　this.then = function(fx){
　　　　this.list.push(fx);
　　　　return this;
　　}
　　/**
　　* 等待被resolve方法按順序調用，調用後執行數組中的特定的方法
　　*/
　　this.exec = function(n){
　　　　if(this.state == 1){
　　　　　　this.state == 0;//由於以後有出錯 的屬性 ，故需要state狀態
　　　　　　this.fm = this.list[n];//注意：只將function賦值給this.fm,由於this.list[n]數組也是一個對象，this指向數組的某一項,達不到this指向執行個體化對象
　　　　　　this.fm();
　　　　}
　　}
　　/**
　　* 由回呼函數來調用，執行個體化對象時也自動調用一次;
　　*/
　　this.resolve = function(){//表示執行該回呼函數執行完成
　　　　this.state = 1;
　　　　if(this.n < this.list.length){
　　　　　　this.exec(this.n++);
　　　　}
　　}
　　this.resolve();
}

new Asynchronous(function(){
　　var _self = this;
　　ajaxRequest("post","json/json0.json",true,null,function(data){
　　　　alert(data);
　　　　_self.resolve();//由於這是ajax回呼函數裡面，this的指向的對象是window下，需要改變this的指向，故用_self
　　});

}).then(function(){
　　var _self = this;
　　ajaxRequest("post","json/json1.json",true,null,function(data){
　　　　alert(data);
　　　　_self.resolve();//由於這是ajax回呼函數裡面，this的指向的對象是window下，需要改變this的指向，故用_self
　　});
}).then(function(){
　　var _self = this;
　　ajaxRequest("post","json/json2.json",true,null,function(data){
　　　　alert(data);
　　　　_self.resolve();//由於這是ajax回呼函數裡面，this的指向的對象是window下，需要改變this的指向，故用_self
　　});
}).then(function(){

　　var _self = this;
　　ajaxRequest("post","json/json3.json",true,null,function(data){
　　　　alert(data);
　　　　_self.resolve();//由於這是ajax回呼函數裡面，this的指向的對象是window下，需要改變this的指向，故用_self
　　});
});

3、物件導向的繼承

 

function Sign(){
　　this.account="";
　　this.password="";
　　this.sign=function(){
　　　　if(this.account=="abcde" && this.password=="123456"){
　　　　　　alert("登入成功");
　　　　}else{
　　　　　　alert("登入失敗");
　　　　}
　　}
}
function Register(){
　　this.abc=0;
　　this.register=function(){
　　　　this.account="abcde";
　　　　this.password="123456";
　　}
}
function Exit(){
　　this.exit=function() {
　　this.account = null;
　　this.password = null;
　　}
}
Register.prototype=new Exit();//Register對象擁有Exit對象的執行個體屬性和方法以及原型屬性和方法
Sign.prototype=new Register();//Sign對象擁有Register對象的執行個體屬性和方法以及原型屬性和方法
var _user=new Sign();
_user.register();
_user.sign();//輸出登入成功
_user.exit();
_user.sign();//輸出登入失敗

 

function main(){
　　alert(_user.hasOwnProperty("abc"));//輸出false 對象.hasOwnProperty("屬性名稱"); (boolean屬性,檢測"abc"是不是_user這個對象的執行個體屬性
　　alert(Register.prototype.isPrototypeOf(_user));//輸出true 對象屬性.isPrototypeOf(對象); (boolean屬性，檢測“Register.prototypeOf”是不是"_user"這個對象的原型屬性)
　　if("abc" in _user){//無論“abc”是_user這個對象的執行個體屬性還是原型屬性,都輸出 true，除非“abc”既不是執行個體屬性也不是原型屬性（boolean值）
　　　　if(_user.hasOwnProperty("abc")){
　　　　　　alert("該屬性是執行個體屬性");
　　　　}else{
　　　　　　alert("該屬性是原型屬性");
　　　　}
　　}
}
main();

 

物件導向的鏈式調用