prototype.js学习(3)函数绑定
类库提供了Function.prototype.bind Function.prototype.bindAsEventListener两个方法。首先我们从概念上解释一个这两个方法。
任何一个函数都可以调用这两个方法;参数的是javascript对象或网页上元素对象;返回类型是个函数对象。
本来我就是个函数,返回还是函数,到这两个函数有什么不同呢。看实现代码,关键还是apply/call函数的代码。其实这里只是转化了一下方法调用的对象。
<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)函数绑定相关推荐
- ajaxPro /prototype.js 学习笔记
以下均为个人理解,如有不妥,请及时指正. 1. 定义和实现类之间的继承 A. 通过 直接引用和函数调用 function Child(name,age,sex) { this.name = name ...
- 廖雪峰JS学习总结-函数篇
最近在刷廖雪峰的JS教程,把里面的自己不太清楚的东西在刷一遍. 教程网址:www.liaoxuefeng.com/wiki/001434- 函数的定义和调用: 如果没有return语句,函数执行完毕后 ...
- JS学习笔记——入门基础知识总结
JS入门基础知识总结1 前言 基础背景知识 一.产生历史: 二.特点: 三.应用方向: 四.Javascript组成: JavaScript书写使用方式 一.行内式(了解即可,项目中不使用,日常练习尽 ...
- prototype.js教程及prototype中文手册
在线API文档: http://www.prototypejs.org/api 1.4网页版: http://thinhunan.cnblogs.com/archive/2006/04/01/De ...
- html js 回调函数,js中回调函数的学习笔记
回调函数是什么在学习之前还真不知道js回调函数怎么使用及作用了,下面本文章把我在学习回调函数例子给各位同学介绍一下吧,有需了解的同学不防进入参考. 回调函数原理: 我现在出发,到了通知你" ...
- knockout+html绑定,Knockout.Js官网学习(style绑定、attr绑定)
Style绑定 style绑定是添加或删除一个或多个DOM元素上的style值.比如当数字变成负数时高亮显示,或者根据数字显示对应宽度的Bar.(注:如果你不是应用style值而是应用CSS clas ...
- js 中的this,默认绑定、隐式绑定、显式绑定、new绑定、箭头函数绑定详解
壹 ❀ 引 工具猴-免费在线工具-在线工具箱- 可以说this与闭包.原型链一样,属于JavaScript开发中老生常谈的问题了,百度一搜,this相关的文章铺天盖地.可开发好几年,被几道this题安 ...
- prototype.js常用函数及其用法
prototype.js常用函数: 函数名 解释 举例 Element.toggle 交替隐藏或显示 Element.toggle(''div1'',''div2'') Element.h ...
- JS中的函数,Array对象,for-in语句,with语句,自定义对象,Prototype
一)函数 A)JS中的函数的定义格式: function add(a,b) { var sum = a+b; document.write("两个数的和是:" + sum); // ...
- Vue.js 学习笔记 六 v-model 双向绑定数据
之前说的v-bind指令,可以绑定数据,但是是单向的,从model向view绑定,下面介绍v-model,可以双向绑定数据 <div id="divApp"><p ...
最新文章
- Ubuntu 10.10 安装 libx11-dev
- Linux/Centos下/lib64/libc.so.6: version `GLIBC_2.14' not found问题
- Python操作excel文件根据某一字段将相同的类拆分
- jQuery图片翻转弹出动画特效
- preg_grep用法
- cocos2d-x项目101次相遇-安装和环境搭建 -xcode
- C - Swaps 2(树状数组,思维)
- 红米手机 android 版本,#MIUI#关于红米手机4高配版 Android版本适配的说明【miui9吧】_百度贴吧...
- 福禄电子烟遭消费者起诉:吸完不舒服 广告与说明书自相矛盾
- 排序 给excel_excel排序技巧:这些不同方式的排序方法你都会了么
- 文本分类(一)封装分词器
- sass穿透 scoped 的情况下 去修改ui组件的样式
- 两行代码开启 Ubuntu ftp服务
- 经典的进程同步问题-----哲学家进餐问题详解
- 优酷KUX视频转换MP4工具,纯个人向分享
- Newton 3 牛顿动力学插件 - 主体属性面板
- 2021年中国碳纤维市场发展现状及重点企业对比分析:光威复材vs中复神鹰vs中简科技[图]
- arctanx麦克劳林公式推导过程_三角函数的求导过程
- 伦茨科技-智能语音遥控器
- Bazel Remote Caching
热门文章
- 【多目标优化求解】基于matlab粒子群算法求解智能微电网多目标优化问题【含Matlab源码 383期】
- ai人工智能软件_您应该了解的5家创新AI软件公司
- java自动填充_java-自动使用随机数据填充原始属性?
- 安装semantic-text-similarity
- java 爬虫 html页面 parse,Java 爬虫 爬取html网页解析
- linux librtmp 编译,在linux系统下安装python librtmp包的实现方法
- python global用法_python可视化——pyechart库
- 利用PCA降维的手工计算实例
- sliverlight+WCF项目发布到IIS
- MySQL取每组的前N条记录