1、用途

  1)apply,call和bind都是 用来改变this的指向

  2)apply和call会让当前函数立即执行,而bind会返回一个函数,后续需要的时候再调用执行

2、this指向问题

this的指向有以下四种情况:

  1)如果函数中的this没有调用对象,则this指向window(严格模式下,this为undefined)

  2)如果函数中this被不包含子对象的对象调用,则this指向调用它的对象

  3)如果函数中this被包含多级对象的对象调用,则this指向调用它的上一级对象

  4)如果我们调用了对象,并将其赋值给某个变量,然后在需要的时候再去调用执行它,则此时this也是指向的window对象,如:

    var a = obj.myFunc;

    a();

var name="zhang";
var age=18;
var obj={
name:"liu",
myAge:this.age,
myFun:function(){
console.log(this);  // this指向obj
console.log(this.name+";"+this.age)
}
} obj.myAge  // 18
obj.myFun()

上图是我们很常用的一个对象属性的获取和方法的调用,在我们获取obj.myAge属性时,这里的this实际是window对象,所以我们去找window.age,找到的是全局参数age=18

在调用myFun()方法时,本着谁调用this就指向谁的基本原则,此时this指向的是obj对象,所以我们输出的this.name为liu,this.age为undefined

上面的例子如果不太好理解的话,我们看下面这个更直观的例子:

var name="zhangsan";
function showName(){
console.log(this);
console.log(this.name);
}
showName();

我们在这里直接定义了一个方法,并且调用了它,上面说了,谁调用函数,函数里面的this就指向谁,但是我们这里直接调用了showName(),并没有明确说明是谁调用了它啊,其实这里我们可以理解为window.showName(),即this实际上是指向的window。

3、apply和call

  1)先来看看call是如何实现的:

Function.prototype.call=function(context){
// 这里的this指向demo函数
console.log(this);
context=context?Object(context):window;
context.fn=this;
var args=[];
// 参数从1开始循环因为第一个参数是context
for(var i=1;i<arguments.length;i++){
args.push("arguments["+i+"]");
}
// 这里执行context.fn() 即上面的demo(),所以this指向了context,但是因为我们没有传递context,所以this指向了window
var r = eval("context.fn("+args+")")
delete context.fn;
return r;
}
var name="test"
function demo(){
console.log(this)
console.lot(this.name)
}
demo.call();

  1)  当我们传递了context时,context为我们传递的对象;否则为window对象。

  2)  谁调用,this指向谁,我们通过demo.call 调用了call方法,所以这里的this指向的时demo函数

  3)将传递的参数放进args中

  4)通过eval函数执行我们的context.fn,即上面的demo函数

  5)demo函数中,this指向的时call方法中的context,这里时window对象

  6)this.name即window.name

2)call其实是apply的一个语法糖,他们的作用都是用于改变上下文的指向,区别在于,call接受多个参数,而apply接受的是一个数组

var db={
  name:"dema"
}
var obj={
name:"obj",
myFunc:function(from,to){
console.log(this);
console.log(this.name+"来自:"+from,+"去往:"+to);
}
}
obj.myFunc.call(null,'北京','上海')  // this 指向window,this.name=undefined,from=北京,to=上海
obj.myFunc.call(db,'北京','上海');  // this指向db,this.name='dema',from=北京,to=上海
obj.myFunc.apply(db,['北京','上海']);  // this指向db,this.name='dema',from=北京,to=上海

上面例子中,我们分别调用了call和apply,并传入了参数null,db和地名,从上面的call的实现中,可以看到,我们接受的第一个参数是上下文context,用于改变this的指向。

所以上面第一行,传入的context为null,则this指向window,第二行和第三行,都传人了context为db,所以this此时是指向db的,即this.name=db.name

4、bind

bind也是用于改变上下文的指向,它和call一样,接受多个参数。

bind和apply,call的区别在于,bind返回一个方法,用于后面调用,apply和call会直接执行

function print(a,b,c){
console.log(a,b,c)
} var fn = print.bind(null,'D')
fn('A','B','C')  // D,A,B

apply,call和bind的使用及区别的更多相关文章

  1. 让你弄懂 call、apply、bind的应用和区别

    call.apply.bind使用和区别 // 有只猫叫小黑,小黑会吃鱼 const cat = { name: '小黑', eatFish(...args) { console.log('this指 ...

  2. 使用call、apply、bind继承及三者区别

    js里的继承方法有很多,比如:使用原型链的组合继承.es6的Class.寄生继承以及使用call.apply.bind继承.再说继承之前,我们先简单了解下它们的区别. 一.区别: 同:三者都是改变函数 ...

  3. call,apply,bind的用法及区别

    <script> function test(){ console.log(this) } // new test(); //函数调用call方法的时候,就会执行. //call的参数:第 ...

  4. bind,call,applay的区别

    方法调用模式: 当一个函数被保存为对象的一个方法时,如果调用表达式包含一个提取属性的动作,那么它就是被当做一个方法来调用,此时的this被绑定到这个对象. var a = 1 var obj1 = { ...

  5. 动态作用域与this +apply和call +bind

    词法作用域是一套关于引擎如何寻找变量以及会在何处找到变量的规则. (函数作用域和块作用域) JavaScript 中的作用域就是词法作用域,也就是静态作用域,由定义代码决定 动态作用域似乎暗示有很好的 ...

  6. js call apply caller callee bind

    call apply bind作用类似.即调用一个对象的一个方法,以另一个对象替换当前对象. call 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]]]]) ...

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

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

  8. Jquery中bind和live的区别

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

  9. Bind和Eval的区别详解

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

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

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

随机推荐

  1. Spring AOP设计

    Spring IOC设计到的设计模式: 工厂模式,模板方法模式,单例模式 Spring AOP涉及到的设计模式: 工厂模式,代理模式 1.Spring AOP目标 将分散在程序各处的横切关注点剥离出来 ...

  2. 浏览器并发数 network.http.max-connections

    network.http.max-connections https://bugs.chromium.org/p/chromium/issues/detail?id=12066 https://chr ...

  3. Docker 记一次 docker-compose 完整实践(转)

    本文介绍docker-compose实践时的一些疑问与解决方案, 可能对新手略有帮助, 因此整理成文. 有不妥之处欢迎指摘! Q1: docker-compose 如何安装? A1: https:// ...

  4. ifc osg施工现场模拟

    基于ifc数据模型的施工现场模拟

  5. Spring Cloud微服务安全实战- 2-1 环境安装

    下面这些.后续随着讲课逐步再去安装. 2019年1月开始 jdk是收费的 找jdk最后一个免费版本 8u192这是jdk1.8最后的一个免费版本 STS spring提供的ide可以方便的开发spri ...

  6. window TOMCAT 端口被占用了怎么办?

    查看80端口被哪些程序占用了 netstat -ano|findstr "80" 根据pid(进程id) 查询对应的应用程序 tasklist|findstr "1828 ...

  7. Qt编写自定义控件69-代码行数统计

    一.前言 代码行数统计主要用来统计项目中的所有文件的代码行数,其中包括空行.注释行.代码行,可以指定过滤拓展名,比如只想统计.cpp的文件,也可以指定文件或者指定目录进行统计.写完这个工具第一件事情就 ...

  8. JAVA协程 纤程 与Quasar 框架

    ava使用的是系统级线程,也就是说,每次调用new Thread(....).run(),都会在系统层面建立一个新的线程,然鹅新建线程的开销是很大的(每个线程默认情况下会占用1MB的内存空间,当然你愿 ...

  9. Swift4.0复习扩展

    1.扩展计算式属性: 2.对方法进行扩展: /// 定义枚举类型Light, /// 它指定了基本类型String enum Light: String { case red = "red& ...

  10. 【linux学习笔记三】链接命令

    链接命令:ln link =============华丽的分割线============= ln又有软链接和硬链接 //硬链接特征(不建议创建硬链接) 1.拥有相同的i节点和存储block块,可以看做 ...