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 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
js数据验证集合、js email验证、js url验证、js长度验证、js数字验证等简单封装
May 15 Javascript
js对象数组按属性快速排序
Jan 31 Javascript
js中传递特殊字符(+,&amp;)的方法
Jan 16 Javascript
jQuery之Deferred对象详解
Sep 04 Javascript
JavaScript编写推箱子游戏
Jul 07 Javascript
jQuery自定义组件(导入组件)
Nov 08 Javascript
JS求解三元一次方程组值的方法
Jan 03 Javascript
vue-router传参用法详解
Jan 19 Javascript
JavaScript 实现同时选取多个时间段的方法
Oct 17 Javascript
微信小程序收藏功能的实现代码
Jun 19 Javascript
Vue实现一种简单的无限循环滚动动画的示例
Jan 10 Vue.js
详解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 判断数组是几维数组
2013/03/20 PHP
php mysql获取表字段名称和字段信息的三种方法
2016/11/13 PHP
thinkphp 手机号和用户名同时登录
2017/01/20 PHP
defer属性导致引用JQuery的页面报“浏览器无法打开网站xxx,操作被中止”错误的解决方法
2010/04/27 Javascript
js预载入和JavaScript Image()对象使用介绍
2011/08/28 Javascript
JavaScript:new 一个函数和直接调用函数的区别分析
2013/07/10 Javascript
js取消单选按钮选中并判断对象是否为空
2013/11/14 Javascript
JQuery判断checkbox是否选中及其它复选框操作方法合集
2015/06/01 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
使用jquery插件qrcode生成二维码
2015/10/22 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
vue环形进度条组件实例应用
2018/10/10 Javascript
vue2 v-model/v-text 中使用过滤器的方法示例
2019/05/09 Javascript
vue远程加载sfc组件思路详解
2019/12/25 Javascript
python 解析html之BeautifulSoup
2009/07/07 Python
python实现给数组按片赋值的方法
2015/07/28 Python
python中enumerate函数遍历元素用法分析
2016/03/11 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
Python编程判断一个正整数是否为素数的方法
2017/04/14 Python
python traceback捕获并打印异常的方法
2018/08/31 Python
Python多线程处理实例详解【单进程/多进程】
2019/01/30 Python
使用python制作游戏下载进度条的代码(程序说明见注释)
2019/10/24 Python
Python控制台实现交互式环境执行
2020/06/09 Python
在Keras中CNN联合LSTM进行分类实例
2020/06/29 Python
澳大利亚在线生活方式商店:Mytopia
2018/07/08 全球购物
Under Armour安德玛意大利官网:美国高端运动科技品牌
2020/01/16 全球购物
飞利信loadrunner和软件测试笔试题
2012/09/22 面试题
远程调用的原理
2014/07/05 面试题
2014春晚主持词
2014/03/25 职场文书
大学生党员自我批评思想汇报
2014/10/10 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
Go语言实现Snowflake雪花算法
2021/06/08 Golang
SQL模糊查询报:ORA-00909:参数个数无效问题的解决
2021/06/21 Oracle
详解Mysql数据库平滑扩容解决高并发和大数据量问题
2022/05/25 MySQL