javascript方法--bind()

bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解。

语法

fun.bind(this,arg1,arg2,...)

bind()方法会创建一个新的函数,称为绑定函数,fun方法在this环境下调用

该方法可传入两个参数,第一个参数作为this,第二个及以后的参数则作为函数的参数调用

实例 

1.创建绑定函数

 1 this.a = 1;
 2 var module = {
 3     a : 2,
 4     getA:function() {
 5     return this.a;
 6     }
 7 };
 8 module.getA();//2
 9
10 var getA1 = module.getA;
11 // getA在外部调用,此时的this指向了全局对象
12 getA1();//1
13
14 // 再把getA1方法绑定到module环境上
15 var getA2 = getA1.bind(module);
16 getA2();

从上面的例子可以看出,为什么要创建绑定函数,就是当我们调用某些函数的时候是要在特定环境下才能调用到,所以我们就要把函数放在特定环境下,就是使用bind把函数绑定到特定的所需的环境下。

2.让函数拥有预设的参数

使用bind()方法使函数拥有预设的初始参数,这些参数会排在最前面,传给绑定函数的参数会跟在它们后面

 1 function list(){
 2     // 让类数组arguments拥有数组的方法slice,这个函数实现了简单把类数组转换成数组
 3     return Array.prototype.slice.call(arguments);
 4 }
 5
 6 list(1,2,3);//[1,2,3]
 7
 8 //给list绑定一个预设参数4
 9 var list1 = list.bind(undefined,4);
10
11 list1();//[4]
12
13 list1(1,2,3);//[4,1,2,3]

3.setTimeout的使用

正常情况下,调用setTimeout的时候this会指向全局对象,但是使用类的方法时我们需要指向类的实例,所以要把this,绑定要回调函数方便继续使用实例

 1 function Fun1() {
 2   this.name = 1;
 3  }
 4 Fun1.prototype.fun2 = function() {
 5   window.setTimeout(this.fun3.bind(this), 1000);
 6  }
 7 Fun1.prototype.fun3 = function(){
 8     console.log(‘name:‘+this.name);//name:1
 9 }
10 var fun = new Fun1();
11 fun.fun2();

4.快捷方法--把类数组转换成数组

第一种方法是使用apply方法

1 function fun1() {
2     var slice = Array.prototype.slice;
3     return slice.apply(arguments);
4 }
5
6 fun1(1,2,3);//[1,2,3]

第二种方法是使用call方法和bind方法一起使用

function fun2() {
    var unboundSlice = Array.prototype.slice;
    // 把函数的call方法绑定在数组slice方法上,之后再给call方法传递参数
    var slice = Function.prototype.call.bind(unboundSlice);
    return slice(arguments);
}

fun2(1,2,3);//[1,2,3]

关于bind方法还是会有一些比较难理解的地方,所以还是要仔细琢磨。

希望大家多多指正~

时间: 2024-12-05 23:17:13

javascript方法--bind()的相关文章

(转)javascript方法--bind()

地址:https://www.cnblogs.com/xxxxBW/p/4914567.html bind方法,顾名思义,就是绑定的意思,到底是怎么绑定然后怎么用呢,下面就来说说我对这个方法的理解. 语法 fun.bind(this,arg1,arg2,...) bind()方法会创建一个新的函数,称为绑定函数,fun方法在this环境下调用 该方法可传入两个参数,第一个参数作为this,第二个及以后的参数则作为函数的参数调用 实例  1.创建绑定函数 1 this.a = 1; 2 var m

javascript中bind函数的作用

javascript的bind的作用 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <style> 6 button {background-color:#0f0;} 7 </style> 8 </head> 9 <body> 10 <button id="button"> 按钮

面试官:能解释一下javascript中bind、apply和call这三个函数的用法吗

一.前言    不知道大家还记不记得前几篇的文章:<面试官:能解释一下javascript中的this吗> 那今天这篇文章虽然是介绍javascript中bind.apply和call函数,但是多少也和this有点关联. 假如在前面那场面试末尾,面试官不依不饶继续问你javascript中的this,那看完本篇文章后一定还会有收获. (本篇文章不会站在this的角度去回答问题,而是重于解释bind.apply和call这三个函数的用法和使用场景) 二.正戏开始 面试官:能解释一下javascr

jQuery基础学习5——JavaScript方法获取页面中的元素

给网页中的所有<p>元素添加onclick事件 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head>

在 Flash ActionScript 2.0 中调用 Javascript 方法

本篇文章由:http://xinpure.com/call-the-javascript-method-in-flash-actionscript-2-0/ 在 Flash ActionScript 2.0 中调用 Javascript 方法 最近在工作中,有个这样的需求: 要从 Flash ActionScript 2.0 中调用网页上的 Javascript 方法 这是一个关于 Flash 和 Javascript 交互的问题. 在 ActionScript 2.0 中调用外部 javasc

JavaScript方法

JavaScript方法归纳: 一.    Array(): 1. shift():删除第一个元素,返回删除的值. 示例: <script> function b(a){ document.write(a + "<br/>"); } var a = [8,2,3,4,5]; var shift = a.shift(); b(shift); b(a.length); } </script> 2.pop():删除最后一个元素,返回删除的值.       

JavaScript方法splice()和slice()

1 splice() 1.1 说明 splice() 方法向/从数组中添加/删除项目,然后返回被删除的项目.该方法会改变原始数组.Link 1.2 语法 arrayObject.splice(index,howmany,item1,.....,itemX) 参数 index: 必需.整数,规定添加/删除项目的位置,使用负数可从数组结尾处规定位置. howmany: 必需.要删除的项目数量.如果设置为 0,则不会删除项目. item1, ..., itemX: 可选.向数组添加的新项目. 返回值

节点插入--对比jQuery和JavaScript方法(一)

二.插入元素: 1 <div> 2 <p>面朝大海,春暖花开</p> 3 </div> (一).jQuery方法 1.在节点内部插入: 方法 说明 append() 向每个匹配的元素内部追加内容 appendTo() 把所有的元素追加到另一个指定的元素集合中,实际上是颠倒了append()的用法.如$(A).append(B)与$(B).appendto(A)是等价的 prepend() 向每个匹配的元素内部前置内容 prependTo() 把所有匹配的元素

一些比较实用的javascript方法收集,留着有用

动态加载javascript文件 <script type="text/javascript"> //<!-- /*动态加载方法*/ function loadScript(url, callback){ var script = document.createElement("script"); script.type = "text/javascript"; if(script.readyState){ //IE scrip