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. Java TreeMap使用

    场景: 随机生成50个10到50的数字.然后顺序输出每个数字出现的次数 实现原理: 使用TreeMap,默认带了顺序排序的功能 public static void main(String[] arg ...

  2. c语言程序课程设计题目

    <C语言程序设计>课程设计课题表 一.A类 .职工信息管理系统设计 职工信息包括职工号.姓名.性别.年龄.学历.工资.住址.电话等(职工号不重复).试设计一职工信息管理系统,使之能提供以下 ...

  3. Grafana 在添加邮件和钉钉报警之后不报警的原因是没有重启grafana 不生效重启。

    即使在grafana页面上面添加也需要重启.配置邮件配置文件更需要重启. systemctl restart grafana-server.service

  4. Ionic Cordova 调用原生 Api 实现拍照上传 图片到服务器功能

    Ionic 调用 Device 设备 Api 获取手机的设备信息 1. 找到对应的Api: https://ionicframework.com/docs/native/device/ 2. 安装相关 ...

  5. Influxdb修改数据保留策略

    retention policy: 存储策略,用于设置数据保留的时间,每个数据库刚开始会自动创建一个默认的存储策略 autogen,数据保留时间为永久,之后用户可以自己设置,例如保留最近2小时的数据. ...

  6. 泡泡一分钟:FMD Stereo SLAM: Fusing MVG and Direct Formulation Towards Accurate and Fast Stereo SLAM

    FMD Stereo SLAM: Fusing MVG and Direct Formulation Towards Accurate and Fast Stereo SLAM FMD Stereo ...

  7. 泡泡一分钟:Semi-Dense Visual-Inertial Odometry and Mapping for Quadrotors with SWAP Constraints

    张宁 Semi-Dense Visual-Inertial Odometry and Mapping for Quadrotors with SWAP Constraints 具有SWAP约束的四旋翼 ...

  8. C++类const和static成员初始化

    class A{ private: int a; //变量,属于对象任何地方初始化即可 ; //常量,属于对象,声明的时候初始化.在构造函数初始化列表初始化,最后取初始化列表的值 static int ...

  9. k8s-基础环境配置(六)

    hostname配置1)修改主机名hostnamectl set-hostname xxx2)加入主机映射vim /etc/hosts……关闭selinuxsed -i '/^SELINUX/s/=. ...

  10. 数据结构与抽象 Java语言描述 第4版 pdf (内含标签)

    数据结构与抽象 Java语言描述 第4版 目录 前言引言组织数据序言设计类P.1封装P.2说明方法P.2.1注释P.2.2前置条件和后置条件P.2.3断言P.3Java接口P.3.1写一个接口P.3. ...