JavaScript中call,apply,bind方法的总结
来源:互联网 发布:json格式3d模型下载 编辑:程序博客网 时间:2024/06/05 09:32
JavaScript中call,apply,bind方法的总结
var a = { user:"bing", fn:function(){ console.log(this.user); //bing }}a.fn() //返回"bing"var b = a.fn;b(); //返回undefined
如果对以上代码的返回值有疑惑的,请看彻底理解JavaScript中this指向
虽然a.fn()方法可以正常返回,但是有时候我们不得不将这个对象保存到另外的一个变量中,那么就可以通过以下方法。
1.call()
通过在call方法,给第一个参数添加要把b添加到哪个环境中,简单来说,this就会指向那个对象。
var a = { user:"bing", fn:function(){ console.log(this.user); //bing }}var b = a.fn;b.call(a);
call方法除了第一个参数以外还可以添加多个参数,如下:
var a = { user:"bing", fn:function(i,j){ console.log(this.user); //bing console.log(i+j); //3 }}var b = a.fn;b.call(a,1,2);
2.apply()
apply方法和call方法有些相似,它也可以改变this的指向
var a = { user:"bing", fn:function(){ console.log(this.user); //bing }}var b = a.fn;b.apply(a);
同样apply也可以有多个参数,但是不同的是,第二个参数必须是一个数组,如下:
var a = { user:"bing", fn:function(i,j){ console.log(this.user); //bing console.log(i+j); //33 }}var b = a.fn;b.apply(a,[11,22]);
注:如果call和apply的第一个参数写的是null,那么this指向的是window对象,如下:
var a = { user:"bing", fn:function(){ console.log(this); //返回Window对象 }}var b = a.fn;b.apply(null);
3.bind()
bind方法和call、apply方法有些不同,但它们都可以用来改变this的指向。
与call、apply方法不同,bind方法返回的是一个修改过后的函数。
var a = { user:"bing", fn:function(){ console.log(this.user); }}var b = a.fn;b.bind(a); //ƒ(){console.log(this.user);}b.bind(a)(); //再执行一次 正常返回'bing'
同样bind也可以有多个参数,并且参数可以执行的时候再次添加,但是要注意的是,参数是按照形参的顺序进行的。
var a = { user:"bing", fn:function(e,d,f){ console.log(this.user); //bing console.log(e,d,f); //10 1 2 }}var b = a.fn;var c = b.bind(a,10);c(1,2);
apply与call的区别
对于apply和call两者在作用上是相同的,但两者在参数上有区别的。 apply参数是数组,call参数是arguments对象
Call和apply是将this指针指向方法的第一个参数。
function sum(num1, num2) { return num1 + num2;}console.log(sum.call(window, 10, 10)); //20 console.log(sum.apply(window, [10, 20])); //30
call与apply的基本用法:
function add(a, b) { alert(a + b);}function sub(a, b) { alert(a - b);}add.apply(sub, [3, 1]); //apply必须是arrayadd.call(sub,3,1); //call必须是object//用 add 来替换 sub,add.call(sub,3,1) == add(3,1) ,所以运行结果为:alert(4);
总结:
call和apply都是改变上下文中的this并立即执行这个函数,bind方法可以让对应的函数想什么时候调就什么时候调用,并且可以将参数在执行的时候添加,这是它们的区别,根据自己的实际情况来选择使用。
阅读全文
0 0
- JavaScript中call,apply,bind方法的总结。
- JavaScript中call,apply,bind方法的总结。
- JavaScript中call,apply,bind方法的总结
- Javascript中call,apply,bind方法的详解与总结
- JavaScript中call,apply,bind方法的总结。
- JavaScript中call,apply,bind方法的总结
- JavaScript中call,apply,bind方法的总结。
- JavaScript中call,apply,bind方法的总结
- JavaScript中call,apply,bind方法的总结
- javascript中apply,call,bind方法
- JavaScript中call()、apply()和 bind()方法
- JavaScript 中apply()、call()和bind()方法的使用
- javascript中call()、apply()、bind()方法的区别
- javascript中call、apply、bind方法的区别
- javascript中call、apply、bind方法的使用
- JavaScript中call,apply,bind方法的总结(改变this指向)
- Javascript中call(),apply(),bind()的区别
- Javascript中apply、call、bind的区别
- linux,windows keepalive参数的查看与设置
- SpringBoot UnsatisfiedDependencyException: Error creating bean with name
- ssh免密登录
- IOI 金牌再传秘笈:水平不高怎么拿NOIP一等奖?
- python pandas 基本使用,sklearn的10种分类器实践
- JavaScript中call,apply,bind方法的总结
- 论快照回档对网站的影响(两个方面)
- struts2学习(2种实现验证方式)
- 【Sail】项目第一天简介和环境搭建
- photo-sphere-viewer.js使用时图片拉伸的问题
- 帮交互设计师判断需求该不该接的五个小原则
- C++ STL一一vector
- http://www.cnblogs.com/handk/archive/2011/03/18/1988466.html
- 【HDU】2544 最短路