2015-05-29 1 views

Antwort

36

Angular.bind ist eine Utility-Funktion, die Funktionalität in function.bind und partial function application kombiniert.

Bindung (im Allgemeinen) ist die Idee, dass Sie den aktuellen Kontext an eine Funktion binden möchten, aber zu einem späteren Zeitpunkt tatsächlich ausführen.

Dies kann in Winkel nützlich sein, wenn HTTP mit $http und Handhabung verspricht Telefonieren:

$http.get('url').then(angular.bind(this, 
    function(response) { 
     this.response = response; //use this (which is the bound context) 
    }); 

In dem obigen Beispiel die this innerhalb der Funktion würde nicht beziehen sich auf die this im $http Zusammenhang, es sei denn wir explizit bind es. Dies ist ein häufiges JavaScript-Problem (in Rückrufen) aufgrund seiner dynamischen Bindung von Kontext (die im Gegensatz zu den meisten gängigen klassenorientierten Sprachen ist).

Teil Anwendung wird verwendet, wenn Sie eine Funktion machen möchten, die bereits einige seiner Argumente übergeben worden ist. Ein sehr einfaches Beispiel:

function add(x, y) { 
    return x + y; 
} 

var add10To = angular.bind(this, add, 10); 

console.log(add10To(5)); 
// outputs 15 

Mit Angular.bind wird der Winkel Team dieser beide gibt zusammen eingewickelt.

+0

Ich habe verstanden, dass im ersten Beispiel der Verwendung der angular.bind() das "dies" sich auf "this" im $ http bezieht, aber im zweiten Beispiel habe ich nicht verstanden, worauf es sich bezieht (normalerweise sollte es beziehen sich auf den globalen Kontext, aber das wäre nicht nützlich und das "dies" ist vielleicht das add10To Objekt selbst. Können Sie es bestätigen? – Bardelman

+1

@Bardelman Nicht genau. In der ersten 'this, es bezieht sich nicht auf $ http ', bezieht es sich auf den Funktionsumfang, in dem die Zeile' $ http.get ... 'enthalten ist (zum Beispiel der Controller). Und wieder bezieht sich das zweite' this 'auf den Kontext, in dem diese Anweisungen und Funktionen sind definiert. Wenn es keine Umbruchfunktion gibt, bezieht sich dies auf den globalen Kontext. –

+0

In diesem Fall wäre das "Dies" als globaler Bereich nützlich für die Bindung, um eine Funktion analog zur Add-Funktion mit zu machen das x wurde als gleich 10? – Bardelman

2

Alle Daten in AngularJS soll eine Eigenschaft von $ Scope-Objekt sein. Das Framework verwaltet alle ng-clicks zum richtigen Scope-Objekt unter der Haube, ohne dass der Entwickler darüber nachdenkt. Innerhalb einer aufgerufenen Funktion, deutet dies auf das $ scope Objekt

<body ng-controller="MainCtrl"> 
    <p ng-click="clickMe()">Click me</p> 
</body> 
when clicked the following controller function 

app.controller('MainCtrl', function($scope) { 
    $scope.clickMe = function() { 
    console.log(this === $scope); 
    }; 
}); 
// prints true 

function.bind nicht oft innerhalb AngularJS Controller-Code verwendet wird: Funktionen, die nur $scope Objekt verwenden, innerhalb der Controller-Funktion definiert werden, die den Zugriff auf Daten anstelle von Eigenschaften an Dies. Sogar Funktionen, die innerhalb der Verknüpfungsfunktion definiert sind, können direkt mit der Bereichsvariablen arbeiten.

Referenz: http://bahmutov.calepin.co/why-function-bind-matters-little-in-angularjs.html

7

Dies ist eine der klassischen Funktionen, auf denen funktionale Sprachen basieren. Es erlaubt uns, mit Teilfunktionen zu arbeiten. Beachten Sie, dass dies nicht winkelspezifisch ist, dies ist Javascript-spezifisch. Die meisten Utility-Bibliotheken für Javascript enthalten diese Funktion ebenfalls (z. B. Underscore/Lodash).

Heutzutage ist diese Funktion ein Teil von Javascript selbst (wird von allen gängigen Browsern unterstützt - siehe Which browsers support bind()?).

Um zu erklären, was bind tut, ich zum Beispiel in Lodash Dokumentation beziehen (das Original _.bind mit angular.bind ersetzt und das Hinzufügen einiger Kommentare):

//this is a simple function. Note it uses "this" but it's not inside any object. 
var greet = function (greeting, punctuation) { 
    return greeting + ' ' + this.user + punctuation; 
}; 

//now let's define an object 
var object = { 'user': 'fred' }; 

//now we can create a functions by "binding" the object with the function above and also supplying the "greeting" argument 
var bound = angular.bind(object, greet, 'hi'); 
bound('!'); 
// → 'hi fred!' 
Verwandte Themen