javascript原生bind方法详解
bind()方法,是javascript原生的函数类的一个原型方法(即Function.prototype里的方法),不支持ie低版本.
基本格式:
function.bind(obj1,obj2,obj3...);
其中,function是一个方法属性
obj1是执行此方法的this上下文
obj2及之后的参数,是执行function时传入的参数
bind方法有两个用处:
1.用来改变function方法中的上下文
2.给function方法传入参数
bind方法和apply方法,call方法的区别:
1.最大的区别是,bind方法是返回一个改变了上下文和参数的新方法,而不是执行了function
2.bind方法传入的参数(obj2及之后的参数),调用的时候会使用这两个参数,但是调用的时候还可以再接着传入新的参数,与bind时候的参数一起被传入并执行
下面说说具体的用法:
用法1: 无参数,仅仅改变方法的上下文:
<script type="text/javascript"> var Class = function(name,job){
this.name = name;
this.job = job;
};
var jyh = new Class('jyh','web-front-end');
var zxg = new Class('zxg','php');
//给jyh实例添加私有方法:
jyh.intro = function(){console.log(this.name)};
//给jyh实例添加一个相同私有方法,但是使this上下文指向zxg实例:
//注意,使用bind方法,是不执行方法的,只是改变方法里的上下文,返回一个新的方法;
jyh.introOther = jyh.intro.bind(zxg);
jyh.intro(); //指针指向自己
jyh.introOther(); //指针指向zxg </script>
用法2: 改变方法的上下文,并且带有参数:
<script type="text/javascript">
var Class = function(name){
this.name = name;
};
var jyh = new Class('jyh');
var zxg = new Class('zxg');
//给jyh实例添加私有方法:
jyh.intro = function(job){console.log(this.name+','+job)};
//给jyh实例添加一个相同私有方法,但是使this上下文指向zxg实例:
//注意,使用bind方法,是不执行方法的,只是改变方法里的上下文,并且传入执行该方法时的参数
//注意,参数是在bind的同时定义的,而不是执行的时候定义的,详细参考bing-3.html
jyh.introOther = jyh.intro.bind(zxg,'php');
jyh.intro('web-front-end'); //指针指向自己,传入参数
jyh.introOther();
</script>
用法3: 改变方法的上下文,并且传入的参数中带有this:
<script type="text/javascript"> var Class = function(name){
this.name = name;
};
var jyh = new Class('jyh');
var zxg = new Class('zxg');
//给jyh实例添加私有方法:
jyh.intro = function(job){console.log(job)};
//给jyh实例添加一个相同私有方法,但是使this上下文指向zxg实例:
//注意,bind方法,第二个参数开始,this指向决定于bind的时候,而非调用的时候,
//如果在这里使用bind,无论在何处执行jyh.introOther,得到的结果都是 zxg,[object Window]
jyh.introOther = jyh.intro.bind(zxg,this);
jyh.intro('web-front-end'); //指针指向自己,传入参数 var Klass = function(name){
this.name=name;
this.init();
};
Klass.prototype.init=function(){
console.log(this);
//如果在这里使用bind,this指向就是Klass的实例;
//打开注释,this指向klass,关闭注释,根据第22行定义的,this指向window
// jyh.introOther = jyh.intro.bind(zxg,this);
//和在哪里调用没有关系
jyh.introOther();
};
//将Klass实例化时,调用jyh.introOther(),this指向就是klass;
var klass = new Klass('klass'); </script>
用法4: 改变方法的上下文,有参数,并且执行的时候再添加新传入的参数:
<script type="text/javascript"> var Class = function(name){
this.name = name;
};
var jyh = new Class('jyh');
var zxg = new Class('zxg');
//给jyh实例添加私有方法:
jyh.intro = function(job,love,appearance){console.log(this.name+','+job+','+love+','+appearance)};
//给jyh实例添加一个相同私有方法,但是使this上下文指向zxg实例:
//注意,使用bind方法,是不执行方法的,只是改变方法里的上下文,并且传入执行该方法时的参数
jyh.introOther = jyh.intro.bind(zxg,'php');
jyh.intro('web-front-end','rabbit','bad'); //指针指向自己,传入参数
//除了bind时候传入的参数,执行的时候还可以继续传入参数,bind时传入的参数和执行时传入的参数,依次作为参数被传入执行
jyh.introOther('dog','handsome'); </script>
用法5: 不改变上下文,仅仅为了传参而使用bind:
<script type="text/javascript">
var Class = function(name){
this.name = name;
};
var jyh = new Class('jyh');
//给jyh实例添加私有方法:
jyh.intro = function(job,love){console.log(job+','+love)};
//尤其适合用在setInterval方法,需要传入空对象{}在第一个参数的位置
var t = setInterval(jyh.intro.bind({},'web-front-end','rabbit'),3000)
</script>
这就是原生的bind方法,下一篇文章会讲到如何在低版本ie浏览器里对它进行兼容处理.
javascript原生bind方法详解的更多相关文章
- javascript原生bind方法ie低版本兼容详解
上一篇文章讲到了javascript原生的bind方法: http://www.cnblogs.com/liulangmao/p/3451669.html 这篇文章就在理解了原生bind方法的原理以后 ...
- JS中的call、apply、bind方法详解
bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...
- JavaScript Array数组方法详解
Array类型是ECMAScript中最常用的引用类型.ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别.虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表, ...
- Cookie介绍及JavaScript操作Cookie方法详解
本文主要为大家简单介绍了以下Cookie的用途.运行机制,以及JavaScript操作Cookie的各种方法,总结的比较全面,希望能给大家带来帮助. 什么是 Cookie “cookie 是存储于访问 ...
- JavaScript Object.defineProperty()方法详解
Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop ...
- JavaScript中getBoundingClientRect()方法详解
获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...
- HTML 学习笔记 JavaScript(call方法详解)
http://www.cnblogs.com/f-dream/p/4950918.html
- JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
- Javascript获取图片原始宽度和高度的方法详解
前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...
随机推荐
- Receiver not registered.
1. 在MessageListActivity中出现异常:Receiver not registered. 07-16 11:15:47.881: E/AndroidRuntime(32361): F ...
- linux(ubuntu) 查看系统设备信息 命令
时间:2012-08-02 00:12 ubuntu查看版本命令 方法一: 在终端中执行下列指令: cat /etc/issue 方法二: 使用 lsb_release 命令也可以查看 Ubunt ...
- Golang 如何从socket读出所有数据
第一种: func read(conn *net.Conn) error { defer conn.Close() buf := make([]byte, 0, 4096) len := 0 for ...
- sqlserver修改为windows验证登陆, 程序的调整
业务需求, 客户要求sqlserver改为windows验证登陆, sa用户不可用, 程序端如何修改呢? 我在本机做了个测试. 环境: sqlserver2016, springmvc+spring+ ...
- c++ 在控制台用 wcout输出宽字符的问题
在我的电脑上要想通过 std::wcout输出 宽字符 需加入以下代码 #include <io.h> #include <fcntl.h> void main() { _se ...
- JavaScript 数组(Array)对象
Array 对象 Array 对象用于在单个的变量中存储多个值. 创建 Array 对象的语法: new Array(); new Array(size); new Array(element0, e ...
- 保证java的jar包在后台运行
nohup java -jar XX.jar >temp.text &
- JQuery UI datepicker 使用方法(转)
官方地址:http://docs.jquery.com/UI/Datepicker,官方示例: http://jqueryui.com/demos/datepicker/. 一个不错的地址,用来DIY ...
- Intellij使用-- 导入Eclipse的代码格式化文件
目录[-] 方法 安装插件: 配置插件: 使用插件 测试 对于一个团队来说,使用统一的代码格式是非常重要的,否则在使用版本控制工具时,会出现大量的冲突.在Eclipse里,我们可以通过一些xml来进行 ...
- C# Log4Net level优先级别
原文地址:https://blog.csdn.net/pukuimin1226/article/details/51819388?locationNum=2&fps=1 Level定义记录的日 ...