JS中的bind方法
# 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方法的更多相关文章
- JS中的bind方法学习
EcmaScript5给Function扩展了一个方法:bind 众所周知 在jQuery和prototype.js之类的框架里都有个bind jQuery里的用途是给元素绑定事件 $("# ...
- 分享一个js中的bind方法使用
来源:http://www.cnblogs.com/yuzhongwusan/archive/2012/02/13/2348782.html Js代码 复制代码 代码如下: var first_obj ...
- js中的bind方法的实现方法
js中目前我遇见的改变作用域的5中方法:call, apply, eval, with, bind. var obj = { color: 'green' } function demo () { c ...
- 秒味课堂Angular js笔记------Angular js中的工具方法
Angular js中的工具方法 angular.isArray angular.isDate angular.isDefined angular.isUndefined angular.isFunc ...
- js中的tostring()方法
http://blog.sina.com.cn/s/blog_85c1dc100101bxgg.html js中的tostring()方法 (2013-11-12 11:07:43) 转载▼ 标签: ...
- JS中通过call方法实现继承
原文:JS中通过call方法实现继承 讲解都写在注释里面了,有不对的地方请拍砖,谢谢! <html xmlns="http://www.w3.org/1999/xhtml"& ...
- jQuery与JS中的map()方法使用
1.jquery中的map()方法 首先看一个简单的实例: $("p").append( $("input").map(function(){ return $ ...
- JavaScript -- 时光流逝(二):js中数组的方法
JavaScript -- 知识点回顾篇(二):js中数组的方法 1. 数组 (1)定义数组,数组赋值 <script type="text/javascript"> ...
- ASP.NET#使用母版时,如果要使用js中的getElementById()方法取得某个内容页的元素时要注意的问题
当使用母版,要使用js中的getElementById()方法取得某个内容页的元素时,所选取的id并不是母版中内容页的id,而是在设计内容页时设定的id例子:母版页: ...... <head ...
随机推荐
- 《JavaScript和jQuery实战手册(原书第2版)》——2.1节语句
2.1 语句JavaScript语句是基本的编程单元,通常表示JavaScript程序中的单个步骤.可以把一条语句看做一个句子一样,就好像成串的句子一起组成一个段落(或一章,或一本书)一样,把语句组合 ...
- Node.js中的express框架,修改内容后自动更新(免重启),express热更新
个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! 以前node中的express框架,每次修改代码之后,都需要重新npm s ...
- 「每天一道面试题」Java类的生命周期包括哪几个阶段?
一个Java类被加载到虚拟机中,它的生命周期才算开始,直到被从内存中卸载,它的生命周期才算结束.从开始到结束,它的整个生命周期包括加载.验证.准备.解析.初始化.使用和卸载7个阶段,其中验证.准备和解 ...
- 在Jetson TX2上捕获、显示摄像头视频
参考文章:How to Capture and Display Camera Video with Python on Jetson TX2 与参考文章大部分都是相似的,如果不习惯看英文,可以看看我下 ...
- Android Library 发布开源库 JCenter & JitPack 攻略
对于Android 的开源库,一般通过 JCenter 或者 JitPack 发布开源.两种方式均可~ 当你造了一个好玩有用的东西想要分享给大家时,开源出来便是一种好方式~ 一. 上传开源库到 JCe ...
- 数据源管理 | 基于DataX组件,同步数据和源码分析
本文源码:GitHub·点这里 || GitEE·点这里 一.DataX工具简介 1.设计理念 DataX是一个异构数据源离线同步工具,致力于实现包括关系型数据库(MySQL.Oracle等).HDF ...
- 首次使用AWS服务器EC2
AWS有一年的免费套餐,这个便宜我得占. 申请的时候需要填写银行卡,AWS暂不支持储蓄卡,只好绑信用卡了. 创建EC2实例之后,下一个要解决的问题就是远程root访问. 1. 修改安全组设置 2. s ...
- 学习vue第五节,vue中使用class和style的css样式
vue中使用class样式 数组 <h1 :class="['red', 'thin']">这是一个H1</h1> 数组中使用三元表达式 <h1 :c ...
- 设计模式(Java语言)- 建造者模式
前言 在日常的生活中,我们可以经常看到建造者模式的影子.比如,建造房子,那么房子就是一个产品,房子由门,窗,墙,地板等部门组成.然后包工头在建造房子的时候就根据设计好的图纸来建造,但是包工头并不是亲自 ...
- 从excel表格加载数据返回DataSet
添加命名空间:using System.Data.OleDb; /// <summary> /// 从excel表格加载数据返回DataSet /// </summary> / ...