JavaScript的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。
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方法的更多相关文章
- javascript原生bind方法详解
bind()方法,是javascript原生的函数类的一个原型方法(即Function.prototype里的方法),不支持ie低版本. 基本格式: function.bind(obj1,obj2,o ...
- javascript原生bind方法ie低版本兼容详解
上一篇文章讲到了javascript原生的bind方法: http://www.cnblogs.com/liulangmao/p/3451669.html 这篇文章就在理解了原生bind方法的原理以后 ...
- Javascript中bind()方法的使用与实现
对于bind,我愣了下,这个方法常用在jquery中,用于为被选元素添加一个或多个事件处理程序. 查了下手册,发现bind的作用和apply,call类似都是改变函数的execute context, ...
- JavaScript之bind方法实现代码分析
我们来分析一下bind方法的实现代码,下图的bind方法的实现为MDN(开发者社区)中的代码. 由上图可得:bind方法实现了两个功能:绑定this和科里化.
- javascript对象bind()方法兼容处理
bind() 函数在 ECMA-262 第五版才被加入:它可能无法在所有浏览器上运行.你可以部份地在脚本开头加入以下代码,就能使它运作,让不支持的浏览器也能使用 bind() 功能 if (!Func ...
- JavaScript中的call、apply、bind方法的区别
在JavaScript 中,this的指向是动态变化的,很可能在写程序的过程中,无意中破坏掉this的指向,所以我们需要一种可以把this的含义固定的技术,于是就有了call,apply 和bind这 ...
- bind 方法实现
[要求]:实现 bind 方法 [实现]: // 简单方法 Function.prototype.bind = Function.prototpe.bind || function(context) ...
- Javascript中call,apply,bind方法的详解与总结
在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...
- 如何在JavaScript中正确引用某个方法(bind方法的应用)
在JavaScript中,方法往往涉及到上下文,也就是this,因此往往不能直接引用,就拿最常见的console.log("info…")来说,避免书写冗长的console,直接用 ...
随机推荐
- 如何处理iOS中照片的方向
使用过iPhone或者iPad的朋友在拍照时不知是否遇到过这样的问题,将设备中的照片导出到Windows上时,经常发现导出的照片方向会有问题,要么横着,要么颠倒着,需要旋转才适合观看.而如果直接在这些 ...
- Logtail提升采集性能
默认性能限制 为防止滥用消耗过多机器资源,我们对默认安装的Logtail进行了一系列的资源限制.默认安装的Logtail最多日志采集速度为20M/s,20个并发发送. 其他资源限制请参考:启动参数 h ...
- 第三期 预测——Frenet 坐标
Frenet坐标 在讨论过程模型之前,我们应该提到“Frenet Coordinates”,它是一种以比传统x,y笛卡尔坐标更直观的方式表示道路位置的方式. 用Frenet坐标,我们使用变量 s和d描 ...
- laravel博客后台操作步骤
- asp.net MVC 模板定制
模板存放位置:C:\Program Files (x86)\Microsoft Visual Studio 12.0\Common7\IDE\ItemTemplates\CSharp\Web\MVC ...
- Python--day65--Django框架介绍
原文链接:http://www.cnblogs.com/liwenzhou/p/8296964.html 做web开发用的是MVC框架: Django框架简介 MVC框架和MTV框架(了解即可) MV ...
- 下推栈实现(c++编程思想 p136)
1 头文件Stack.h #ifndef STACK_H #define STACK_H struct Stack { struct Link { void* data; Link* next; vo ...
- solaris 10 基本使用
1. 新增用户 注释掉home行# cat /etc/auto_master # # Copyright 2003 Sun Microsystems, Inc. All rights reserved ...
- ElasticSearch从不懂到会用1—安装篇
连续加班近一个多月,项目终于告一段落了,也腾出时间写一写项目中用到的东西.在这个项目中,我负责的主要是多种业务场景下的数据查询和搜索,其中搜索用到了ElasticSearch搜索引擎.下面主要围绕El ...
- 2018-8-10-UWP-分享用那个图标
title author date CreateTime categories UWP 分享用那个图标 lindexi 2018-08-10 19:16:52 +0800 2018-2-13 17:2 ...