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-世界上误解最深的语言分析
Aug 12 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
Extjs学习笔记之四 工具栏和菜单
Jan 07 Javascript
js菜单点击显示或隐藏效果的简单实例
Jan 13 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
JS实现的驼峰式和连字符式转换功能分析
Dec 21 Javascript
微信小程序版翻牌小游戏
Jan 26 Javascript
vue自动化表单实例分析
May 06 Javascript
在 vue-cli v3.0 中使用 SCSS/SASS的方法
Jun 14 Javascript
Webstorm2016使用技巧(SVN插件使用)
Oct 29 Javascript
vue通过cookie获取用户登录信息的思路详解
Oct 30 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
2020年4月放送决定!第2期TV动画《邪神酱飞踢》视觉图&主题曲情报公开!
2020/03/06 日漫
多重?l件?合查?(一)
2006/10/09 PHP
使用php+apc实现上传进度条且在IE7下不显示的问题解决方法
2013/04/25 PHP
CodeIgniter框架数据库事务处理的设计缺陷和解决方案
2014/07/25 PHP
Windows下PHP开发环境搭建教程(Apache+PHP+MySQL)
2016/06/13 PHP
php实现当前页面点击下载文件的实例代码
2016/11/16 PHP
php curl上传、下载、https登陆实现代码
2017/07/23 PHP
Jquery上传插件 uploadify v3.1使用说明
2012/06/18 Javascript
jQuery实现用户注册的表单验证示例
2013/08/28 Javascript
js常用系统函数用法实例分析
2015/01/12 Javascript
PHP守护进程实例
2015/03/06 Javascript
connection reset by peer问题总结及解决方案
2016/10/21 Javascript
JS日期对象简单操作(获取当前年份、星期、时间)
2016/10/26 Javascript
微信小程序 POST请求(网络请求)详解及实例代码
2016/11/16 Javascript
vue如何实现observer和watcher源码解析
2017/03/09 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
2017/03/21 jQuery
基于js中的存储键值对以及注意事项介绍
2018/03/30 Javascript
vue实现固定位置显示功能
2019/05/30 Javascript
Vue.js暴露方法给WebView的使用操作
2020/09/07 Javascript
python进阶教程之异常处理
2014/08/30 Python
Python生成不重复随机值的方法
2015/05/11 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python链接oracle数据库以及数据库的增删改查实例
2018/01/30 Python
【python】matplotlib动态显示详解
2019/04/11 Python
Python小白垃圾回收机制入门
2020/06/09 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
英国Lookfantastic中文网站:护肤品美妆美发购物(英国直邮)
2020/04/27 全球购物
入党自我评价优缺点
2014/01/25 职场文书
法定代表人授权委托书
2014/04/04 职场文书
公司总经理岗位职责范本
2014/08/15 职场文书
关于感恩的演讲稿800字
2014/08/26 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
英语教师个人工作总结
2015/02/09 职场文书
师德培训心得体会2016
2016/01/09 职场文书
python中pycryto实现数据加密
2022/04/29 Python
前端使用svg图片改色实现示例
2022/07/23 HTML / CSS