Question

我正在阅读有关iframe缩放器的源代码here。并且对factory()函数中的这个代码段非常困惑：

Array.prototype.forEach.call(
                    document.querySelectorAll( target || 'iframe' ),
                    init.bind(undefined, options)
                );

factory()函数：

function factory(){
    function init(options,element){
        function chkType(){
            if(!element.tagName) {
                throw new TypeError('Object is not a valid DOM element');
            } else if ('IFRAME' !== element.tagName.toUpperCase()) {
                throw new TypeError('Expected <IFRAME> tag, found <'+element.tagName+'>');
            }
        }

        if(element) {
            debugger
            chkType();
            setupIFrame(element, options);
            iFrames.push(element);
        }
    }

    var iFrames;

    setupRequestAnimationFrame();
    setupEventListeners();

    return function iFrameResizeF(options,target){
        iFrames = []; //Only return iFrames past in on this call

        switch (typeof(target)){
        case 'undefined':
        case 'string':
            Array.prototype.forEach.call(
                document.querySelectorAll( target || 'iframe' ),
                init.bind(undefined, options)
            );
            break;
        case 'object':
            init(options,target);
            break;
        default:
            throw new TypeError('Unexpected data type ('+typeof(target)+')');
        }

        return iFrames;
    };
}

似乎element是init()函数中的iframe元素。为什么init.bind(undefined, options)将element参数传递给init（）函数？这个元素来自哪里？

Answer 1

.bind()创建一个新函数，其this上下文将设置为第一个参数，其他参数将设置为以下参数。为了说明这意味着什么：

function foo(bar, baz) {}

var f = foo.bind({});
f(1, 2);

在此处呼叫f，this将设置为{}，bar设置为1，baz设置为2。

var f = foo.bind({}, 1);
f(2);

实际上结果相同，bar为1，baz为2。

var f = foo.bind({}, 1, 2);
f();

同样，结果相同。

您不仅可以bind this的值，还可以绑定参数。

所以：

init.bind(undefined, options)

init显然不需要this，因此undefined用于简单地跳过该参数，而init的第一个参数必然是{{} 1}}。以后要调用此绑定函数的人可能会传递其他参数。 options这里用于绑定第一个参数;你必须首先为bind参数传递一些东西任何。

Answer 2

了解如何使用此工厂的API，因为它将阐明元素的来源。基本上，调用工厂函数factory()将返回函数iFrameResizeF（）。然后，您可以使用一个或两个参数调用该函数。

使用一个参数，您可以向其发送选项，也可以将字符串作为css选择器。如果您向其发送选项，它将使用这些选项将DOM中的所有iframe上的init（）绑定。如果你发送一个字符串，它将绑定选择器获取的所有元素上的init（），没有任何选项。

使用两个参数，它只会在所有这些元素上绑定init（）。

然后运行该元素的init后，将选择正确的选项。

所以在代码中它就像：

var useFactory = factory();
// Two parameters
useFactory( {"option1" : "value1", "option2" : "value2"}, "selectorString" );
// Or only parameters so all iframes are affected
useFactory( {"option1" : "value1", "option2" : "value2"} );
// Or only a selector so the options will be set to undefined for all elements matching the selector
useFactory( "selectorString" );

然后在代码中的其他地方，可能会调用那些元素上的初始化函数。

在javascript中使用bind undefined的目的是什么？

2 个答案: