类库提供了Function.prototype.bind  Function.prototype.bindAsEventListener两个方法。首先我们从概念上解释一个这两个方法。
任何一个函数都可以调用这两个方法;参数的是javascript对象或网页上元素对象;返回类型是个函数对象。
本来我就是个函数,返回还是函数,到这两个函数有什么不同呢。看实现代码,关键还是apply/call函数的代码。其实这里只是转化了一下方法调用的对象。

            <input type="checkbox" id="myChk" name="asf" value="1" />Test

            <script language="javascript" type="text/javascript">...
                //
                //函数绑定:bindAsEventListener()
                //
                var CheckboxWatcher = Class.create();
                
                CheckboxWatcher.prototype = ...{
                   initialize: function(chkBox, message) ...{
                        this.chkBox = $(chkBox);
                        this.message = message;
                        //绑定点击onclick事件
                        this.chkBox.onclick = this.showMessage.bindAsEventListener(this);
                   },
                   showMessage: function(evt) ...{
                      alert(this.message + ' (' + evt.type + ')');
                   }
                };
                
                new CheckboxWatcher('myChk','message!!!!');
                //$('myChk').οnclick=function(){};  //正常情况下的事件写法
            </script>
            
            <br />
            <input type="checkbox" id="myChk2" name="asf" value="1" />Test2
            <script language="javascript" type="text/javascript">...

                //函数绑定:bind()
                //obj.getName.bind($('myChk2'));  
                //相当于从apply/call,应用某一对象的一个方法,用另一个对象替换当前对象。
                //即:应用obj的getName方法,用$('myChk2')替换当前obj对象                
                function Class()...{
                    this.name="class";
                }
                Class.prototype.getName=function()...{
                    alert(this.name);
                }
                var obj=new Class();
                //$('myChk2').οnclick=obj.getName;                 //输出asf
                //$('myChk2').οnclick=obj.getName.bind(obj);       //输出: class;或用bindAsEventListener也可以
                $('myChk2').onclick=obj.getName.bind($('myChk2')); //输出:asf
                
                //从上面代码可以看出bind/bindAsEventListener只是包装了一下apply/call方法,改变方法的调用对象。
                //如例子,你可以把obj.getName方法转化成任何对象调用,并且把方法让表单元素触发。
                //(bind和bindAsEventListener之间只是返回函数的参数不同)

            </script>
            
            
            <script language="javascript" type="text/javascript">...
                function Class1(name)...{
                    this.name=name;
                }
                Class1.prototype.getName=function()...{
                    alert(this.name);
                }
                function Class2(name)...{
                    this.name=name;
                  this.getName=Class1.prototype.getName.bind(this); //这句话
                }
                var obj1=new Class2("yql");
                obj1.getName();  //输出yql
                
                var obj2=new Object();
                obj2.name="zkj";
                obj2.fun=Class1.prototype.getName.bind(obj2);
                obj2.fun();//输出zkj
            </script> 

prototype.js学习(3)函数绑定相关推荐

  1. ajaxPro /prototype.js 学习笔记

    以下均为个人理解,如有不妥,请及时指正. 1.  定义和实现类之间的继承 A. 通过 直接引用和函数调用 function Child(name,age,sex) { this.name = name ...

  2. 廖雪峰JS学习总结-函数篇

    最近在刷廖雪峰的JS教程,把里面的自己不太清楚的东西在刷一遍. 教程网址:www.liaoxuefeng.com/wiki/001434- 函数的定义和调用: 如果没有return语句,函数执行完毕后 ...

  3. JS学习笔记——入门基础知识总结

    JS入门基础知识总结1 前言 基础背景知识 一.产生历史: 二.特点: 三.应用方向: 四.Javascript组成: JavaScript书写使用方式 一.行内式(了解即可,项目中不使用,日常练习尽 ...

  4. prototype.js教程及prototype中文手册

    在线API文档:   http://www.prototypejs.org/api 1.4网页版: http://thinhunan.cnblogs.com/archive/2006/04/01/De ...

  5. html js 回调函数,js中回调函数的学习笔记

    回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" ...

  6. knockout+html绑定,Knockout.Js官网学习(style绑定、attr绑定)

    Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...

  7. js 中的this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解

    壹 ❀ 引 工具猴-免费在线工具-在线工具箱- 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安 ...

  8. prototype.js常用函数及其用法

    prototype.js常用函数: 函数名  解释  举例  Element.toggle  交替隐藏或显示  Element.toggle(''div1'',''div2'')  Element.h ...

  9. JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype

    一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...

  10. Vue.js 学习笔记 六 v-model 双向绑定数据

    之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...

最新文章

  1. Ubuntu 10.10 安装 libx11-dev
  2. Linux/Centos下/lib64/libc.so.6: version `GLIBC_2.14' not found问题
  3. Python操作excel文件根据某一字段将相同的类拆分
  4. jQuery图片翻转弹出动画特效
  5. preg_grep用法
  6. cocos2d-x项目101次相遇-安装和环境搭建 -xcode
  7. C - Swaps 2(树状数组,思维)
  8. 红米手机 android 版本,#MIUI#关于红米手机4高配版 Android版本适配的说明【miui9吧】_百度贴吧...
  9. 福禄电子烟遭消费者起诉:吸完不舒服 广告与说明书自相矛盾
  10. 排序 给excel_excel排序技巧:这些不同方式的排序方法你都会了么
  11. 文本分类(一)封装分词器
  12. sass穿透 scoped 的情况下 去修改ui组件的样式
  13. 两行代码开启 Ubuntu ftp服务
  14. 经典的进程同步问题-----哲学家进餐问题详解
  15. 优酷KUX视频转换MP4工具,纯个人向分享
  16. Newton 3 牛顿动力学插件 - 主体属性面板
  17. 2021年中国碳纤维市场发展现状及重点企业对比分析:光威复材vs中复神鹰vs中简科技[图]
  18. arctanx麦克劳林公式推导过程_三角函数的求导过程
  19. 伦茨科技-智能语音遥控器
  20. Bazel Remote Caching

热门文章

  1. 【多目标优化求解】基于matlab粒子群算法求解智能微电网多目标优化问题【含Matlab源码 383期】
  2. ai人工智能软件_您应该了解的5家创新AI软件公司
  3. java自动填充_java-自动使用随机数据填充原始属性?
  4. 安装semantic-text-similarity
  5. java 爬虫 html页面 parse,Java 爬虫 爬取html网页解析
  6. linux librtmp 编译,在linux系统下安装python librtmp包的实现方法
  7. python global用法_python可视化——pyechart库
  8. 利用PCA降维的手工计算实例
  9. sliverlight+WCF项目发布到IIS
  10. MySQL取每组的前N条记录