方法调用模式:

当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的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对象。如:
document.addEventListener('click', function(e){ console.log(this); setTimeout(function(){ console.log(this); }, 200); }, false);
点击页面,依次输出:document和window对象
解析:点击页面监听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
obj1.fn是一个函数function(){console.log(this.a)},此时fn1就是不带任何修饰的函数调用,function(){console.log(this.a)}.call(undefined),按理说打印出来的 this 应该就是 undefined 了吧,但是浏览器里有一条规则:

如果你传的 context 就 null 或者 undefined,那么 window 对象就是默认的 context(严格模式下默认 context 是 undefined)

因此上面的this绑定的就是window,它也被称为隐性绑定。
如果你希望打印出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的区别的更多相关文章

  1. jQuery中的bind() live() delegate()之间区别分析

    jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...

  2. Jquery中bind和live的区别

    Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function ...

  3. Bind和Eval的区别详解

    原文:Bind和Eval的区别详解 1.简单描述Eval和Bind的区别 绑定表达式 <%# Eval("字段名") %> <%# Bind("字段名& ...

  4. [jQuery]on和bind事件绑定的区别

    on和bind事件绑定的区别 一个demo展示 <!DOCTYPE html> <html lang="zh"> <head> <titl ...

  5. jQuery bind()与delegate()的区别

    笔试题: bind()与delegate()的区别主要有三点: 1 绑定目标 .bind直接绑在目标元素上 .delegate绑在父元素上 2  监听个数 .bind监听个数多——每个目标元素都需要添 ...

  6. bind call apply 的区别和使用

    bind call apply 的区别和使用:https://www.jianshu.com/p/015f9f15d6b3 在讲这个之前要理解一些概念,这些概念很重要,有人说过学会了javascrip ...

  7. 关于JavaScript中bind、applay、call的区别

    在JavaScript中this的指向一直是一个困扰我们的问题,在JavaScript中this的指向是不固定的,但是我们可以通过使用bind().call().apply()来改变this的指向,但 ...

  8. JQ的live(),on(),deletage(),bind()几个的区别

    今天在网上看到一篇文章,关于JQ里面事件绑定的区别,说说我自己看后的理解,本人菜鸟一枚,很多东西不懂 ,有理解错误的还望大神们多多指教 bind()方法是绑定事件最直接的方法,这个方法是绑定到docu ...

  9. Android入门-Service-start,end,bind,unbind之间的区别

    写贴一段别人关于service中start与bind,end与unbind的分析了: Service创建有两种方法:  startService或者bindService 服务不能自己运行,需要通过调 ...

随机推荐

  1. mysql中的sql_mode

    mysql数据库的中有一个环境变量sql_mode,定义了mysql应该支持的sql语法,数据校验等!我们可以通过以下方式查看当前数据库使用的sql_mode: mysql> select @@ ...

  2. 重识linux-linux的新增与删除用户组和切换命令

    重识linux-linux的新增与删除用户组 1 相关文件 /etc/group /etc/gshadow 2操作相关 groupadd group1 groupmod group1 groupdel ...

  3. 学习笔记:Vue

    https://cn.vuejs.org/v2/api/ 官网API https://cn.vuejs.org/v2/guide/ 官网教程 http://www.runoob.com/vue2/vu ...

  4. jar 问题 : java.io.IOException: invalid header field

    通过本文, 我们明白了什么是 jar的清单文件 MANIFEST.MF, 简单示例: E:\ws\Test\WEB-INF\classes>jar cvfm testCL.jar ListTes ...

  5. 4. powerdesigner 生成sql脚本步骤

    1. 选择数据库类型:DataBase(数据库)-- Change Current DBMS 2. 生成数据库脚本:DataBase(数据库)--generate Database

  6. MYeclipse 和 flex 环境配置

    1安卓JDK  运行 jdk-6u27-windows-i586 安装于 d:/programe/java,注意JRE和JDK安装在一起 测试是否安装成功,运行,CMD,javac 回车.或者java ...

  7. Mac上python2和python3的版本切换

    在命令行执行 vi ~/.bash_profile 在文件下面加上: alias python2='/system/Library/Frameworks/Python.framework/Versio ...

  8. centos LVM详解

    title: centos LVM详解 date: 2018-04-24 14:00:03 tags: [linux,centos,LVM] --- 知识了解 LVM关系图 fdisk命令详解 [ro ...

  9. 大批量数据导出到Excel的实现

    在平时的项目中,将数据导出到Excel的需求是很常见的,在此对一些常见的方法做以总结,并提供一种大数据量导出的实现. OLEDB   使用OLEDB可以很方便导出Excel,思路很简单,处理时将Exc ...

  10. Java学习路线(转)

    原文:http://www.hollischuang.com/archives/489 一.基础篇 1.1 JVM 1.1.1. Java内存模型,Java内存管理,Java堆和栈,垃圾回收 http ...