# bind的机制


```
var foo = function(){}
var bar = foo;

console.log(foo === bar) //true

/--------------------------------------/

var foo = function(){}

var bar = function(callback1,callback2){

console.log(callback1 === callback2) //true

}

bar(foo,foo)

/--------------------------------------/

var foo = function(){}

var bar = function(){}

console.log(foo === bar) //false //两个函数,不在同一内存地址中,所以返回了false

对象有属性和方法,函数也是对象的一种,我们也可以称之为函数对象,既然是对象那么就有熟悉和方法,bind就是函数对象下面的一个方法。
我们都知道对象是引用类型,引用的是内存中的一个地址,上面的callback1 === callback2这两个指针就指向了一个地址所以为true。
<br>
<br>

var foo = function(){}

var fooBind = foo.bind()

console.log(foo === fooBind) // false

/--------------------------------------/

var foo = function(){}

var fooBind = foo.bind()

var bar = function(callback1,callback2){

console.log(callback1 === callback2) //false

}

bar(foo,fooBind)

上面的代码中的 foo.bind()的返回值是一个新的函数,其实是将foo拷贝了一份,他们两个已经没有了任何关系,也就是说foo和fooBind已经不在同一个内存地址中了,所以返回了false。
<br>
<br>

var foo = function(){}

var fooBind1 = foo.bind()

var fooBind2 = foo.bind()

console.log(fooBind1 === fooBind2) //false

虽然上面的fooBind1和fooBind2都使用了foo.bind()进行了拷贝,但他们也并没有任何关系,完全两个独立的函数。
<br>
<br>

var obj = {key:"value"}

var foo = function(){

return this;

}

var fooBind1 = foo.bind(obj)

var fooBind2 = foo.bind(obj)

console.log( fooBind1() === fooBind2 () ) //true 他们都指向了同一个obj

console.log( fooBind1 === fooBind2 ) //false 他们分别是存在两个不同内存地址中的,与函数中的this无关,所以返回了false

有人就会这么想了,bind方法的主要目的是为了改变函数内的this指向,那如果我用bind方法拷贝了一个fooBind1和一个fooBind2让他们中的this都指向obj这个对象,那这fooBind1和fooBind2还在同一内存地址中吗
<br>
<br>
<br>
<br>
# bind的用法

var obj = {key:"value"}

var foo = function(){

console.log(this) //obj

}.bind(obj)

foo()

/--------------------------------------/

var obj = {key:"value"}

var foo = function(){

console.log(this) //obj

}

foo.bind(obj)() //也可以这样

让foo中的this指向obj。注意:foo已经并不是foo本身了,而是调用了bind之后返回的一个新的函数
<br>
<br>

var obj = {

method:function(){

    setTimeout(function(){

        console.log(this)    //obj     注意:function(){console.log(this)}.bind(this) 返回值是一个函数

    }.bind(this),1000)
}

}

obj.method()

/--------------------------------------/

var obj = {

method:function(){

    var arg = function(){
console.log(this) //obj
} var argBind = arg.bind(this) //返回来的argBind函数与arg函数完全没有任何关系。 setTimeout(argBind,1000) //与上面的写法完全相等
}

}

obj.method()

简单的使用

JS中的bind方法的更多相关文章

  1. JS中的bind方法学习

    EcmaScript5给Function扩展了一个方法:bind 众所周知 在jQuery和prototype.js之类的框架里都有个bind jQuery里的用途是给元素绑定事件 $("# ...

  2. 分享一个js中的bind方法使用

    来源:http://www.cnblogs.com/yuzhongwusan/archive/2012/02/13/2348782.html Js代码 复制代码 代码如下: var first_obj ...

  3. js中的bind方法的实现方法

    js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...

  4. 秒味课堂Angular js笔记------Angular js中的工具方法

    Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...

  5. js中的tostring()方法

    http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...

  6. JS中通过call方法实现继承

    原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...

  7. jQuery与JS中的map()方法使用

    1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...

  8. JavaScript -- 时光流逝(二):js中数组的方法

    JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...

  9. ASP.NET#使用母版时,如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题

    当使用母版,要使用js中的getElementById()方法取得某个内容页的元素时,所选取的id并不是母版中内容页的id,而是在设计内容页时设定的id例子:母版页: ...... <head ...

随机推荐

  1. PHP 面试题总结

    1.获取数组最后一个位置的值 比较常规的是:$arr[count($arr)-1]; 貌似还有一个数组函数end();可以直接获取最后一个元素的值.相应的还有reset(),next(),curren ...

  2. Muduo网络库实战(一):安装和配置

    1. 参考资料 <Muduo_网络库使用手册> 2. 实战记录 1) muduo依赖项安装 centos安装cmake命令:# yum install cmake centos安装libb ...

  3. STL学习心得

    STL的知识翻来复去,也就那么回事,但是真的想要熟练使用,要下一番功夫.无论是算法,还是STL容器,直白的说就是套路,然而对于一道题,告诉你是STL容器的题,让你套容器也绝非易事. 怎样使用容器,对于 ...

  4. C++基本知识总结

    从第一个CPP开始写起: "hello,world" #include<iostream> using namespace std;//使用所有命名空间 int mai ...

  5. 学习vue第七节,filter过滤器如何的使用

    vue 过滤器如何的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  6. 201771010113 李婷华 《面向对象程序设计(java)》

    一.理论知识部分 设计模式(Design pattern)是设计者一种流行的思考设计问题的方法,是一套被反复使用,多数人知晓的,经过分类编目的,代码设计经验的总结.使用设计模式是为了可重用代码.让代码 ...

  7. NEON中的L可以避免溢出

    在做加法时,比如两个255x255的数值相加,那么正确结果将是130050,对一个最大值为65565的unsigned short是会溢出的,但是如果使用L命令时,则不会产生溢出.这说明L命令,不是先 ...

  8. JVM 虚拟机&&类加载(一)

    虚拟机 虚拟机简介 Java 虚拟机(JVM)是运行java程序的抽象计算机,它是计算机设备的规范,可以采用不同方式进行实现,java 程序通过运行在JVM中实现跨平台,一次编译到处运行,不同的操作系 ...

  9. JAVA知识总结(一):概述

    第一次写文章,有点小紧张,不过没关系,因为我面对的都是小白.好了废话少说,直接开始吧. 我主要说一下JAVA的发展和开发java的基本知识及JAVA的主要特性. 一.JAVA的主要特性: 1. 一方面 ...

  10. vue-cli中浏览器图标的配置

    在VUE全家桶项目里面,这里给大家提供了2种方案,进行浏览器图标的配置. a):先把图片准备好,放在static文件夹下,再找到根目录下的index.html文件,并打开,在HTML文档的<he ...