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. 磁盘性能指标--IOPS与吞吐量

    磁盘性能指标--IOPS----------------------------------------------------------        IOPS (Input/Output Per ...

  2. AI人工智能学习数据集

    AI人工智能学习数据集,列表如下. 商务合作,科技咨询,版权转让:向日葵,135—4855__4328,xiexiaokui#qq.com boston_house_prices.csvbreast_ ...

  3. PHP 对象继承

    对象继承 继承已为大家所熟知的一个程序设计特性,PHP 的对象模型也使用了继承.继承将会影响到类与类,对象与对象之间的关系. 比如,当扩展一个类,子类就会继承父类所有公有的和受保护的方法.除非子类覆盖 ...

  4. leetcode 374. Guess Number Higher or Lower 、375. Guess Number Higher or Lower II

    374. Guess Number Higher or Lower 二分查找就好 // Forward declaration of guess API. // @param num, your gu ...

  5. OpenGL ES3使用MSAA(多重采样抗锯齿)的方法

    昨晚花费了我2个多小时的时间终于把OpenGL ES3.0中的MSAA给搞定了.在OpenGL ES2.0中,Khronos官方没有引入标准的MSAA全屏抗锯齿的方法,而Apple则采用了自己的GL_ ...

  6. ISO/IEC 9899:2011 条款6.5.3——单目操作符

    6.5.3 单目操作符 语法 1.unary-expression: postfix-expression ++  unary-expression --  unary-expression unar ...

  7. 基于ZooKeeper实现简单的服务注册于发现

    版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/Shaun_luotao/article/ ...

  8. 002——Angular 目录结构分析、app.module.ts 详解、以及 Angular 中创建组件、组件 详解、 绑定数据

    一.目录结构分析 二. app.module.ts.组件分析 1.app.module.ts 定义 AppModule,这个根模块会告诉 Angular 如何组装该应用. 目前,它只声明了 AppCo ...

  9. Python 初级 5 判断再判断(二)

    复习: 分支:完成测试并根据结果做出判断称为分支. 代码块:一行或放在一起的多行代码 缩进:一个代码行稍稍靠右一点 关系操作符(比较操作符):==, >, >=, <, <=, ...

  10. Python - Django - ORM 分组查询补充

    单表查询: models.py: from django.db import models class Employee(models.Model): name = models.CharField( ...