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 相关文章推荐
jQuery 对象中的类数组操作
Apr 27 Javascript
js验证模型自我实现的具体方法
Jun 21 Javascript
js有序数组的连接问题
Oct 01 Javascript
javascript中对Attr(dom中属性)的操作示例讲解
Dec 02 Javascript
Vue.js父与子组件之间传参示例
Feb 28 Javascript
在node中如何使用 ES6
Apr 22 Javascript
AngularJS页面带参跳转及参数解析操作示例
Jun 28 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
Jun 28 Javascript
vue实现城市列表选择功能
Jul 16 Javascript
Javascript实现时间倒计时功能
Nov 17 Javascript
vue实现商品列表的添加删除实例讲解
May 14 Javascript
基于vue中的scoped坑点解说
Sep 04 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中mt_rand()随机数函数用法
2014/11/24 PHP
javascript 全角转换实现代码
2009/07/17 Javascript
jQuery函数的第二个参数获取指定上下文中的DOM元素
2014/05/19 Javascript
jquery实现公告翻滚效果
2015/02/27 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
2015/03/03 Javascript
JavaScript中逗号运算符介绍及使用示例
2015/03/13 Javascript
js实现使用鼠标拖拽切换图片的方法
2015/05/04 Javascript
jquery+CSS实现的水平布局多级网页菜单效果
2015/08/24 Javascript
浅谈js基本数据类型和typeof
2016/08/09 Javascript
JS+CSS3模拟溢出滚动效果
2016/08/12 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
JavaScript中set与get方法用法示例
2018/08/15 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
深入浅析vue-cli@3.0 使用及配置说明
2019/05/08 Javascript
JavaScript实现雪花飘落效果
2020/12/27 Javascript
[02:27]DOTA2英雄基础教程 莱恩
2014/01/17 DOTA
Python操作MySQL数据库9个实用实例
2015/12/11 Python
django实现登录时候输入密码错误5次锁定用户十分钟
2017/11/05 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
PyCharm设置护眼背景色的方法
2018/10/29 Python
详解python和matlab的优势与区别
2019/06/28 Python
django将数组传递给前台模板的方法
2019/08/06 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python中pyqtgraph知识点总结
2021/01/26 Python
一文彻底解决HTML5页面中长按保存图片功能
2019/06/10 HTML / CSS
播音主持专业个人自我评价
2014/01/09 职场文书
年度考核自我鉴定
2014/02/02 职场文书
超市开店计划书
2014/09/15 职场文书
个人作风建设自查报告
2014/10/22 职场文书
五好文明家庭事迹材料
2014/12/20 职场文书
房租涨价通知
2015/04/23 职场文书
会计继续教育培训心得体会
2016/01/19 职场文书
2019年员工旷工保证书!
2019/06/28 职场文书
社交电商模式的兴起:这些新的商机千万别错过
2019/07/26 职场文书
jdbc使用PreparedStatement批量插入数据的方法
2021/04/27 MySQL
Python pyecharts绘制条形图详解
2022/04/02 Python