通过`bind`将函数参数传递给另一个函数

时间:2015-07-22 22:17:56

标签: javascript arguments bind

此问题与我的previous question有关,因此我将在此处添加与示例相同的代码。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

    <head>
        <meta charset="utf-8">

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="http://www.flotcharts.org/flot/jquery.flot.js" type="text/javascript"></script>
    </head>

    <body>
        <h1>Audio Spectrum</h1>
        <div id="placeholder" style="width:400px; height:200px; display: inline-block;">

        </div>
        <script>
            var microphone;
            var analyser;
            var convolver;
            //user media
            navigator.getUserMedia = (navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia);
            if (navigator.getUserMedia) {
                console.log('getUserMedia supported.');
                navigator.getUserMedia(
                // constraints - only audio needed for this app
                {
                    audio : true,
                    echoCancellation : true
                },
                // Success callback
                user_media_setup,
                // Error callback
                function(err) {
                    console.log('The following gUM error occured: ' + err);
                });
            } else {
                console.log('getUserMedia not supported on your browser!');
            };

            function user_media_setup(stream) {
                console.log('user media setup');
                // set up forked web audio context, for multiple browsers
                // window. is needed otherwise Safari explodes
                audioCtx = new (window.AudioContext || window.webkitAudioContext)();
                //microphone
                microphone = audioCtx.createMediaStreamSource(stream);

                //analyser
                analyser = audioCtx.createAnalyser();
                analyser.fftSize = 1024;
                analyser.smoothingTimeConstant = 0.85;

                //convolver
                convolver = audioCtx.createConvolver();
                convolver.normalize = true;
                convolverBuffer = audioCtx.createBuffer(1, 1, audioCtx.sampleRate);

                //    convolverBuffer[0] = 1; //wrong

                convolverChannel = convolverBuffer.getChannelData(0);
                convolverChannel[0] = 1;
                convolver.buffer = convolverBuffer;

                //connectivity
                var use_convolver = false;
                if (use_convolver) {
                    //through convolver:
                    microphone.connect(convolver);
                    convolver.connect(analyser);
                } else {
                    //direct:
                    microphone.connect(analyser);

                }
                visualize();
            }

            function visualize() {
                console.log('visualize');
                dataArray = new Float32Array(analyser.frequencyBinCount);
                draw = function() {
                    analyser.getFloatFrequencyData(dataArray);
                    var data = [];
                    for (var i = 0; i < dataArray.length; i++) {
                        freq = audioCtx.sampleRate * i / dataArray.length / 2;
                        data.push([freq, dataArray[i]]);
                    }
                    var options = {
                        yaxis : {
                            min : -200,
                            max : 0
                        }
                    };
                    $.plot("#placeholder", [data], options);
                    window.requestAnimationFrame(draw);
                };
                window.requestAnimationFrame(draw);
            }

        </script>
    </body>
</html>

现在我需要知道是否可以以某种方式绑定这两个函数,而不会影响来自另一个对象的Ease.bezier = function(mX1, mY1, mX2, mY2) { return _bezier.processBezier(mX1, mY1, mX2, mY2); }; var _bezier = Ease.bezier.prototype; _bezier.processBezier = function (mX1, mY1, mX2, mY2) { return _bezier.render; // this is where I need the `this`, mX1, mY1, mX2, mY2 to be passed into the next function }; _bezier.render = function(aX){ //the aX value here comes from another object var mX1 = [bound function attributes[1]]; // I think you can understand what I mean here if (mX1 === mY1 && mX2 === mY2) return aX; if (aX === 0) return 0; if (aX === 1) return 1; return _bezier.computeBezier(_bezier.gx(aX), mY1, mY2); }; 值,并且可以访问aXthis个参数到第二个功能

有可能吗?我该怎么办?

1 个答案:

答案 0 :(得分:2)

你可以像这样使用arguments对象吗?

_bezier.processBezier = function (mX1, mY1, mX2, mY2) {
  return _bezier.render.bind(this, arguments); // <--- bind all the arguments and the context "this"
};

_bezier.render = function(){ // <--- aX is not required anymore instead use arguments object
  var args = arguments[0]; // <--- this corresponds to [mX1, mY1, mX2, mY2]
  var aX = arguments[1]; // <--- this corresponds to aX now
  if (args[0] === args[1] && args[2] === args[3]) return aX; // <--- notice args object here

  if (aX === 0) return 0;
  if (aX === 1) return 1; 
  return _bezier.computeBezier(_bezier.gx(aX), mY1, mY2);     
};