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. Eclipse创建的Java Web项目,如何启用外置浏览器访问jsp或者html页面

    当我们用Eclipse创建了一个Java Web项目,想访问一个jsp或者html页面时,通常会在目标页面(以jsp为例)上点击鼠标右键,选择[Run As]——>[Run on Server] ...

  2. Java 读取clob字段的几种方法

    Java 读取clob字段的几种方法 一.第一种 Clob clob = rs.getClob("remark");//Java.sql.Clob String detailinf ...

  3. Linux ps -ef vs. ps aux(ps -aux)

    ps aux.ps -aux.ps -ef之间的区别 - wynter_的博客 - CSDN博客 https://blog.csdn.net/wynter_/article/details/73825 ...

  4. GitHub上优秀的开源资源

    (1)整理了所有跟编程相关的免费书籍 https://github.com/EbookFoundation/free-programming-books/blob/master/free-progra ...

  5. Dart匿名方法函数和闭包

    /* 内置方法/函数: print(); 自定义方法: 自定义方法的基本格式: 返回类型 方法名称(参数1,参数2,...){ 方法体 return 返回值; } */ void printInfo( ...

  6. 转 ORA-13541: system moving window baseline size (691200) greater than retention (432000)

    修改awr生成报告时间间隔和保存时间时报错,由默认的每小时生成,保存8天修改为每半个小时生成一次,保存5天: SQL> exec dbms_workload_repository.modify_ ...

  7. spring 配置事务管理器

    在Spring中数据库事务是通过PlatformTransactionManager进行管理的,jdbcTemplate是不能支持事务的,而能够支持事务的是org.springframework.tr ...

  8. 分类:logistic回归

    import numpy as np import matplotlib.pyplot as plt x=np.linspace(-1,1,200) y=1/(1+np.exp(10*x-1)) pl ...

  9. 压力测试 Apache ab

    https://www.jianshu.com/p/166a4ea8aade https://httpd.apache.org/docs/2.4/programs/ab.html 安装: 按照提示安装 ...

  10. 内存运行PE文件

    内存中运行文件 拿exe并在HxD或010中打开 - cntrl+a copy as C 粘贴到encrypt.cpp 编译并运行encrypt.cpp - 创建shellcode.txt 从shel ...