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方法详解的更多相关文章

  1. javascript原生bind方法ie低版本兼容详解

    上一篇文章讲到了javascript原生的bind方法: http://www.cnblogs.com/liulangmao/p/3451669.html 这篇文章就在理解了原生bind方法的原理以后 ...

  2. JS中的call、apply、bind方法详解

    bind 是返回对应函数,便于稍后调用:apply .call 则是立即调用 . apply.call 在 javascript 中,call 和 apply 都是为了改变某个函数运行时的上下文(co ...

  3. JavaScript Array数组方法详解

    Array类型是ECMAScript中最常用的引用类型.ECMAScript中的数据与其它大多数语言中的数组有着相当大的区别.虽然ECMAScript中的数据与其它语言中的数组一样都是数据的有序列表, ...

  4. Cookie介绍及JavaScript操作Cookie方法详解

    本文主要为大家简单介绍了以下Cookie的用途.运行机制,以及JavaScript操作Cookie的各种方法,总结的比较全面,希望能给大家带来帮助. 什么是 Cookie “cookie 是存储于访问 ...

  5. JavaScript Object.defineProperty()方法详解

    Object.defineProperty() 方法直接在一个对象上定义一个新属性,或者修改一个已经存在的属性, 并返回这个对象. 语法 Object.defineProperty(obj, prop ...

  6. JavaScript中getBoundingClientRect()方法详解

    获取浏览器滚动的高度: scrollTop=document.documentElement.scrollTop || document.body.scrollTop getBoundingClien ...

  7. HTML 学习笔记 JavaScript(call方法详解)

    http://www.cnblogs.com/f-dream/p/4950918.html

  8. JavaScript中数组Array方法详解

    ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...

  9. Javascript获取图片原始宽度和高度的方法详解

    前言 网上关于利用Javascript获取图片原始宽度和高度的方法有很多,本文将再次给大家谈谈这个问题,或许会对一些人能有所帮助. 方法详解 页面中的img元素,想要获取它的原始尺寸,以宽度为例,可能 ...

随机推荐

  1. everything基于Windows平台快速搜索文件

    在Windows搜索文件,自带的搜索效率很低.高效.速度是你忠心的选择... 速度真是杠杠的 下载: http://www.voidtools.com/downloads/ https://files ...

  2. T-Sql常用语句

    1.用bcp导出txt数据 DECLARE ), ) BEGIN , ), '/', '-'); SET @bcp = 'bcp WebStat.dbo.[PV_HIS_' + @date + '] ...

  3. Android中如何让DialogFragment全屏(DialogFragment fullscreen)

    这个问题很让人纠结,因为我要在popopwindows里面使用fragment,但是在popopwindows里面找不到它的父控件,于是转战使用DialogFragment,但是让它全屏是一件很头疼的 ...

  4. wcf 中客户端调用之死 感悟 wcf与原来的webservice2.0 的客户端调用区别(wcf调用完不关闭的话那就把web服务搞死了)

    说到wcf,本人也是刚刚使用所以不是很熟悉 在做项目的时候采用webservice+客户端程序架构 写了一个wcf中的webservice之后,又写了很多的客户端exe程序,有的是轮询调用这个webs ...

  5. Swift 值类型/引用类型

    1.值类型/引用类型 在 Swift 语言中,所有的类型都可以被分为 "值类型" 或者 "引用类型",可以将其理解为函数参数传递的方式. 值类型表示的是将它传递 ...

  6. [AaronYang原创] 敏捷开发-Jira 6.0.5环境搭建[2]

    基本配置-关卡一(我研究了1.5个小时 AaronYang)   JIRA的设置向导将只显示您安装后第一次JIRA. 一旦你完成了它,你不能再次运行它. 然而,每一个设置在设置向导配置可以通过管理控制 ...

  7. golang 学习笔记 ---内存分配与管理

    Go语言——内存管理 参考: 图解 TCMalloc Golang 内存管理 Go 内存管理 问题 内存碎片:避免内存碎片,提高内存利用率. 多线程:稳定性,效率问题. 内存分配   内存划分 are ...

  8. mvc 缓存页面 减轻服务器压力

    方法: using System; using System.Collections.Generic; using System.Linq; using System.Web; using Syste ...

  9. Android MediaPlayer和VideoView的使用

          MediaPlayer MediaPlayer类是Androd多媒体框架中的一个重要组件,通过该类,我们可以以最小的步骤来获取,解码和播放音视频.它支持三种不同的媒体来源: 本地资源 内部 ...

  10. PCM、G.729等常用VoIP编码的理论带宽计算

    可能通信背景的同学,一提到PCM编码,脑海里都能跳出来一个数值64K. 一.64KB还是64Kb? 64Kb! 二.哪里来的64Kb? CCITT规定抽样率为每秒8000KHz,每抽样值编8位码,所以 ...