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 Sort 表格排序
Oct 31 Javascript
jquery.validate使用攻略 第五步 正则验证
Jul 01 Javascript
某人初学javascript的时候写的学习笔记
Dec 30 Javascript
JS获取图片实际宽高及根据图片大小进行自适应
Aug 11 Javascript
一个支付页面DEMO附截图
Jul 22 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
Feb 14 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
JS中使用变量保存arguments对象的方法
Jun 03 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
Jul 08 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
微信小程序出现wx.navigateTo页面不跳转问题的解决方法
Dec 26 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生成随机数的三种方法
2014/09/10 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
比较简单的异步加载JS文件的代码
2009/07/18 Javascript
Extjs TriggerField在弹出窗口显示不出问题的解决方法
2010/01/08 Javascript
使用jQuery操作Cookies的实现代码
2011/10/09 Javascript
jQuery表单美化插件jqTransform使用详解
2015/04/12 Javascript
Javascript非构造函数的继承
2015/04/27 Javascript
设置点击文本框或图片弹出日历控件的实现代码
2016/05/12 Javascript
jQuery实现的浮动层div浏览器居中显示效果
2017/02/03 Javascript
使用jquery datatable和bootsrap创建表格实例代码
2017/03/17 Javascript
详解Vue使用 vue-cli 搭建项目
2017/04/20 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
Express框架之connect-flash详解
2017/05/31 Javascript
AngularJS中filter的使用实例详解
2017/08/25 Javascript
详解如何实现一个简单的 vuex
2018/02/10 Javascript
详解vue填坑之解决部分浏览器不支持pushState方法
2018/07/12 Javascript
详解vue中axios的封装
2018/07/18 Javascript
在微信小程序里使用watch和computed的方法
2018/08/02 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
详解关于Vue2.0路由开启keep-alive时需要注意的地方
2018/09/18 Javascript
javascript json字符串到json对象转义问题
2019/01/22 Javascript
解决vue net :ERR_CONNECTION_REFUSED报错问题
2020/08/13 Javascript
python实现sublime3的less编译插件示例
2014/04/27 Python
玩转python selenium鼠标键盘操作(ActionChains)
2020/04/12 Python
python timestamp和datetime之间转换详解
2017/12/11 Python
Python中低维数组填充高维数组的实现
2019/12/02 Python
python3用PyPDF2解析pdf文件,用正则匹配数据方式
2020/05/12 Python
关于keras中keras.layers.merge的用法说明
2020/05/23 Python
CSS3实现超慢速移动动画效果非常流畅无卡顿
2014/06/15 HTML / CSS
canvas烟花特效锦集
2018/01/17 HTML / CSS
应用英语专业自荐信
2014/01/26 职场文书
防灾减灾活动总结
2014/08/30 职场文书
清明节文明祭祀倡议书
2015/04/28 职场文书
MySQL 数据类型选择原则
2021/05/27 MySQL
vue使用echarts实现折线图
2022/03/21 Vue.js
python装饰器代码解析
2022/03/23 Python