JavaScript 中 call()、apply()、bind() 的用法

之前对与JavaScript中的call,apply,bind这几个方法一直理解的很模糊,今天总结一下。

例1

 var name = '小王',
age = 20;
var obj = {
name: '小张',
objAge: this.name,
func: function () {
console.log(this.name + '年龄' + this.name);
}
}
 obj.objAge;  // 17
 obj.myFun() // 小张年龄 undefined

例2

var favorite = '李青';

function shows(){
console.log(this.fav);
}
shows()  //李青

比较一下这两者 this 的差别,第一个打印里面的 this 指向 obj,第二个全局声明的 shows() 函数 this 是 window ;

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

var name ='小王',
  age = 17;
var obj = {
  name: '小张',
objAge: this.age,
  func: function () {
console.log(this.name + '年龄' + this.age);
}
}
var db = {
  name:'小李',
  age:'30'
}
obj.myFun.call(db);    // 小李年龄 30
obj.myFun.apply(db);    // 小李年龄 30
obj.myFun.bind(db)();   // 小李年龄 30
 

以上出了 bind 方法后面多了个 () 外 ,结果返回都一致!

由此得出结论,bind 返回的是一个新的函数,你必须调用它才会被执行。

2,对比call 、bind 、 apply 传参情况下

var name ='小王',
  age = 17;
var obj = {
  name: '小张',
objAge: this.age,
  func: function (from,place) {
console.log(this.name + '年龄' + this.age + '来自' + from + '去到' +place);
}
}
var db = {
  name:'小李',
  age:'30'
}
obj.myFun.call(db,'成都','上海');     // 小李 年龄 30   来自 成都去往上海
obj.myFun.apply(db,['成都','上海']); // 小李 年龄 30 来自 成都去往上海
obj.myFun.bind(db,'成都','上海')(); // 小李 年龄 30 来自 成都去往上海
obj.myFun.bind(db,['成都','上海'])();   // 小李 年龄 30 来自 成都,上海去往 undefined

微妙的差距!

从上面四个结果不难看出:

call 、bind 、 apply 这三个函数的第一个参数都是 this 的指向对象,第二个参数差别就来了:

call 的参数是直接放进去的,第二第三第 n 个参数全都用逗号分隔,直接放到后面 obj.myFun.call(db,'成都', ... ,'string' )。

apply 的所有参数都必须放在一个数组里面传进去 obj.myFun.apply(db,['成都', ..., 'string' ])。

bind 除了返回是函数以外,它 的参数和 call 一样。

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

对于call,apply,bind 的理解的更多相关文章

  1. call,apply,bind的理解

    2020-03-19 call,apply,bind的理解 先说区别call, apply基本上没什么不一样,唯一不一样的地方是传参方式不同 但是bind和call,apply有区别.bind是重新绑 ...

  2. 理解 JavaScript call()/apply()/bind()

    理解 JavaScript this 文章中已经比较全面的分析了 this 在 JavaScript 中的指向问题,用一句话来总结就是:this 的指向一定是在执行时决定的,指向被调用函数的对象.当然 ...

  3. 学习前端的菜鸡对JS的call,apply,bind的通俗易懂理解

       call,apply,bind 在JavaScript中,call.apply和bind是Function对象自带的三个方法,都是为了改变函数体内部 this 的指向.            a ...

  4. call,apply,bind的理解

    call,apply,bind均是用于改变this指向. 三者相似之处: 1:都是用于改变函数的this指向. 2:第一个参数都是this要指向的对象. 3:都可以通过后面的参数进行对方法的传参. l ...

  5. call,apply,bind的用法

    关于call,apply,bind这三个函数的用法,是学习javascript这门语言无法越过的知识点.下边我就来好好总结一下它们三者各自的用法,及常见的应用场景. 首先看call这个函数,可以理解成 ...

  6. JavaScript中call,apply,bind方法的总结。

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  7. call(),apply(),bind()与回调

    1.call(),apply(),bind()方法 JavaScript 中通过call或者apply用来代替另一个对象调用一个方法,将一个函数的对象上下文从初始的上下文改变为由 thisObj 指定 ...

  8. javascript-this,call,apply,bind简述2

    上节我们一起研究了this这个小兄弟,得出一个结论,this指向调用this所在函数(或作用域)的那个对象或作用域.不太理解的朋友可以看看上节的内容,这次我们主要探讨一下call(),apply(), ...

  9. call,apply,bind方法的总结

    why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之前,通常会有这些问题. var a = { user:"追梦子", fn:f ...

  10. JavaScript中call,apply,bind方法的总结

    原文链接:http://www.cnblogs.com/pssp/p/5215621.html why?call,apply,bind干什么的?为什么要学这个? 一般用来指定this的环境,在没有学之 ...

随机推荐

  1. 一天久坐办公室,怎么减fei?!

    久坐的危害想必看到这篇文章的,一定都百度浏览了好多文章了,所以危害大家也都知道了,这里也就不一一列出. 久坐有危害,那么怎么减少危害呢,办法是什么???那就是不久坐啦.可是因为工作性质,不久坐臣妾恐怕 ...

  2. Deque 容器

    1.Deque (1)定义 deque容器是C++标准模版库(STL,Standard Template Library)中的部分内容.deque容器类与vector类似,支持随机访问和快速插入删除, ...

  3. 长链剖分优化树形DP总结

    长链剖分 规定若\(x\)为叶结点,则\(len[x]=1\). 否则定义\(preferredchild[x]\)(以下简称\(pc[x]\),称\(pc[x]\)为\(x\)的长儿子)为\(x\) ...

  4. 3D Computer Grapihcs Using OpenGL - 01 环境设置

    这系列文章是我学习Youtube上一套OpenGL教程的笔记,自己对教程的案例重新制作并且做了一定程度的修改(更有条理,且修正了一些问题).后续将持续更新. Visual Studio 2017工程 ...

  5. shell 中使用正则表达式

    ls | xargs echo | sed 's/.*\(\w\+\)\s\(\w\+\s\)*\1d.*/\1/' 说明 \w\+表示一段连续的字符串 \s\+ 一个或者多个空格 \s* 0个或者多 ...

  6. np.asarray(a, dtype=None, order=None)

    np.asarray(a, dtype=None, order=None) 参数a:可以是,列表, 列表的元组, 元组, 元组的元组, 元组的列表,多维数组 参数dtype=None, order=N ...

  7. ListView 九宫格布局实现

    1.效果图 2.数据 SettingData.json { "data": [{ "icon":"setting", "title ...

  8. 自定义控件 - 切换开关:SwitchView

    自定义控件一般的几个步骤:1.初始化相关背景图片,布局文件,自定义属性2.设置控件宽高OnMeasure()3.布局或者排版OnLayout()4.绘制控件OnDraw()5.处理触摸事件OnTouc ...

  9. c# 用DotNetZip来解压/压缩文件

    //https://archive.codeplex.com/?p=dotnetzip //最新在Nuget 下载DotNetZip using Ionic.Zip; private void but ...

  10. EDM营销应注意要定期发送邮件

    一个成熟的EDM营销方案应该要确定完整的邮件发送频率,并且严格按照计划执行.这点在EDM营销过程中非常重要,下面为大家分析一下. 一个EDM营销应该确定一下发送的时间,每月或者每周发送一次,这样用户能 ...