Warum scheint bind Argumente als Arrays darzustellen?

Question

Es war mein Eindruck, dass ich Argumente an eine Funktion übergeben konnte, indem Sie bind verwenden und dann diese Argumente aufrufen, als ob sie normal übergeben worden wären. Warum muss ich dies tun:

$(document).ready(function() { 
    var func = function(button) { 
    button[0].on('click', function() { 
     alert('Hello World.'); 
    }) 
    } 
    func.bind(null, [$('.button')])(); 
}); 

Wenn es scheint, wie sollte ich in der Lage sein, nur dies zu tun:

$(document).ready(function() { 
    var func = function(button) { 
    button.on('click', function() { 
     alert('Hello World.'); 
    }) 
    } 
    func.bind(null, [$('.button')])(); 
}); 

Beispiel, die Behandlung des button Argument als Array:

$(document).ready(function() { 
 
    var func = function(button) { 
 
    button[0].on('click', function() { 
 
     alert('Hello World.'); 
 
    }) 
 
    } 
 
    func.bind(null, [$('.button')])(); 
 
});

html, body, div { 
 
    padding:0; 
 
    margin:0; 
 
    display:flex; 
 
    justify-content:center; 
 
} 
 

 
.button { 
 
    background-color:gray; 
 
    margin:50px; 
 
    padding:50px; 
 
    width:50%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="button">Button</div>

Answer 1

bind() wird verwendet, um den aktuellen aufrufenden Bereich an eine Funktion zu binden, so dass selbst wenn Sie es von woanders aufrufen, es über lokale Variablen in diesem gebundenen Bereich wissen wird.

Was Sie suchen, ist apply().

var func = function(button) { 
 
    button.on('click', function() { 
 
    console.log('hello world'); 
 
    }); 
 
} 
 

 
func.apply(this, [$('.button')]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<button class="button">Click Me</button>

Der Vollständigkeit halber ist es auch eine call() Funktion, die häufiger verwendet wird. Anstatt eines Arrays von Argumenten verwendet es eine Liste von Argumenten nach dem anfänglichen Argument des Bereichs.

func.call(this, $('.button')); 

Answer 2

Sie verwenden .bind falsch. Sie sollten es nicht eine Reihe von Argumenten geben, sollten Sie nur die Argumente selbst geben:

function print(x, y, z) { 
 
    console.log(x, y, z);  
 
} 
 

 
print12 = print.bind(null, 1, 2); 
 

 
print12(3); // 1, 2, 3

Auch als Soviut erwähnt, wenn Sie .bind(...)() anrufen, Sie wollen wahrscheinlich .apply() oder .call() stattdessen.