call,apply,bind三者的区别
1、本质上的区别三者最大的区别是call和apply会改变this的指向并且立即执行函数,但是bind方法不会立即执行函数,而是会返回this改变后的函数。let obj = {name:'张三',age:18,func:function(){console.log(this.name + "年龄" + this.age);}}
1、本质上的区别
三者最大的区别是call和apply会改变this的指向并且立即执行函数,但是bind方法不会立即执行函数,而是会返回this改变后的函数。
let obj = {
name:'张三',
age:18,
func:function(){
console.log(this.name + "年龄" + this.age);
}
}
let obj2 = {
name:'李四',
age:20
}
obj.func.call(obj2) //李四年龄20
obj.func.apply(obj2); //李四年龄20
obj.func.bind(obj2)(); //李四年龄20
这三个结果都一样 bind
后面多一个括号是因为 bind
返回值是一个函数加上()编程立即执行函数
2、call
fn.call()
当call方法执行的时候会做三个事情:
- 1.首先要把操作的函数中的this关键字变为call方法第一个传递的参数。
- 2.把call方法第二个及以后的参数获取到
3.把要操作的函数执行,并且把第二个以后传递进来的实参传递给函数用法:
(1)Object.call(obj,arg1,arg2.......)
参数:
第一个参数obj
是作为函数上下文的对象(也就是this)
第二个参数arg1:
从第二个参数开始后续所有参数都是传给方法的参数
(2)如果不传参数,或者第一个参数是null
或nudefined
,this
都指向window
let fn = function (a, b) {
console.log(this, a, b);
};
let obj = { name: "obj" };
fn.call(obj, 1, 2); // this:obj a:1 b:2
fn.call(1, 2); // this:1 a:2 b:undefined
fn.call(); // this:window a:undefined b:undefined
fn.call(null); // this=window a=undefined b=undefined
fn.call(undefined); // this=window a=undefined b=undefined
3、apply
apply和call基本上一致,唯一区别在于传参方式:apply把需要传递给fn的参数放到一个数组(或者类数组)中传递进去,虽然写的是一个数组,但是也相当于给fn一个个的传递
(1)用法:Object.apply(obj,[args])
参数:
第一个参数obj
是作为函数上下文的对象(也就是this)
第二个参数args
:是一个数组作为参数传入
fn.call(obj, 1, 2);
fn.apply(obj, [1, 2]);
注意,如果fn.apply(obj,1,2)则会报错
4、bind
bind:语法和call一模一样,区别在于立即执行还是等待执行,bind不兼容IE6~8
fn.call(obj, 1, 2); // 改变fn中的this,并且把fn立即执行
fn.bind(obj, 1, 2); // 改变fn中的this,fn并不执行
(1)用法:Object.bind(obj,arg1,arg2.......)
参数:
第一个参数obj
是作为函数上下文的对象(也就是this)
第二个参数arg1:
从第二个参数开始后续所有参数都是传给方法的
参数
并且返回值是一个function
(2)
function foo() {
console.log("foo被执行", this);
}
function sum(num1, num2, num3, num4) {
console.log(num1, num2, num3, num4);
}
// 系统的bind使用
var bar = foo.bind("abc");
bar();
5、总结
call和apply
的区别:两个函数都是改变函数执行上下文的,但是传的参数不同bind
和其他两个差别在:传参与call相同,但是bind会返回一个新的函数
更多推荐
所有评论(0)