一、call、apply、bind方法的共同点和区别:
(1)apply 、 call 、bind 三者都是用来改变函数的this对象的指向的;
(2)apply 、 call 、bind 三者第一个参数都是this要指向的对象,也就是想指定的上下文(函数的每次调用都会拥有一个特殊值——本次调用的上下文(context)——这就是this关键字的值。);
(3)apply 、 call 、bind 三者都可以利用后续参数传参;
(4)bind 是返回对应函数,便于稍后调用;apply 、call 则是立即调用 。
1、call():
语法:fn.call(thisArg,arg1,arg2.....)
其中thisArg就是fun函数运行时的指定的this值。arg1,arg2传递的其他值.....
其中thisArg有下面4种情况:
(1) 不传,或者传null,undefined, 函数中的this指向window对象
(2) 传递另一个函数的函数名,函数中的this指向这个函数的引用
(3) 传递字符串、数值或布尔类型等基础类型,函数中的this指向其对应的包装对象,如 String、Number、Boolean
(4) 传递一个对象,函数中的this指向这个对象
function a(){
console.log(this); //输出函数a中的this对象
}
function b(){}
var c={name:"call"}; //定义对象c
a.call(); //window
a.call(null); //window
a.call(undefined); //window
a.call(1); //Number
a.call(''); //String
a.call(true); //Boolean
a.call(b); //function b(){}
a.call(c); //Object
常用例子:
const obj= {
name: ‘Lucy’
}
function fn(x,y){
console.log(this);
console.log(x+y)
}
//1、调用函数;2、改变this的指向
fn.call(obj,1,2) //还可以传递参数
2、apply()
语法:fn.apply(thisArg,[arg1,arg2.....])
说明:如果 thisArg 不是一个有效的数组或者不是 arguments 对象,那么将导致一个 TypeError。
如果没有提供 任何一个参数,那么 Global 对象将被用作 thisArg, 并且无法被传递任何参数。
常用例子:
const obj= {
name: ‘Lucy’
}
function fn(x,y){
console.log(this);
console.log(x+y)
}
//1、调用函数;2、改变this的指向
fn.call(obj,[1,2]) //还可以传递参数,必须以数组的形式出现
call 和 apply的区别
对于 apply、call 二者而言,作用完全一样,只是接受参数的方式不太一样。
3、bind()
语法:fn.bind(thisArg[, arg1[, arg2[, ... ]]]);
thisArg:当绑定函数被调用时,该函数会作为原函数运行时的this指向,当使用new操作符调用绑定函数时,该参数无效。
arg1, arg2... :当绑定函数被调用时,这些参数将置于实参之前传递给被绑定的方法。
返回值:返回由指定的this值和初始化参数改造的原函数拷贝。
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function() {
return function(){
return this.name;
}.bind(this)
}
}
console.log(object.getNameFunc()());//>My Object