Javascript：使用函數作爲對象並訪問屬性

這可能很簡單，但我沒有明白。我聲明瞭一個函數來繪製形狀上的HTML畫布，像這樣：Javascript：使用函數作爲對象並訪問屬性

function res08(ctx, color){ 
    this.color = color; 
    ctx.save(); 
    ctx.fillStyle = color; 
    ctx.beginPath(); 
    ctx.moveTo(649, 143); 
    ctx.lineTo(649, 158); 
    ctx.lineTo(661, 158); 
    ctx.lineTo(664, 154); 
    ctx.bezierCurveTo(665, 155, 666, 157, 666, 158); 
    ctx.lineTo(683, 158); 
    ctx.lineTo(683, 144); 
    ctx.lineTo(674, 144); 
    ctx.lineTo(674, 137); 
    ctx.lineTo(678, 137); 
    ctx.lineTo(678, 111); 
    ctx.lineTo(648, 111); 
    ctx.lineTo(648, 143); 
    ctx.lineTo(649, 143); 
    ctx.closePath(); 
    ctx.fill(); 
}

我想因爲函數是一個對象，它被稱爲後，我將能夠訪問顏色屬性，像這樣：

var ctx = document.getElementById('theCanvas').getContext('2d');  
var blue = '#9ec3de'; 
res08(ctx, blue); 
console.log(res08.color);

但是，這是返回undefined。我也嘗試聲明函數作爲變量：

var res08 = function(ctx, color){

我在想什麼？謝謝！

來源

2014-01-09 Andy

你爲什麼要這樣做？這很奇怪。你不會更好從函數返回一個新的對象嗎？ – Pointy

好吧，這不僅僅是這一個......而且編寫原始代碼的人不知道oop;） – Andy

那麼我的觀點是，這不是真正的「面向對象的編程」。在函數中存儲屬性並不是聞所未聞的，但將函數調用的結果存儲在函數中本身並不常見。它打算做什麼？ – Pointy

this引用上下文，而不是調用函數。您可以打電話給你的功能是這樣的：

res08.call(res08, ctx, blue);

或更改this.color = color行這樣的：

arguments.callee.color = color;

或者你console.log行這樣的：

console.log(ctx.fillStyle);

有許多的選項;）

來源

2014-01-09 17:42:35

arguments.callee.color = color;效果很好，完全符合我的需求。非常感謝！ – Andy

@你真的不應該使用'arguments.callee' - 它將在未來版本的語言中消失。 – Pointy

很高興知道 - 我會嘗試使用.call方法 – Andy

您可以參考其體內的函數b Ÿ它的名字：

function res08(ctx, color) { 
    res08.color = color; 
    // ... 
}

上下文（的this值）function的很少函數本身的引用：

function foo() { 
    console.log(this); 
} 

foo(); // [object Window]

來源

2014-01-09 17:44:00

，這與我原本想的更接近，謝謝！ – Andy

而應該通過使用它作爲一類，稱之爲new關鍵字：new className()。 Here是如何工作的演示。與您的代碼，這將是這樣的：

function res08(ctx, color){ 
    this.color = color; 
    ctx.save(); 
    ctx.fillStyle = color; 
    ctx.beginPath(); 
    ctx.moveTo(649, 143); 
    ctx.lineTo(649, 158); 
    ctx.lineTo(661, 158); 
    ctx.lineTo(664, 154); 
    ctx.bezierCurveTo(665, 155, 666, 157, 666, 158); 
    ctx.lineTo(683, 158); 
    ctx.lineTo(683, 144); 
    ctx.lineTo(674, 144); 
    ctx.lineTo(674, 137); 
    ctx.lineTo(678, 137); 
    ctx.lineTo(678, 111); 
    ctx.lineTo(648, 111); 
    ctx.lineTo(648, 143); 
    ctx.lineTo(649, 143); 
    ctx.closePath(); 
    ctx.fill(); 
} 

var ctx = document.getElementById('theCanvas').getContext('2d');  
var blue = '#9ec3de'; 
var res = new res08(ctx, blue); 
console.log(res.color);

這工作，因爲this關鍵字現指變量res。

來源

2014-01-09 17:46:54 Joeytje50

ahhh明白了，這有助於我更好地理解「這個」。謝謝！ – Andy

我認爲['this'guide]（https：//developer.mozilla。org/en-US/docs/Web/JavaScript/Reference/Operators/this）（雙關意圖）可能對於在不同情況下定義'this'關鍵字的一種參考有用。真正熟悉它，就像所有其他編碼習慣一樣，只是意味着你只需要經常使用它：P – Joeytje50

ha！因此爲什麼我試圖在這裏使用它;） – Andy

Javascript：使用函數作爲對象並訪問屬性

回答

相關問題