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 相关文章推荐
动态加载iframe
Jun 16 Javascript
JavaScript插件化开发教程(六)
Feb 01 Javascript
JavaScript生成SQL查询表单的方法
Aug 13 Javascript
JQuery点击事件回到页面顶部效果的实现代码
May 24 Javascript
JavaScript和jQuery制作光棒效果
Feb 24 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
jQuery+koa2实现简单的Ajax请求的示例
Mar 06 jQuery
Vue仿支付宝支付功能
May 25 Javascript
Vue Router去掉url中默认的锚点#
Aug 01 Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 Javascript
微信小程序页面上下滚动效果
Nov 18 Javascript
使用layui监听器监听select下拉框,事件绑定不成功的解决方法
Sep 28 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读取csv文件后,uft8 bom导致在页面上显示出现问题的解决方法
2013/08/10 PHP
PHP生成条形码大揭秘
2015/09/24 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
Windows上php5.6操作mongodb数据库示例【配置、连接、获取实例】
2019/02/13 PHP
PHP goto语句用法实例
2019/08/06 PHP
PHP7 标准库修改
2021/03/09 PHP
javascript天然的迭代器
2010/10/29 Javascript
捕获和分析JavaScript Error的方法
2014/03/25 Javascript
Bootstrap模态框调用功能实现方法
2016/09/19 Javascript
AngularJS实现星星等级评分功能
2016/09/24 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
使用JavaScript实现一个小程序之99乘法表
2017/09/21 Javascript
手把手教你用Node.js爬虫爬取网站数据的方法
2018/07/05 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
2019/04/29 Javascript
深入理解 JS 垃圾回收
2019/06/03 Javascript
微信小程序 scroll-view 实现锚点跳转功能
2019/12/12 Javascript
haskell实现多线程服务器实例代码
2013/11/26 Python
Python 对输入的数字进行排序的方法
2018/06/23 Python
python实现DEM数据的阴影生成的方法
2019/07/23 Python
wxPython实现文本框基础组件
2019/11/18 Python
python 插入日期数据到Oracle实例
2020/03/02 Python
记一次高分屏下canvas模糊问题
2020/02/17 HTML / CSS
北美三大旅游网站之一:Travelocity
2017/08/12 全球购物
欧洲最大的拼图游戏商店:JigsawPuzzle.co.uk
2018/07/04 全球购物
奥地利购买珠宝和手表网站:ELLA JUWELEN
2019/09/03 全球购物
普师专业个人自荐信范文
2013/11/26 职场文书
国际贸易专业求职信
2014/06/04 职场文书
2014年设计师工作总结
2014/11/25 职场文书
工程款催款函
2015/06/24 职场文书
小组组名及励志口号
2015/12/24 职场文书
2016国培学习心得体会
2016/01/08 职场文书
解析原生JS getComputedStyle
2021/05/25 Javascript
Python 内置函数速查表一览
2021/06/02 Python
AngularJS实现多级下拉框
2022/03/25 Javascript
SQL Server 忘记密码以及重新添加新账号
2022/04/26 SQL Server