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类库Bindows1.3中的内存释放方式分析
Mar 08 Javascript
浅析javascript闭包 实例分析
Dec 25 Javascript
JS实现多物体缓冲运动实例代码
Nov 29 Javascript
JavaScript数据类型转换的注意事项
Jul 31 Javascript
百度搜索框智能提示案例jsonp
Nov 28 Javascript
JS对象创建的几种方式整理
Feb 28 Javascript
无法获取隐藏元素宽度和高度的解决方案
Mar 07 Javascript
layui分页效果实现代码
May 19 Javascript
在vue中封装可复用的组件方法
Mar 01 Javascript
vue-router源码之history类的浅析
May 21 Javascript
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
Aug 05 Javascript
vue的项目如何打包上线
Apr 13 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 memcache扩展的三种安装方法
2009/04/26 PHP
奉献出一个封装的curl函数 便于调用(抓数据专用)
2013/07/22 PHP
php实现模拟登陆方正教务系统抓取课表
2015/05/19 PHP
PHP使用CURL模拟登录的方法
2015/07/08 PHP
PHP闭包函数传参及使用外部变量的方法
2016/03/15 PHP
PHP实现的一致性Hash算法详解【分布式算法】
2018/03/31 PHP
JavaScript加密解密7种方法总结分析
2007/10/07 Javascript
jQuery学习7 操作JavaScript对象和集合的函数
2010/02/07 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
JavaScript学习笔记之定时器
2015/01/22 Javascript
jquery实现鼠标拖拽滑动效果来选择数字的方法
2015/05/04 Javascript
基于jQuery+JSON的省市二三级联动效果
2015/06/05 Javascript
浅谈JSON.parse()和JSON.stringify()
2015/07/14 Javascript
基于jQuery的$.getScript方法去加载javaScript文档解析
2017/11/08 jQuery
微信小程序获取手机网络状态的方法【附源码下载】
2017/12/08 Javascript
Vue数据双向绑定原理及简单实现方法
2018/05/18 Javascript
详解在React.js中使用PureComponent的重要性和使用方式
2018/07/10 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
JavaScript Dom实现轮播图原理和实例
2021/02/19 Javascript
python实现保存网页到本地示例
2014/03/16 Python
python切片及sys.argv[]用法详解
2018/05/25 Python
对python周期性定时器的示例详解
2019/02/19 Python
Python3.4学习笔记之类型判断,异常处理,终止程序操作小结
2019/03/01 Python
python读csv文件时指定行为表头或无表头的方法
2019/06/26 Python
Python OpenCV之图片缩放的实现(cv2.resize)
2019/06/28 Python
Python 3.6打包成EXE可执行程序的实现
2019/10/18 Python
python3实现网页版raspberry pi(树莓派)小车控制
2020/02/12 Python
Python turtle库的画笔控制说明
2020/06/28 Python
python抢购软件/插件/脚本附完整源码
2021/03/04 Python
美国女性服饰销售网站:Nasty Gal(坏女孩)
2016/07/26 全球购物
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
学生党员思想汇报
2013/12/28 职场文书
八一演出活动方案
2014/02/03 职场文书
诚信承诺书范文
2014/03/27 职场文书
关爱老人标语
2014/06/21 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP