如何制作具有多个参数的函数？

Question

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

谢谢！

这是带参数的函数

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

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

// Drawing the square
   var width = 0,
       height = 0,
       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();
      }

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

 }