ES6 +

Question

我正在尝试使用我的一些代码并将其转换为一个名为updateForm的函数，其中包含两个宽度和高度的参数，然后调用一个方法在画布上绘制该矩形。但是，我似乎无法理解如何使用参数来做到这一点。 JSfiddle更容易查看。 https://jsfiddle.net/pyf10xyL/7/

谢谢！

这是带参数的函数

virtual ReturnType myVirtualMethod() = 0; // notice the "= 0" at the end

这是我的代码，它有全局变量，但试图避免这样做并将其变成带参数的函数（上面的那个）

function updateForm(width, height) {
   'use strict';
}

Answer 1

如果我理解正确，您的目标似乎是从全球范围中移除这些变量。您可以通过创建一个控制其自身内的值而不是窗口的对象来实现此目的。

ES6 +

class Square {
    constructor(h = 0, w = 0){
        // Init the variables.
        this.height = h;
        this.width = w;

        // Add event listeners to the elements.
        const updateHandler = this.updateForm.bind(this);
        ['wid', 'hgt'].forEach(id => {
            document.getElementById(id).addEventListener('change', updateHandler);
        });
    }

    updateForm(evt){
        // Extract the information from the event (change).
        // NOTE: I've made the assumption that your target is an input.
        // This evt (event) object may look differently if it's not.
        const { id, value } = evt.target;

        if (id === 'wid') this.width = value;
        else this.height = value;
    }
}

const square = new Square();

ES5

function Square(h, w){
    var self = this;
    self.height = h || 0;
    self.width = w || 0;

    updateForm = function(evt){
        // Extract the information from the event (change).
        // NOTE: I've made the assumption that your target is an input.
        // This evt (event) object may look differently if it's not.
        var id = evt.target.id;
        var value = evt.target.value;

        if (id === 'wid') self.width = value;
        else self.height = value;
    }

    // Add event listeners to the elements.
    document.getElementById('wid').addEventListener('change', updateForm);
    document.getElementById('hgt').addEventListener('change', updateForm);

    return self;
}

var square = new Square();

绘制引用方形对象的函数，而不是两个全局变量。

function draw(){
    context.clearReact(0, 0, canvas.width, canvas.height);
    context.react(0, 0, square.width, square.height);
    context.fillStyle = '#EA7B00';
    context.fill();
}

绘图（）

你的小提琴不适合我，所以我将离开画作主要是你的原始代码。如果你问这个问题是因为你打算用不同的输入绘制不同的方块（因此不希望那些是全局空间），你可以用'bind'为函数准备参数。

function draw(targetSquare){
    // logic using targetSquare.height, etc.
}

var square1 = new Square();
document.getElementById('button-1').addEventListener('click', draw.bind(square1));

var square2 = new Square();
document.getElementById('button-2').addEventListener('click', draw.bind(square2));

Answer 2

我不知道我是否明白您的意思，但如果您只是删除var width = 0, height = 0，该功能会从给定的参数中获取width和height。

function updateForm(width, height) {

   var widthValue = document.getElementById('wid'),
       heightValue = document.getElementById('hgt'),
       widthValue.value = width,
       heightValue.value = height;

   widthValue.addEventListener("change", function () {
       width = this.value;
   }, false);
   heightValue.addEventListener("change", function () {
       height = this.value;
   }, false);

}

function draw() {

    context.clearRect(0, 0, canvas.width, canvas.height);
    context.rect(0, 0, width, height);
    context.fillStyle = "#EA7B00";
    context.fill();

 }

如何使用多个参数创建一个函数？

2 个答案:

ES6 +

ES5

绘图（）