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 相关文章推荐
YUI Compressor压缩JavaScript原理及微优化
Jan 07 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
jquery datepicker参数介绍和示例
Apr 15 Javascript
基于jQuery的图片不完全按比例自动缩小
Jul 11 Javascript
JavaScript使用setTimeout实现延迟弹出警告框的方法
Apr 07 Javascript
JS实现窗口加载时模拟鼠标移动的方法
Jun 03 Javascript
JS如何实现文本框随文本的长度而增长
Jul 30 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
iview同时验证多个表单问题总结
Sep 29 Javascript
Javascript通过控制类名更改样式
May 24 Javascript
jquery实现烟花效果(面向对象)
Mar 10 jQuery
微信小程序 flexbox layout快速实现基本布局的解决方案
Mar 24 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
《魔兽争霸3:重制版》翻车了?你想要的我们都没有
2019/11/07 魔兽争霸
PHP概述.
2006/10/09 PHP
用php制作简单分页(从数据库读取记录)的方法详解
2013/05/04 PHP
php获取指定日期之间的各个周和月的起止时间
2014/11/24 PHP
PHP进阶学习之Geo的地图定位算法详解
2019/06/19 PHP
让 JavaScript 轻松支持函数重载 (Part 2 - 实现)
2009/08/04 Javascript
JS对象与JSON格式数据相互转换
2012/02/20 Javascript
jQuery Ajax提交表单查询获得数据实例代码
2012/09/19 Javascript
JavaScript声明变量时为什么要加var关键字
2014/09/29 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jquery实现触发时更新下拉列表内容的方法
2015/12/02 Javascript
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
JS生成不重复的随机数组的简单实例
2016/07/10 Javascript
vue2.0数据双向绑定与表单bootstrap+vue组件
2017/02/27 Javascript
使用vue中的混入mixin优化表单验证插件问题
2019/07/02 Javascript
vue实现移动端省市区选择
2019/09/27 Javascript
Vue 数据响应式相关总结
2021/01/28 Vue.js
使用原生javascript开发计算器实例代码
2021/02/21 Javascript
python使用SMTP发送qq或sina邮件
2017/10/21 Python
python数据封装json格式数据
2018/03/04 Python
opencv python 基于KNN的手写体识别的实例
2018/08/03 Python
selenium+PhantomJS爬取豆瓣读书
2019/08/26 Python
python实现将字符串中的数字提取出来然后求和
2020/04/02 Python
Python+PyQt5实现灭霸响指功能
2020/05/25 Python
python3实现飞机大战
2020/11/29 Python
HTML5去掉输入框type为number时的上下箭头的实现方法
2020/01/03 HTML / CSS
深深扎根运动世界的生活品牌:Tillys
2017/10/30 全球购物
Hotter Shoes英国官网:英伦风格,舒适的鞋子
2017/12/28 全球购物
采购内勤岗位职责
2013/12/10 职场文书
应届生自荐书
2014/06/23 职场文书
护理学专业求职信
2014/06/29 职场文书
七年级作文之冬景
2019/11/07 职场文书
PySwarms(Python粒子群优化工具包)的使用:GlobalBestPSO例子解析
2021/04/05 Python
一篇文章弄懂MySQL查询语句的执行过程
2021/05/07 MySQL
Python深度学习之Pytorch初步使用
2021/05/20 Python
Python学习之时间包使用教程详解
2022/03/21 Python