如何创建SmileyFace实例作为参数传入drawSmiley()并保留原有代码

你的原始代码核心问题是drawSmiley调用时传入了构造函数本身，而不是构造函数生成的实例，同时存在无效实例声明、变量重复声明的问题，保留原有代码主体的修正版本如下：

var faceObj = {
    centerX: 100, 
    centerY: 100
};

var drawSmiley = function(faceObj) {
    fill(168, 124, 70);
    ellipse(faceObj.centerX, faceObj.centerY, 150, 150);
    fill(0, 0, 0);
    ellipse(faceObj.centerX-30, faceObj.centerY-30, 20, 20); 
    ellipse(faceObj.centerX+30, faceObj.centerY-30, 20, 20); 
    noFill(); 
    strokeWeight(3);
    arc(faceObj.centerX, faceObj.centerY+10, 64, 40, 0, 180);
};

var SmileyFace = function(x, y) {
    this.centerX = x;
    this.centerY = y;
};

//SmileyFace.speak('hello!');

// 先创建SmileyFace的具体实例，传入自定义的坐标参数
var customFace = new SmileyFace(200, 200);
// 把实例作为参数传入drawSmiley方法
drawSmiley(customFace);

// 也可以直接用你原来写的100,100坐标的实例
var faceObj = new SmileyFace(100, 100);
drawSmiley(faceObj);

核心修改说明 #

• 删掉了无效的var faceObj = new SmileyFace(this.centerX, this.centerY);语句，全局作用域下的this没有对应坐标属性，生成的实例坐标是undefined，无法正常绘制
• 新增了自定义命名的SmileyFace实例customFace，你可以自由修改传入的x、y坐标调整笑脸位置
• 将drawSmiley的入参替换为实际的实例变量名，而非构造函数SmileyFace本身，符合方法接收笑脸对象参数的设计
• 如果你需要同时渲染多个笑脸，只要重复创建不同坐标的SmileyFace实例，依次传入drawSmiley即可

内容的提问来源于stack exchange，提问作者Will