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。

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。

var foo = function(){}
var fooBind1 = foo.bind()
var fooBind2 = foo.bind() console.log(fooBind1 === fooBind2) //false

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

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还在同一内存地址中吗

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之后返回的一个新的函数

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()

简单的使用

 

JavaScript的bind方法的更多相关文章

  1. javascript原生bind方法详解

    bind()方法,是javascript原生的函数类的一个原型方法(即Function.prototype里的方法),不支持ie低版本. 基本格式: function.bind(obj1,obj2,o ...

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

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

  3. Javascript中bind()方法的使用与实现

    对于bind,我愣了下,这个方法常用在jquery中,用于为被选元素添加一个或多个事件处理程序. 查了下手册,发现bind的作用和apply,call类似都是改变函数的execute context, ...

  4. JavaScript之bind方法实现代码分析

    我们来分析一下bind方法的实现代码,下图的bind方法的实现为MDN(开发者社区)中的代码. 由上图可得:bind方法实现了两个功能:绑定this和科里化.

  5. javascript对象bind()方法兼容处理

    bind() 函数在 ECMA-262 第五版才被加入:它可能无法在所有浏览器上运行.你可以部份地在脚本开头加入以下代码,就能使它运作,让不支持的浏览器也能使用 bind() 功能 if (!Func ...

  6. JavaScript中的call、apply、bind方法的区别

    在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这 ...

  7. bind 方法实现

    [要求]:实现 bind 方法 [实现]: // 简单方法 Function.prototype.bind = Function.prototpe.bind || function(context) ...

  8. Javascript中call,apply,bind方法的详解与总结

    在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...

  9. 如何在JavaScript中正确引用某个方法(bind方法的应用)

    在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用 ...

随机推荐

  1. MySQL的安装问题总结--终极解决方案

    MySQL安装 选择:custom 自定义 更改路径 安装到其他盘 选择:launch configuration  finish 进行配置 如果忘记选择 找 "E:\Program Fil ...

  2. 洛谷P4126 [AHOI2009]最小割

    题目:洛谷P4126 [AHOI2009]最小割 思路: 结论题 在残余网络上跑tarjan求出所有SCC,记id[u]为点u所在SCC的编号.显然有id[s]!=id[t](否则s到t有通路,能继续 ...

  3. 批量或者选择导出datagrid列表数据到表格

    //导出项目信息 function exportXmxx(){ //判断是否选择站址 var index = $("#dgObj").datagrid('getChecked'); ...

  4. nodejs启本地服务器

    https.js var PORT = 8666;// var http = require('http'); var url=require('url'); var fs=require('fs') ...

  5. 巨蟒python全栈开发-第11阶段 ansible_project3

    今日大纲: 1.用户创建 2.前端优化 3.用户编辑 4.用户删除 5.ansible api介绍 1.用户创建 新建一个user_create.html的页面 <form class=&quo ...

  6. MySQL 获取当前月的天数

    select curdate();                       --获取当前日期 select DATE_ADD(curdate(),interval -day(curdate())+ ...

  7. 2019-7-20-win10-uwp-使用-msbuild-命令行编译-UWP-程序

    title author date CreateTime categories win10 uwp 使用 msbuild 命令行编译 UWP 程序 lindexi 2019-07-20 21:56:2 ...

  8. @loj - 2092@ 「ZJOI2016」大森林

    目录 @description@ @solution@ @accepted code@ @details@ @description@ 小 Y 家里有一个大森林,里面有 n 棵树,编号从 1 到 n. ...

  9. oracle函数 INSTRB(C1,C2[,I[,J]])

    [功能]在一个字符串中搜索指定的字符,返回发现指定的字符的位置; [说明]多字节符(汉字.全角符等),按2个字符计算 [参数] C1    被搜索的字符串 C2    希望搜索的字符串 I     搜 ...

  10. uva 11375 Matches (递推)

    http://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem&p ...