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 showModalDialog 内跳转页面的问题
Nov 25 Javascript
深入解析JavaScript中的变量作用域
Dec 06 Javascript
AngularJS入门教程(零):引导程序
Dec 06 Javascript
JS去除iframe滚动条的方法
Apr 01 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
Node.js如何实现注册邮箱激活功能 (常见)
Jul 23 Javascript
JS学习笔记之闭包小案例分析
May 29 Javascript
VScode格式化ESlint方法(最全最好用方法)
Sep 10 Javascript
Node.js 在本地生成日志文件的方法
Feb 07 Javascript
vue ssr+koa2构建服务端渲染的示例代码
Mar 23 Javascript
jQuery+ajax实现用户登录验证
Sep 13 jQuery
ant-design-vue 时间选择器赋值默认时间的操作
Oct 27 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
十天学会php之第九天
2006/10/09 PHP
php中simplexml_load_string使用实例分享
2014/02/13 PHP
从性能方面考虑PHP下载远程文件的3种方法
2015/12/29 PHP
javascript 跳转代码集合
2009/12/03 Javascript
js 图片等比例缩放代码
2010/05/13 Javascript
按钮JS复制文本框和表格的代码
2011/04/01 Javascript
基于jquery实现拆分姓名的方法(纯JS版)
2013/05/08 Javascript
日常收集整理的JavaScript常用函数方法
2015/12/10 Javascript
BootStrap的alert提示框的关闭后再显示怎么解决
2016/05/17 Javascript
js正则表达式replace替换变量方法
2016/05/21 Javascript
javascript实现粘贴qq截图功能(clipboardData)
2016/05/29 Javascript
JavaScript DOM节点操作方法总结
2016/08/23 Javascript
详解angularjs结合pagination插件实现分页功能
2017/02/10 Javascript
JS+html5 canvas实现的简单绘制折线图效果示例
2017/03/13 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
JavaScript面向对象中接口实现方法详解
2019/07/24 Javascript
layui中的switch开关实现方法
2019/09/03 Javascript
layui 实现加载动画以及非真实加载进度的方法
2019/09/23 Javascript
如何在postman中添加cookie信息步骤解析
2020/06/30 Javascript
解决iView Table组件宽度只变大不变小的问题
2020/11/13 Javascript
vue穿梭框实现上下移动
2021/01/29 Vue.js
使用python进行文本预处理和提取特征的实例
2018/06/05 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
Jupyter Notebook 安装配置与使用详解
2021/01/06 Python
德国受欢迎的旅游和休闲网站:lastminute.de
2019/09/23 全球购物
益模软件Java笔试题
2012/03/27 面试题
数控专业大学生的自我鉴定
2013/11/13 职场文书
学生党员的自我评价范文
2014/03/01 职场文书
科技之星事迹材料
2014/06/02 职场文书
求职自我评价范文100字
2014/09/23 职场文书
2014年党总支工作总结
2014/12/18 职场文书
一文了解JavaScript用Element Traversal新属性遍历子元素
2021/11/27 Javascript
Python matplotlib绘制雷达图
2022/04/13 Python
MySQL中LAG()函数和LEAD()函数的使用
2022/08/14 MySQL