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 相关文章推荐
js表格分页实现代码
Sep 18 Javascript
jQuery 使用手册(五)
Sep 23 Javascript
CutePsWheel javascript libary 控制输入文本框为可使用滚轮控制的js库
Feb 07 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
Jun 20 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
Javascript基础教程之数据类型 (数值 Number)
Jan 18 Javascript
谈谈jQuery之Deferred源码剖析
Dec 19 Javascript
Node.js 回调函数实例详解
Jul 06 Javascript
View.post() 不靠谱的地方你知道多少
Aug 29 Javascript
浅谈小程序 setData学问多
Feb 20 Javascript
vue中使用router全局守卫实现页面拦截的示例
Oct 23 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中uploaded_files函数使用方法详解
2011/03/09 PHP
php删除页面记录 同时刷新页面 删除条件用GET方式获得
2012/01/10 PHP
分享PHP header函数使用教程
2013/09/05 PHP
php使用base64加密解密图片示例分享
2014/01/20 PHP
ThinkPHP框架整合微信支付之Native 扫码支付模式一图文详解
2019/04/09 PHP
PHP工厂模式、单例模式与注册树模式实例详解
2019/06/03 PHP
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
2007/02/15 Javascript
jQuery 表单验证扩展代码(一)
2010/10/11 Javascript
关于include标签导致js路径找不到的问题分析及解决
2013/07/09 Javascript
html文件中jquery与velocity变量中的$冲突的解决方法
2013/11/01 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
2013/11/20 Javascript
JavaScript实现常用二级省市级联下拉列表的方法
2015/03/25 Javascript
cocos2dx骨骼动画Armature源码剖析(三)
2015/09/08 Javascript
学习JavaScript设计模式之装饰者模式
2016/01/19 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
jQuery筛选数组之grep、each、inArray、map的用法及遍历json对象
2016/06/20 Javascript
vue如何使用 Slot 分发内容实例详解
2017/09/05 Javascript
Chrome调试折腾记之JS断点调试技巧
2017/09/11 Javascript
使用Vue调取接口,并渲染数据的示例代码
2019/10/28 Javascript
基于JavaScript实现控制下拉列表
2020/05/08 Javascript
零基础写python爬虫之urllib2中的两个重要概念:Openers和Handlers
2014/11/05 Python
django中模板的html自动转意方法
2018/05/27 Python
python实现时间o(1)的最小栈的实例代码
2018/07/23 Python
使用python获取电脑的磁盘信息方法
2018/11/01 Python
python中sklearn的pipeline模块实例详解
2020/05/21 Python
阿里云:Aliyun.com
2017/02/15 全球购物
刊首寄语大全
2014/04/11 职场文书
《学会合作》教学反思
2014/04/12 职场文书
《最佳路径》教学反思
2014/04/13 职场文书
应急处置方案
2014/06/16 职场文书
2014年信访维稳工作总结
2014/12/08 职场文书
2015大学迎新晚会主持词
2015/07/16 职场文书
2019开业庆典剪彩仪式主持词!
2019/07/22 职场文书
mybatis调用sqlserver存储过程返回结果集的方法
2021/05/08 SQL Server
SpringBoot整合MongoDB的实现步骤
2021/06/23 MongoDB