使用javascript維護範圍

原始

var Base = new function() { 

    var canvas; 
    var context; 

    this.init = function() 
    { 
     console.log("Canvas: " + $("canvas")[0]) 

     this.canvas = $("canvas")[0]; 
     console.log("Context: " + this.canvas.getContext('2d')) 
     this.context = this.canvas.getContext('2d'); 

     $(window).resize(handleWindowResize); 

     handleWindowResize(); 
    }; 

    function handleWindowResize() 
    { 
     console.log("Resize Canvas [" + this.canvas + "] to {width: " + 
      $(window).width() + "," + $(window).width() + "}"); 
     this.canvas.width = $(window).width(); 
     this.canvas.height = $(window).height(); 
    } 
} 

$(window).load(function() { new Base.init() });

輸出繼電器：

Canvas: [object HTMLCanvasElement] 
Context: [object CanvasRenderingContext2D] 
Resize Canvas [undefined] to {width: 1680,1680} 
Resize Canvas [undefined] to {width: 1680,1680}

修訂

var Base = function() { 
    this.canvas; 
    this.context; 
} 
Base.prototype = { 
    init: function() 
    { 
    console.log("init :: " + this); 

    this.canvas = $('canvas')[0]; 
    this.context = this.canvas.getContext('2d') 

    $(window).resize(this.handleWindowResize); 
    this.handleWindowResize(null); 
    }, 

    handleWindowResize: function() 
    { 
    console.log($(window) + " resized set canvas (" + this.canvas + ")" + 
     " width,height = " + $(window).width() + "," + $(window).height()); 
    }, 

    toString: function() 
    { 
    return "[Base]"; 
    } 
} 

$(window).load(function() { var c = new Base(); c.init(); });

輸出：（INIT）

init :: [Base] 
[object Object] resized set canvas ([object HTMLCanvasElement]) width,height = 1659,630

輸出：（上窗口調整大小）

[object Object] resized set canvas (undefined) width,height = 1658,630

來源

2010-07-24 cynicaljoy

你在哪裏要 '維護範圍'？ – hvgotcodes 2010-07-24 01:14:44

這個。canvas = undefiend 應該返回[對象HTMLCanvasElement]，因爲它是在init方法中設置的。 – cynicaljoy 2010-07-24 01:17:55

這裏的Module pattern在工作中的一個例子：

<html> 
<head> 

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script type="text/javascript"> 

     var Base = function() { 

      //Private Variables 
      var canvas; 
      var context; 

      //Private Function 
      function handleWindowResize() 
      { 
       console.log("Resize Canvas [" + canvas + "] to {width: " + $(window).width() + "," + $(window).width() + "}"); 
       canvas.width = $(window).width(); 
       canvas.height = $(window).height(); 
      } 

      //Public Functions 
      return { 

       init: function() 
       { 
        console.log("Canvas: " + $("canvas")[0]) 

        canvas = $("canvas")[0]; 
        console.log("Context: " + canvas.getContext('2d')) 
        context = canvas.getContext('2d'); 

        $(window).resize(handleWindowResize); 

        handleWindowResize(); 
       } 

      }; 

     }(); 

     $(window).load(function() { Base.init() }); 

    </script> 

</head> 
<body> 

    <canvas></canvas> 

</body> 
</html>

來源

2010-07-24 03:08:23 attack

謝謝，這真棒 – cynicaljoy 2010-07-24 07:35:42

jQuery的變化什麼對象「這個」是指在其回調方法。你應該做的是在開始處存儲對象「this」的引用：

var Base = new function() { 
var self = this; 
var canvas; 
var context;

然後你想引用基礎對象的地方使用self。

來源

2010-07-24 01:18:00

我不知道是誰投了你的建議，但這是迄今爲止唯一的實際工作。謝謝！ – cynicaljoy 2010-07-24 01:32:02

您的代碼有幾個語法錯誤。如果handleWindowResize是您的Base對象中的一種方法，那麼您應該聲明它類似於this.init並將其稱爲this.handleWindowResize。

來源

2010-07-24 01:20:35

這些代碼沒有語法錯誤。它的格式可能很差，但無論在哪種情況下，在聲明這樣的語句時，更有意義的事情就是指出可能是什麼，而不是僅僅發表聲明。機修工並沒有告訴你「車上有什麼東西。」當他給你鑰匙回來。至少不是一個好的。 – cynicaljoy 2010-07-24 01:30:42

無語法錯誤。我認爲其目的是創建一個私人功能。（對吧？） – attack 2010-07-24 01:34:22

@cynicaljoy，你原來的文章有語法錯誤。我在www.jsfiddle.net上試過了。我確實提出了建議。此外，我提供答案這一事實表明我的意圖是*有用*。不幸的是，這似乎不符合你的標準。 – 2010-07-24 03:13:51

用途： handleWindowResize.call（本）代替： handleWindowResize（）

這將改變範圍。

來源

2010-07-24 01:21:11 Maz

看起來你來自另一種語言，需要深入瞭解構造函數如何在JS中工作。

您有一個函數this.name=function(){}，另一個函數聲明。您是否有使用new function作爲Base對象的原因？執行new Base.init()似乎也不完全正確，要麼。構造函數正在創建一個新的對象，但是你放棄了它，並且只使用構造函數來執行命令式代碼？你沒有執行Base，所以它可能只是一個對象文字。

我真的建議查看Doug Crockford關於JS中繼承和對象的文章。這個SO問題討論了一些其他的對象創建技術。嘗試搜索Crockford的The Good Parts。 What is happening in Crockford's object creation technique?

我放棄了畫布的東西，因爲我沒有使用過畫布。這將執行沒有錯誤。

<html><head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
    <script> 
    var Base = { 
     canvas:null, 
     context:null, 

     init:function() 
     { 
     console.log("Canvas: " + $("#canvas")[0]); 

     this.canvas = $("#canvas")[0]; 
     console.log("Context: " + this.canvas) 
     //this.context = this.canvas.getContext('2d'); 
     this.handleWindowResize=function(){ 
     console.log("Resize Canvas [" + this.canvas + "] to {width: " + $(window).width() + "," +  $(window).width() + "}"); 
     this.canvas.style.width = $(window).width(); 
     this.canvas.style.height = $(window).height(); 
     } 
     } 
     }; 


     $(window).load(function() { var c= new Base.init(); c.handleWindowResize()}); 
    </script> 
    </head> 

    <body> 
    <div id='canvas' style='width:400px;background-color:red;height:30px;'>a div called Canvas</div> 
    </body> 
</html>

來源

2010-07-24 01:38:07 Cole

雖然這樣做確實有效，甚至可以成爲一個破解matthew -manela的答案仍然爲我提供了預期的效果。我不想有一個臃腫的'init（）'方法。我可以看到你要去的地方，我喜歡校長我只是不知道如何讓它準確地工作。它可能確實解決不適當的構造函數。 – cynicaljoy 2010-07-24 02:05:20

@cynicaljoy我認爲你對自己太過於苛刻（JS中的上下文很困難），並且var self的使用=這是司空見慣的，而不是冒險。看看這篇文章，其中顯示了Cole提出的模式，但沒有包含全部的init函數：http://www.wait-till-i.com/2007/07/24/show-love-to-the-module -pattern/ – attack 2010-07-24 02:18:22

現在我想到Cole建議的東西，但是當由事件偵聽器觸發時，我無法將this.canvas返回到'handleWindowResize'方法的內部。如果我使用'this.handleWindowResize（）'，那麼它工作。 – cynicaljoy 2010-07-24 02:46:46

使用javascript維護範圍

回答

相關問題