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 XML操作 封装类
Jul 01 Javascript
jquery控制背景音乐开关与自动播放提示音的方法
Feb 06 Javascript
JavaScript事件委托实例分析
May 26 Javascript
JavaScript:Array类型全面解析
May 19 Javascript
基于zepto.js简单实现上传图片
Jun 21 Javascript
JS中mouseup事件丢失的原因与解决办法
Jun 14 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
Mar 23 jQuery
JavaScript继承与多继承实例分析
May 26 Javascript
JavaScript对象的浅拷贝与深拷贝实例分析
Jul 25 Javascript
jQuery实现轮播图源码
Oct 23 jQuery
Vue使用Three.js加载glTF模型的方法详解
Jun 14 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 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 高性能书写
2010/12/11 PHP
php中time()与$_SERVER[REQUEST_TIME]用法区别
2014/11/19 PHP
yii实现CheckBox复选框在同一行显示的方法
2014/12/03 PHP
PHP中遍历数组的三种常用方法实例分析
2019/06/24 PHP
PHP7创建COOKIE和销毁COOKIE的实例方法
2020/02/03 PHP
由JavaScript技术实现的web小游戏(不含网游)
2010/06/12 Javascript
JS 无限级 Select效果实现代码(json格式)
2011/08/30 Javascript
javascript倒计时功能实现代码
2012/06/07 Javascript
Node.js 异步编程之 Callback介绍(一)
2015/03/30 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
解析Node.js异常处理中domain模块的使用方法
2016/02/16 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
js实现弹窗居中的简单实例
2016/10/09 Javascript
jQuery Easyui datagrid行内实现【添加】、【编辑】、【上移】、【下移】
2016/12/19 Javascript
JS 中使用Promise 实现红绿灯实例代码(demo)
2017/10/20 Javascript
微信小程序开发之改变data中数组或对象的某一属性值
2018/07/05 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
[01:04:31]DOTA2-DPC中国联赛定级赛 iG vs Magma BO3第二场 1月8日
2021/03/11 DOTA
python开发之IDEL(Python GUI)的使用方法图文详解
2015/11/12 Python
Python随机数random模块使用指南
2016/09/09 Python
Python黑帽编程 3.4 跨越VLAN详解
2016/09/28 Python
Python3实现统计单词表中每个字母出现频率的方法示例
2019/01/28 Python
深入了解Python iter() 方法的用法
2019/07/11 Python
Python 离线工作环境搭建的方法步骤
2019/07/29 Python
通过实例了解Python str()和repr()的区别
2020/01/17 Python
浅析python 定时拆分备份 nginx 日志的方法
2020/04/27 Python
自动化工程专业个人应聘自荐信
2013/09/26 职场文书
护理专业推荐信
2013/11/07 职场文书
百度吧主申请感言
2014/01/12 职场文书
医学生毕业自我鉴定
2014/03/26 职场文书
研究生求职自荐书
2014/06/23 职场文书
趣味运动会标语口号
2015/12/26 职场文书
导游词之上海杜莎夫人蜡像馆
2019/11/22 职场文书
导游词之澳门玫瑰圣母堂
2019/12/03 职场文书
Pandas-DataFrame知识点汇总
2022/03/16 Python