bind,call,applay的区别
方法调用模式:
当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象。
var a = 1
var obj1 = {
a:2,
fn:function(){
console.log(this.a)
}
}
obj1.fn()//2
此时的this是指obj1这个对象,obj1.fn()
实际上是obj1.fn.call(obj1)
,事实上谁调用这个函数,this就是谁。补充一下,DOM对象绑定事件也属于方法调用模式,因此它绑定的this就是事件源DOM对象。如:
解析:点击页面监听click事件属于方法调用,this指向事件源DOM对象,即
obj.fn.apply(obj)
,setTimeout内的函数属于回调函数,可以这么理解,f1.call(null,f2)
,所以this指向window。把函数赋值之后再调用
var a = 1
var obj1 = {
a:2,
fn:function(){
console.log(this.a)
}
}
var fn1 = obj1.fn
fn1()//1
function(){console.log(this.a)}
,此时fn1就是不带任何修饰的函数调用,function(){console.log(this.a)}.call(undefined)
,按理说打印出来的 this 应该就是 undefined 了吧,但是浏览器里有一条规则:如果你传的 context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)
如果你希望打印出2,可以修改
fn1()
为fn1.call(obj1)
,显示地绑定this为obj1回调函数
var a = 1
function f1(fn){
fn()
console.log(a)//1
}
f1(f2)
function f2(){
var a = 2
}
改写代码如下:
var a = 1
function f1(){
(function (){var a = 2})()
console.log(a)//1
}
f1()
仍旧是最普通的函数调用,f1.call(undefined)
,this指向window,打印出的是全局的a。
借此,我们终于可以解释为什么setTimeout总是丢失this了,因为它也就是一个回调函数而已。
setTimeout(function() {
console.log(this)//window
function fn(){
console.log(this)//window
}
fn()
}, 0);
call
call 方法第一个参数是要绑定给this的值,后面传入的是一个参数列表。当第一个参数为null、undefined的时候,默认指向window。
var arr = [1, 2, 3, 89, 46]
var max = Math.max.call(null, arr[0], arr[1], arr[2], arr[3], arr[4])//89
可以这么理解:
obj1.fn()
obj1.fn.call(obj1);
fn1()
fn1.call(null)
f1(f2)
f1.call(null,f2)
应用场景
求数组中的最大和最小值
var arr = [1,2,3,89,46]
var max = Math.max.apply(null,arr)//89
var min = Math.min.apply(null,arr)//1
将类数组转化为数组
var trueArr = Array.prototype.slice.call(arrayLike)
call、apply和bind函数存在的区别:
bind返回对应函数, 便于稍后调用; apply, call则是立即调用。
bind,call,applay的区别的更多相关文章
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- Jquery中bind和live的区别
Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...
- Bind和Eval的区别详解
原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名& ...
- [jQuery]on和bind事件绑定的区别
on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...
- jQuery bind()与delegate()的区别
笔试题: bind()与delegate()的区别主要有三点: 1 绑定目标 .bind直接绑在目标元素上 .delegate绑在父元素上 2 监听个数 .bind监听个数多——每个目标元素都需要添 ...
- bind call apply 的区别和使用
bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...
- 关于JavaScript中bind、applay、call的区别
在JavaScript中this的指向一直是一个困扰我们的问题,在JavaScript中this的指向是不固定的,但是我们可以通过使用bind().call().apply()来改变this的指向,但 ...
- JQ的live(),on(),deletage(),bind()几个的区别
今天在网上看到一篇文章,关于JQ里面事件绑定的区别,说说我自己看后的理解,本人菜鸟一枚,很多东西不懂 ,有理解错误的还望大神们多多指教 bind()方法是绑定事件最直接的方法,这个方法是绑定到docu ...
- Android入门-Service-start,end,bind,unbind之间的区别
写贴一段别人关于service中start与bind,end与unbind的分析了: Service创建有两种方法: startService或者bindService 服务不能自己运行,需要通过调 ...
随机推荐
- vue项目安装sass/scss
vue 添加scss 安装好之后使用: 注意scss和sass的语法区别,scss是用传统花括号,sass是缩进控制,看个人习惯选择语言 sass语法看这里==>sass基本语法 vue项目编译 ...
- Oracle bacic
1.连接Oracle 2.操作数据库 3.单表查询 4.SUID 5.常用函数 6.集合运算 7.Oracle 对象 8.PL/SQL 9.存储函数 10.存储过程 11.触发器 1.连接到数据库 O ...
- Docker的安装和启动
2.Docker安装与启动 2.1安装环境说明 Docker官方建议在Ubuntu中安装,因为Docker是基于Ubuntu发布的,而且一般Docker出现的问题Ubuntu是最先更新或者打补丁的.在 ...
- IdentityServer4 接口说明
在.net core出来以后很多人使用identityServer做身份验证. ids4和ids3的token验证组件都是基于微软的oauth2和bearer验证组件.园子里也很多教程,我们通过教程了 ...
- python中的split、rsplit、splitlines
split()从左向右寻找,以某个元素为中心将左右分割成两个元素并放入列表中 rsplit()从右向左寻找,以某个元素为中心将左右分割成两个元素并放入列表中 splitlines()根据换行符(\n) ...
- 高程三 BOM 读书笔记
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- twisted的installReactor()函数
#twisted的安装反应堆函数def installReactor(reactor): """ Install reactor C{reactor}. @param r ...
- 将tgz文件解压到指定目录
转:http://blog.csdn.net/zhenwenxian/article/details/4400404 tar在linux上是常用的打包.压缩.加压缩工具,他的参数很多,折里仅仅列举常用 ...
- linux驱动开发第二步 驱动模块传参(module_param函数使用)
在驱动的模块中声明一下你要传递的参数名称,类型和权限 module_param(变量的名称,类型,权限); 先上例子 #include <linux/init.h> #include &l ...
- 08_组件三大属性(2)_props
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...