angular.bind使用心得


Posted in Javascript onOctober 26, 2015

angular.bind

解释:返回一个调用self的函数fn(self代表fn里的this).可以给fn提供参数args(*).这个功能也被称为局部操作,以区别功能。

格式:angular.bind(self,fn,args);

self:object  对象; fn的上下文对象,在fn中可以用this调用

fn:function; 绑定的方法

args:传入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!!!

接下来说说对angular.bind的理解吧~

bind顾名思义绑定的意思,那么假如我们要把A绑到B上,那么必须又有A和B这2个存在体。这里需要的2个存在体就一个对象和一个函数。那么怎么绑?@野兽的理解是把对象“绑”到函数的this上去执行,这时候fn的this就等于obj了,至于第三个参数,可有可无,看需求,如果函数需要传入参数,那么我们可以把angular.bind的第三个参数放上去,这就是传入fn函数的参数了。

案例中第一种写法是定义绑定的时候就把fn所需的参数传进去了,调用的时候直接用,而案例中第二种写法是先绑定,在调用执行的时候再给fn传参,效果是一样的

对于那上面的英文句子(好吧,虽然只有2句),如果有写错了,那么说明深深的爱着我们的母语-中文;如果一不小心写对了,那么请为这个装的66666的B鼓掌~

文章最后,我们来看个实例吧

<!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>
Javascript 相关文章推荐
使用纯javascript实现放大镜效果
Mar 18 Javascript
jQuery插件ajaxFileUpload实现异步上传文件效果
Apr 14 Javascript
不用一句js代码初始化组件
Jan 27 Javascript
快速掌握Node.js事件驱动模型
Mar 21 Javascript
AngularJs Understanding the Controller Component
Sep 02 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
Vue的H5页面唤起支付宝支付功能
Apr 18 Javascript
vue基本使用--refs获取组件或元素的实例
Nov 07 Javascript
解决vue 子组件修改父组件传来的props值报错问题
Nov 09 Javascript
js实现类选择器和name属性选择器的示例步骤
Feb 07 Javascript
手写Spirit防抖函数underscore和节流函数lodash
Mar 22 Javascript
详解JavaScript编程中正则表达式的使用
Oct 25 #Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
Oct 25 #Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 #Javascript
举例讲解JavaScript中将数组元素转换为字符串的方法
Oct 25 #Javascript
javascript学习笔记整理(概述、变量、数据类型简介)
Oct 25 #Javascript
js实现跨域的几种方法汇总(图片ping、JSONP和CORS)
Oct 25 #Javascript
详解JavaScript编程中的数组结构
Oct 24 #Javascript
You might like
苏联队长,苏联超人蝙蝠侠,这些登场的“山寨”英雄真的很严肃
2020/04/09 欧美动漫
模拟xcopy的函数
2006/10/09 PHP
PHP给文字内容中的关键字进行套红处理
2016/04/12 PHP
使用php从身份证号中获取一系列线索(星座、生肖、生日等)
2016/05/11 PHP
php使用redis的几种常见操作方式和用法示例
2020/02/20 PHP
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
基于JQuery的类似新浪微博展示信息效果的代码
2012/07/23 Javascript
基于jQuery的动态增删改查表格信息,可左键/右键提示(原创自Zjmainstay)
2012/07/31 Javascript
用js判断页面是否加载完成实现代码
2012/12/11 Javascript
jQuery分别获取选中的复选框值的示例
2014/06/17 Javascript
jQuery使用fadeout实现元素渐隐效果的方法
2015/03/27 Javascript
JavaScript使用concat连接数组的方法
2015/04/06 Javascript
JavaScript 随机验证码的生成实例代码
2016/09/22 Javascript
js正则表达式注册页面表单验证
2016/10/11 Javascript
微信小程序实战之上拉(分页加载)效果(2)
2017/04/17 Javascript
基于JavaScript实现带数据验证和复选框的表单提交
2017/08/23 Javascript
Angularjs 手写日历的实现代码(不用插件)
2017/10/18 Javascript
Vue 2.0学习笔记之使用$refs访问Vue中的DOM
2017/12/19 Javascript
Vue的编码技巧与规范使用详解
2019/08/28 Javascript
vue-以文件流-blob-的形式-下载-导出文件操作
2020/08/07 Javascript
[58:54]EG vs RNG 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
Python Mysql自动备份脚本
2008/07/14 Python
python检测服务器是否正常
2014/02/16 Python
举例讲解Python中的身份运算符的使用方法
2015/10/13 Python
基于python socketserver框架全面解析
2017/09/21 Python
Django中STATIC_ROOT和STATIC_URL及STATICFILES_DIRS浅析
2018/05/08 Python
浅析Python函数式编程
2018/10/06 Python
Python小白必备的8个最常用的内置函数(推荐)
2019/04/03 Python
上班离岗检讨书
2014/01/27 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
英语教师个人工作总结
2015/02/09 职场文书
2015年乡镇民政工作总结
2015/05/13 职场文书
个人催款函范文
2015/06/23 职场文书
2016学习医德医风心得体会
2016/01/25 职场文书
alibaba seata服务端具体实现
2022/02/24 Java/Android
分布式架构Redis中有哪些数据结构及底层实现原理
2022/03/13 Redis