Home > Article > Web Front-end > angular.bind usage experience_AngularJS

angular.bind usage experience_AngularJS

WBOYOriginal: 2016-05-16 15:35:16929browse

angular.bind

Explanation: Returns a function fn that calls self (self represents this in fn). Parameters args (*) can be provided to fn. This function is also called a local operation to distinguish the function.

Format: angular.bind(self,fn,args);

self: object object; the context object of fn, which can be called with this in fn

fn: function; binding method

args: parameters passed into fn

  var obj = { name: "Any" };
  var fn = function (Adj) {
    console.log(this.name + "is a boy!!! And he is " + Adj + " !!!");
  };
  var f = angular.bind(obj, fn, "handsome");
  f();//Any is a boy!!! And he is handsome!!!
  var t = angular.bind(obj, fn);
  t("ugly");// Any is a boy!!! And he is ugly!!!

Let’s talk about our understanding of angular.bind~

bind means binding as the name suggests, so if we want to bind A to B, then there must be two entities, A and B. The two entities needed here are an object and a function. So how to tie it? @Beast's understanding is to "tie" the object to this of the function for execution. At this time, this of fn is equal to obj. As for the third parameter, it is optional. It depends on the requirements. If the function needs to pass in parameters, then we You can put the third parameter of angular.bind, which is the parameter passed into the fn function.

The first way of writing in the case is to pass the parameters required by fn when defining the binding, and use it directly when calling. The second way of writing in the case is to bind first and then use it when calling and executing. Passing parameters to fn has the same effect

For the English sentences above (well, even though there are only 2 sentences), if there are any mistakes, it means that we deeply love our mother tongue - Chinese; if you accidentally wrote it correctly, then please support this Applause to B who pretends to be 66666~

At the end of the article, let’s take a look at an example

<!DOCTYPE HTML>
<html ng-app>
<head>
</head>
<script src="http://code.angularjs.org/1.2.3/angular.min.js"></script>
</body>
<script>
   
 var self = {name:'boyi'};
 
 //示例1--带参数
 var f = angular.bind(self, //绑定对象，作为函数的上下文
  //被绑定的函数
  function(age){ 
   alert(this.name + ' is ' + age + ' !');
  },
  //绑定的参数，可省略
  '15'
 );
 f();//调用绑定之后的function
  
 //示例2--不带参数
 var m = angular.bind(self, //绑定对象，作为函数的上下文
  //被绑定的函数
  function(age){ 
   alert(this.name + ' is ' + age + ' !');
  }
  //省略参数
 );
  
 m(3);//调用传参的函数		
 
</script>

</body>	
</html>

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：jQuery implements delayed processing effect of mouse passing event_jqueryNext article：jQuery implements delayed processing effect of mouse passing event_jquery

See more

angular.bind usage experience_AngularJS

Related articles