call()、apply()、bind() 都是用来重定义 this 这个对象的!

var obj1 = {
  username: "HuiTaiLang",
  fn: function() {
    concole.loh(this);
    console.log(this.username);
  }
}
var obj2 = obj1.fn;
obj2(); //undefined

我们想打印对象 obj2 里面的 username 却打印出来 undefined 是怎么回事呢?如果我们直接执行 obj2.fn()是可以的。

var obj1 = {
  username: "HuiTaiLang",
  fn: function() {
    console.log(this);
    console.log(this.username);
  }
}
obj1.fn();   //HuiTaiLang

能够打印是因为,第一个打印里面的 this 指向全局window,第二个打印里面的 this 指向 obj1 。

虽然这种方法可以达到打印username目的,但是如果我们需要将对象保存到另外的一个变量中,那么就可以通过以下方法。

call

var obj1 = {  
  username: "HuiTaiLang",
  fn: function() {
    console.log(this)    
    console.log(this.username);  
  }
}
var obj2 = obj1.fn;
obj2.call(obj1); // HuiTaiLang

通过在 call 方法,第一个参数就是要添加的 obj1环境中,简单来说,this就会指向那个对象。

call 方法除了第一个参数以外还可以添加多个参数,如下:

var obj1 = {  
  username: "HuiTaiLang",
  fn: function(num1, num2) {
    console.log(num1 + num2); 
    console.log(this.username);  
  }
}
var obj2 = obj1.fn;
obj2.call(obj1, 2, 3); // 5

apply

apply方法和call方法有些相似,它也可以改变this的指向。

var obj1 = {  
  username: "HuiTaiLang",
  fn: function() {
    console.log(this.username);  
  }
}
var obj2 = obj1.fn;
obj2.apply(obj1);   // HuiTaiLang

同样apply也可以有多个参数,但是不同的是,第二个参数必须是一个数组,如下:

var obj1 = {  
  username: "HuiTaiLang",
  fn: function(num1, num2) {
    console.log(num1 + num2); 
    console.log(this.username);  
  }
}
var obj2 = obj1.fn;
obj2.apply(obj1, [2, 3]);   // 5

注意:如果call和apply的第一个参数写的是null,那么this指向的是window对象。

var obj1 = {  
  username: "HuiTaiLang",
  fn: function() {
    console.log(this);  
  }
}
var obj2 = obj1.fn;
var obj3 = obj1.fn;
obj2.call(null); // window
obj3.apply(null); // window

bind

bind和call、apply方法不同,实际上bind方法返回的是一个修改过后的函数。

var obj1 = {  
  username: "HuiTaiLang",
  fn: function() {
    console.log(this.username);  
  }
}
var obj2 = obj1.fn;
obj2.bind(obj1);

var newFn = obj2.bind(obj1);
console.log(newFn);
newFn();

我们会发现 bind 并没有被打印,而我们打印 newFn 打印出的是一个函数,并且可以正常执行。

同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。

var obj1 = {  
  username: "HuiTaiLang",
  fn: function(num1, num2) {
    console.log(num1 + num2);
    console.log(this.username);  
  }
}
var obj2 = obj1.fn;
var newFn1 = obj2.bind(obj1, 2, 3);
var newFn2 = obj2.bind(obj1);
newFn1();
newFn1(2, 3);

总结:

call 、bind 、apply 都可以用来改变上下文中的 this。这三个函数的第一个参数都是 this 的指向对象,后面的参数:

  • call 的参数是直接放进去的,后面的参数全都用逗号分隔。
  • apply 的所有参数,都必须放在一个数组里面传进去。
  • bind 除了返回是函数以外,它的参数和 call 一样。

当然,三者的参数不限定是 string 类型,允许是各种类型,包括函数 、 object 等等!

call、apply 和 bind的更多相关文章

  1. JS核心系列:浅谈 call apply 与 bind

    在JavaScript 中,call.apply 和 bind 是 Function 对象自带的三个方法,这三个方法的主要作用是改变函数中的 this 指向,从而可以达到`接花移木`的效果.本文将对这 ...

  2. Javascript中call,apply,bind方法的详解与总结

    在 javascript之 this 关键字详解 文章中,谈及了如下内容,做一个简单的回顾: 1.this对象的涵义就是指向当前对象中的属性和方法. 2.this指向的可变性.当在全局作用域时,thi ...

  3. JS中call、apply、bind使用指南,带部分原理。

    为什么需要这些?主要是因为this,来看看this干的好事. box.onclick = function(){ function fn(){ alert(this); } fn();}; 我们原本以 ...

  4. Javascript中call、apply、bind函数

    javascript在函数创建的时候除了自己定义的参数外还会自动新增this和arguments两个参数 javascript中函数也是对象,call.apply.bind函数就是函数中的三个函数,这 ...

  5. 图解call、apply、bind的异同及各种实战应用演示

    一.图解call.apply.bind的异同 JavaScript中函数可以通过3种方法改变自己的this指向,它们是call.apply.bind.它们3个非常相似,但是也有区别.下面表格可以很直观 ...

  6. js里function的apply vs. bind vs. call

    js里除了直接调用obj.func()之外,还提供了另外3种调用方式:apply.bind.call,都在function的原型里.这3种方法的异同在stackoverflow的这个答案里说的最清楚, ...

  7. JS之apply,call,bind区别

    为了加深对基础知识的理解,今天再复习下js中的apply,call,bind的区别和用法.整理笔记的过程也是一个再次学习的过程. apply和call js中的调用apply和call方法可以改变某个 ...

  8. JavaScript中call、apply、bind、slice的使用

    1.参考资料 http://www.cnblogs.com/coco1s/p/4833199.html   2.归结如下 apply . call .bind 三者都是用来改变函数的this对象的指向 ...

  9. JS中的控制函数调用:call(),apply()和bind()

    所有的函数都具有call(),apply()和bind()方法.它们可以在执行方法的时候用一个值指向this,并改变面向对象的作用域. apply方法: 以下的两种表达式是等价的: func(arg1 ...

  10. JS中的call、apply、bind方法

    JS中的call.apply.bind方法 一.call()和apply()方法 1.方法定义 call方法: 语法:call([thisObj[,arg1[, arg2[,   [,.argN]]] ...

随机推荐

  1. resp.getWriter().print(categoryList)、resp.getWriter().write(String)与new ObjectMapper().writeValue(resp.getOutputStream(),categoryList)的区别

    前言:最近在复习原生的servlet的时候,对其输出流不理解,故总结一下: resp.getWriter().print(categoryList) 可以输出字符串,也可以输出对象,可能还有其他类型, ...

  2. jar包冲突时怎么办

    因为项目中会依赖许多jar包,免不得就会有冲突,那怎么解决呢? 使用 mvn dependency:tree 可以看到各个包的依赖关系 [INFO] | +- commons-cli:commons- ...

  3. 为什么要配置path环境变量

    因为在jdk下bin文件夹中有很多我们在开发中要使用的工具,如java.exe,javac.exe,jar.ex等,那么我们在使用时,想要在电脑的任意位置下使用这些java开发工具,那么我们就需有把这 ...

  4. 恶补Java Swing线程刷新UI机制(由浅到深的参考大佬博文)

    1. java中进度条不能更新问题的研究 感谢大佬:https://blog.csdn.net/smartcat86/article/details/2226681 为什么进度条在事件处理过程中不更新 ...

  5. 自定义UITableview自带侧滑删除按钮样式 by 徐

    效果如下: 实现原理: 1.打开tableview自带的侧滑删除功能 核心代码: 1 -(void)tableView:(UITableView *)tableView commitEditingSt ...

  6. spring boot 配置静态路径

    一  前言 最近有个项目,需要上传一个zip文件(zip文件就是一堆的html压缩组成)的压缩文件,然后后端解压出来,用户可以预览上传好的文件. 查看资料,spring boot对静态文件,可以通过配 ...

  7. PHP面试笔试宝典

    PHP面试笔试宝典 来自<PHP程序员面试笔试宝典>,涵盖了近三年了各大型企业常考的PHP面试题,针对面试题提取出来各种面试知识也涵盖在了本书. PHP题目 一.单例模式是在应用程序中最多 ...

  8. 基于 Kintex-7 XC7K325T的半高PCIe x4双路万兆光纤收发卡

    一.板卡概述 板卡采用Xilinx公司的XC7K325T-2FFG900I芯片作为主处理器,可应用于万兆网络.高速数据采集.存储:光纤隔离网闸等领域. 二.功能和技术指标: 板卡功能 参数内容 主处理 ...

  9. 轻松理解JS中的面向对象,顺便搞懂prototype和__proto__的原理介绍

    这篇文章主要讲一下JS中面向对象以及 __proto__,ptototype和construcator,这几个概念都是相关的,所以一起讲了. 在讲这个之前我们先来说说类,了解面向对象的朋友应该都知道, ...

  10. 【Kotlin】初识Kotlin(二)

    [Kotlin]初识Kotlin(二) 1.Kotlin的流程控制 流程控制是一门语言中最重要的部分之一,从最经典的if...else...,到之后的switch,再到循环控制的for循环和while ...