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 相关文章推荐
使用IE6看老赵的博客 jQuery初探
Jan 17 Javascript
jQuery中live()方法用法实例
Jan 19 Javascript
理解和运用JavaScript的闭包机制
Aug 13 Javascript
Javascript实现Array和String互转换的方法
Dec 21 Javascript
js添加绑定事件的方法
May 15 Javascript
Bootstrap Table的使用总结
Oct 08 Javascript
Jquery EasyUI $.Parser
Jun 02 jQuery
JS实现简单的选择题测评系统代码思路详解(demo)
Sep 03 Javascript
Angular实现类似博客评论的递归显示及获取回复评论的数据
Nov 06 Javascript
jquery实现左右轮播切换效果
Jan 01 jQuery
Vue实现回到顶部和底部动画效果
Jul 31 Javascript
js实现计算器功能
Aug 10 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
DSP接收机前端设想
2021/03/02 无线电
web站点获取用户IP的安全方法 HTTP_X_FORWARDED_FOR检验
2013/06/01 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
JS获取父节点方法
2009/08/20 Javascript
style、 currentStyle、 runtimeStyle区别分析
2010/08/01 Javascript
script标签的 charset 属性使用说明
2010/12/04 Javascript
JavaScript高级程序设计 阅读笔记(十三) js定义类或对象
2012/08/14 Javascript
jQuery Trim去除字符串首尾空字符的实现方法说明
2014/02/11 Javascript
ExpressJS入门实例
2015/01/14 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
2016/01/13 Javascript
Linux下为Node.js程序配置MySQL或Oracle数据库的方法
2016/03/19 Javascript
基于jQuery插件jqzoom实现的图片放大镜效果示例
2017/01/23 Javascript
微信小程序顶部可滚动导航效果
2017/10/31 Javascript
JS实现的简单下拉框联动功能示例
2018/05/11 Javascript
vue 纯js监听滚动条到底部的实例讲解
2018/09/03 Javascript
koa2实现登录注册功能的示例代码
2018/12/03 Javascript
利用layer实现表单完美验证的方法
2019/09/26 Javascript
深度解读vue-resize的具体用法
2020/07/08 Javascript
微信小程序实现电子签名功能
2020/07/29 Javascript
python映射列表实例分析
2015/01/26 Python
深入浅析ImageMagick命令执行漏洞
2016/10/11 Python
用Python shell简化开发
2018/08/08 Python
Python制作exe文件简单流程
2019/01/24 Python
python变量的存储原理详解
2019/07/10 Python
Win10环境python3.7安装dlib模块趟过的坑
2019/08/01 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python 命令行传入参数实现解析
2019/08/30 Python
基于Python实现大文件分割和命名脚本过程解析
2019/09/29 Python
python 图片二值化处理(处理后为纯黑白的图片)
2019/11/01 Python
python/golang实现循环链表的示例代码
2020/09/14 Python
详解html5 postMessage解决跨域通信的问题
2018/08/17 HTML / CSS
《小熊住山洞》教学反思
2014/02/21 职场文书
乡镇镇长个人整改措施
2014/10/01 职场文书
股东授权委托书
2014/10/15 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server