Question

这可能很简单，但我没有得到它。我正在声明一个在html画布上绘制形状的函数，如下所示：

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(); 
}

我认为因为函数是一个对象，在调用之后我可以像这样访问color属性：

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

但那是未定义的。我也尝试将函数声明为变量：

var res08 = function(ctx, color){

我错过了什么？谢谢！

Answer 1

您应该将其用作课程，并通过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。

Answer 2

this指的是上下文，而不是调用函数。您可以像这样调用您的函数：

res08.call(res08, ctx, blue);

或者将this.color = color行更改为：

arguments.callee.color = color;

或您的console.log行：

console.log( ctx.fillStyle );

有很多选择;）

Answer 3

您可以通过名称来引用其正文中的函数：

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

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

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

foo(); // [object Window]

Javascript：使用函数作为对象并访问属性

3 个答案: