call(),apply(),bind()的用法及举例
通过学习call(),apply(),bind()的用法和区别,我们能更好的理解this
及作用域的含义,为后面的编程打下基础。
call()的用法:
调用一个函数,使其具有一个指定的this
值和分别地提供的参数(参数的列表)
参数解释:function.call(thisArg, arg1, arg2, ...)
;
thisArg
:在fun函数运行时指定的this
值*。*需要注意的是,指定的this
值并不一定是该函数执行时真正的this
值,如果这个函数处于non-strict mode,则指定为null
和undefined
的this
值会自动指向全局对象(浏览器中就是window对象),同时值为原始值(数字,字符串,布尔值)的this
会指向该原始值的自动包装对象。
arg1, arg2, ...
:指定的参数列表。
举例说明:
function Animal(type, value) {this.type = type;this.value = value;}
function Dog(type, value) {Animal.call(this, type, value);this.name = "二狗子";this.age = 18}
var hehe = new Dog("室友", "1");
console.log(hehe.name); //二狗子
console.log(hehe.type); //室友
复制代码
在上述例子中,通过call
改变了Animal
的this
指向Dog
,并且将参数type
,value
传入Animal
中。
apply()的用法
调用一个具有给定this
值的函数,以及作为一个数组(或类似数组对象)提供的参数。
参数解释:func.apply(thisArg, [argsArray])
thisArg
: 可选的。在 func
函数运行时使用的 this
值。请注意,this
可能不是该方法看到的实际值:如果这个函数处于非严格模式下,则指定为 null
或 undefined
时会自动替换为指向全局对象,原始值会被包装。
argsArray
:可选的。一个数组或者类数组对象,其中的数组元素将作为单独的参数传给 func
函数。如果该参数的值为 null
或 undefined
,则表示不需要传入任何参数。
举例说明:
//求数组中的最大值
var arr = [2, 7, 10, 1]function getMax2(arr) {return Math.max.apply(null, arr);//return Math.max.call(null, ...arr); }console.log(getMax2(arr)); //10alert(Math.max(1,4,9,6)); //9
复制代码
在上述例子中,我们可以看出apply
和call
的不同:**接收的参数一个是数组一个是参数列表。**而在Math.max.apply(null, arr)
中apply
会自动将数组转变成参数列表,其等价于Math.max(2,7,10,1)
apply
还多用于构造函数绑定:链接
bind()的用法
创建一个新的函数,在调用时设置this
关键字为提供的值。并在调用新函数时,将给定参数列表作为原函数的参数序列的前若干项。
参数解释: function.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg
:调用绑定函数时作为this
参数传递给目标函数的值。 如果使用new
运算符构造绑定函数,则忽略该值。当使用bind
在setTimeout
中创建一个函数(作为回调提供)时,作为thisArg
传递的任何原始值都将转换为object
。如果bind
函数的参数列表为空,执行作用域的this
将被视为新函数的thisArg
。
arg1, arg2, ...
:当目标函数被调用时,预先添加到绑定函数的参数列表中的参数。
举例说明:
window.value = 3;var foo = {value:1};function bar() {console.log(this.value);}bar(); // 3bar.call(foo); //1
//指定函数this绑定为foo, 产生一个新函数,之后再运行的时候,内部的this就是被绑定的对象var bindFoo = bar.bind(foo);setTimeout( function() {bindFoo();},2000)
// 2秒后打印 1
复制代码
这个例子可以通过对比,很好的理解bind
的运用:
bar()
直接调用函数,其中的value
指的是全部变量value = 3
bar.call(foo)
这里使用call
立刻改变了bar
中的this
指向为foo
中
var bindFoo = bar.bind(foo);
setTimeout( function() {bindFoo();
},2000)
复制代码
bind
常用于异步,在setTimeout
中,设置的时间内,bar
的this
保留着指向foo
,所以两秒后打印1,不是3。
通过这个例子,我们了解到call(),apply()
与bind()
的不同之处是bind()
可以为目标函数保留this
的指向,当执行目标函数时,this
会指向设置的作用域。
说明:参数解释来源于MDN
转载于:https://juejin.im/post/5cb316dcf265da03904c08f1
call(),apply(),bind()的用法及举例相关推荐
- call() , apply() ,bind()的用法
call() , apply() ,bind()的用法 - 作用:改变this指向,可以传递参数 - 语法: A.call(B, 参数1, 参数2)A.apply(B, [ 参数1, 参数2])A.b ...
- 复习javascript中call,apply,bind的用法
一直很难理解js中的call apply bind,在w3schools,mdn阅读了,也看了很多相关的文章,今天我来写下我理解的call apply bind 首先创建一个函数 function m ...
- call,apply,bind的用法与区别
1.call/apply/bind方法的来源 首先,在使用call,apply,bind方法时,我们有必要知道这三个方法究竟是来自哪里?为什么可以使用的到这三个方法? call,apply,bind这 ...
- call,apply,bind,new实现原理
在实际开发过程中,对于函数封装时,不确定外部是谁调用的,调用函数内部方法时,有可能是window调用这时就会报错,常使用call,apply,bind来绑定this指向. Function.proto ...
- python里apply用法_Python apply函数的用法
Python apply函数的用法 发布于 2014-08-07 21:02:24 | 674 次阅读 | 评论: 0 | 来源: 网友投递 Python编程语言Python 是一种面向对象.解释型计 ...
- JavaScript内置一些方法的实现原理--new关键字,call/apply/bind方法--前戏
new关键字,call/apply/bind方法都和this的绑定有关,在学习之前,首先要理解this. 一起来学习一下this吧 首先.this是一个对象. 对象很好理解,引用类型值,可以实现如th ...
- call / apply / bind
对于 call / apply / bind 来说,他们的首要目的是用于改变执行上下文的 this 指针. call / apply 对 call / apply 的使用,一般都如下,用于改变执行环境 ...
- python enumerate函数_关于python中enumerate和zip函数的用法及举例
关于python中enumerate和zip函数的用法及举例 关于enumerate函数: enumerate函数可以同时返回列表或元组等可迭代对象的下标和内容,但实际上,enumerate函数实际返 ...
- JavaScript中的call,apply,bind学习总结
JavaScript 中的 call, apply, bind 这三个函数的作用和区别在各大论坛都被讨论了很多次了,但是我一直都还没来得及好好总结,这次正好看到了一个很不错的关于JavaScript ...
最新文章
- 1049. 数列的片段和
- JavaScript实现euclideanDistance欧氏距离算法(附完整源码)
- openHEVC 编译 for VS2017+Win10 x64
- IntelliJ IDEA for Mac自定义动态代码模板快捷键(Live Templates Shortcut)
- nyist 17 -----记忆式搜索------Accept
- 02、Windows Phone 套接字(Socket)实战之服务器端设计
- 零氪科技与诺华达成战略合作 共同打造数字化医疗创新模式
- 神州数码否认买下华为荣耀,股价连续第二日涨停,创历史新高!
- [译]GLUT教程 - 整合代码3
- 51单片机原理知识点,复位时钟和时序(二)
- 磁盘设置压缩导致无法将数据库还原到该硬盘的问题
- 关闭打印机 文件共享的服务器,文件和打印机共享服务可以禁止?
- 程序员技能与成长:程序员的必备工具箱(值得收藏)
- theano安装教程 linux,Ubuntu安装Theano+CUDA
- 常见容错机制:failover、failfast、failback、failsafe
- vue实现5秒后自动跳转到首页
- 实验三+161+张丽霞
- chmod 777 什么意思:鸟哥的linux私房菜第六章学习笔记
- 用PV操作写出一个不会出现死锁的哲学家进餐问题
- c语言中f5的作用,3G的AKA协议中F1至F5的UE端的实现(附代码C语言)