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 jQuery $.post $.ajax用法
Jul 09 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
JavaScript建立一个语法高亮输入框实现思路
Feb 26 Javascript
Jquery Validate 正则表达式实用验证代码大全
Aug 23 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JQuery异步加载PartialView的方法
Jun 07 Javascript
关于vue.js弹窗组件的知识点总结
Sep 11 Javascript
jQuery UI Grid 模态框中的表格实例代码
Apr 01 jQuery
微信小程序表单弹窗实例
Jul 19 Javascript
vue 子组件和父组件传值的示例
Sep 11 Javascript
Javascript实现打鼓效果
Jan 29 Javascript
javascript对象3个属性特征
Nov 17 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实现将HTML5中Canvas图像保存到服务器的方法
2014/11/28 PHP
php通过记录IP来防止表单重复提交方法分析
2014/12/16 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
smarty高级特性之对象的使用方法
2015/12/25 PHP
使用laravel的migrate创建数据表的方法
2019/09/30 PHP
Yii框架模拟组件调用注入示例
2019/11/11 PHP
javascript禁用键盘功能键让右击及其他键无效
2013/10/09 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
jquery实现手风琴效果实例代码
2013/11/15 Javascript
使用JS在浏览器中判断当前网络连接状态的几种方法
2017/05/05 Javascript
js学习总结之DOM2兼容处理顺序问题的解决方法
2017/07/27 Javascript
vue实现在表格里,取每行的id的方法
2018/03/09 Javascript
JQuery属性操作与循环用法示例
2019/05/15 jQuery
Vue 开发必须知道的36个技巧(小结)
2019/10/09 Javascript
[01:38]完美世界DOTA2联赛(PWL)宣传片:第一站
2020/10/26 DOTA
python创建只读属性对象的方法(ReadOnlyObject)
2013/02/10 Python
python单线程实现多个定时器示例
2014/03/30 Python
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python使用Matplotlib画条形图
2020/03/25 Python
对pandas写入读取h5文件的方法详解
2018/12/28 Python
对numpy下的轴交换transpose和swapaxes的示例解读
2019/06/26 Python
Pytorch Tensor的统计属性实例讲解
2019/12/30 Python
python图形开发GUI库wxpython使用方法详解
2020/02/14 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
python利用递归方法实现求集合的幂集
2020/09/07 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
HTML5之SVG 2D入门10—滤镜的定义及使用
2013/01/30 HTML / CSS
Emma Bridgewater官网:英国餐具制造商
2019/11/24 全球购物
网站创业计划书
2014/04/30 职场文书
5s标语大全
2014/06/23 职场文书
作风建设年活动总结
2014/08/27 职场文书
酒店管理专业毕业生自我鉴定
2014/09/29 职场文书
年度考核登记表个人总结
2015/03/06 职场文书
2015年库房工作总结
2015/04/30 职场文书
JavaScript事件的委托(代理)的用法示例详解
2022/02/18 Javascript
详解CSS中postion和opacity及cursor的特性
2022/08/14 HTML / CSS