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 相关文章推荐
一个不错的应用,用于提交获取文章内容,不推荐用
Mar 03 Javascript
jQuery对象与DOM对象之间的转换方法
Apr 15 Javascript
JavaScript中的6种运算符总结
Oct 16 Javascript
jquery表单验证需要做些什么
Nov 17 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 Javascript
正则表达式,替换所有HTML标签的简单实例
Nov 28 Javascript
JavaScript 中对象的深拷贝
Dec 04 Javascript
详解在vue-cli项目中使用mockjs(请求数据删除数据)
Oct 23 Javascript
js原生实现移动端手指滑动轮播图效果的示例
Jan 02 Javascript
在VUE style中使用data中的变量的方法
Jun 19 Javascript
jquery简易手风琴插件的封装
Oct 13 jQuery
详解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
php防止sql注入之过滤分页参数实例
2014/11/03 PHP
浅析PHP中call user func()函数及如何使用call user func调用自定义函数
2015/11/05 PHP
Yii2隐藏frontend/web和backend/web的方法
2015/12/12 PHP
thinkPHP中钩子的使用方法实例分析
2017/11/16 PHP
thinkPHP框架自动填充原理与用法分析
2018/04/03 PHP
javascript中的原型链深入理解
2014/02/24 Javascript
js遍历子节点子元素附属性及方法
2014/08/19 Javascript
javascript中函数作为参数调用的方法
2015/02/09 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
基于BootStrap Metronic开发框架经验小结【五】Bootstrap File Input文件上传插件的用法详解
2016/05/12 Javascript
基于JavaScript FileReader上传图片显示本地链接
2016/05/27 Javascript
提高JavaScript执行效率的23个实用技巧
2017/03/01 Javascript
JS+DIV实现的卷帘效果示例
2017/03/22 Javascript
JQuery实现table中tr上移下移的示例(超简单)
2018/01/08 jQuery
vue2.0 datepicker使用方法
2018/02/04 Javascript
vue 使用post/get 下载导出文件操作
2020/08/07 Javascript
在Vue中使用mockjs代码实例
2020/11/25 Vue.js
[01:00:25]NB vs Secret 2018国际邀请赛小组赛BO1 B组加赛 8.19
2018/08/21 DOTA
python BeautifulSoup使用方法详解
2013/11/21 Python
python实现简单点对点(p2p)聊天
2017/09/13 Python
Python语言实现百度语音识别API的使用实例
2017/12/13 Python
python+pandas+时间、日期以及时间序列处理方法
2018/07/10 Python
python实现Zabbix-API监控
2018/09/17 Python
Django 开发环境与生产环境的区分详解
2019/07/26 Python
python实现桌面气泡提示功能
2019/07/29 Python
python定位xpath 节点位置的方法
2019/08/27 Python
Python log模块logging记录打印用法解析
2020/01/20 Python
解决python 执行sql语句时所传参数含有单引号的问题
2020/06/06 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
调用HTML5的Canvas API绘制图形的快速入门指南
2016/06/17 HTML / CSS
写演讲稿要注意的六件事
2014/01/14 职场文书
四年级科学教学反思
2014/02/10 职场文书
检察院对照“四风”认真查找问题落实整改措施
2014/09/26 职场文书
2015年卫生局工作总结
2015/07/24 职场文书
爱国之歌(8首)
2019/09/29 职场文书