apply、call、bind的作用都相同,都是把函数添加都某个对象上。 首先来看一下apply的用法: <!DOCTYPE html><html lang="en"><head> <meta
apply、call、bind的作用都相同,都是把函数添加都某个对象上。
首先来看一下apply的用法:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body> test</body><script> function sum(a,b){ return a+b; } function callsum1(a,b){ return sum.apply(this,arguments); } function callsum2(a,b){ return sum.apply(this,[a,b]) } console.log(callsum1(10,10));//20 console.log(callsum2(10,10));//20</script></html>
apply和call的区别在于接受参数的不同,只需要根据参数类型来判断使用apply还是call即可。
然后来看一下call的用法:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body> test</body><script> console.log(factorial(5));*/ function sum(a,b){ return a+b; } function callsum(a,b){ return sum.call(this,a,b); } console.log(callsum(10,10));//20</script></html>
事实上,传递参数并非apply和call真正的用武之地,他们真正强度大的地方在于能够扩充函数赖以运行的作用域。下面来看一个例子:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body> test</body><script> window.color = "red"; var o = {color:"blue"}; function sayColor(){ console.log(this.color); } sayColor();//red sayColor.call(this);//red sayColor.call(window);//red sayColor.call(o);//blue sayColor.apply(this);//red sayColor.apply(o);//blue</script></html>
ECMAScript 5 还定义了一个方法:bind()。这个方法创建一个函数的实例,其this会被绑定到传给bind()函数的值。例如:
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>test</title></head><body> test</body><script> window.color = "red"; var o = {color:"blue"}; function sayColor(){ console.log(this.color); } var objectSayColor = sayColor.bind(o); objectSayColor();//blue</script></html>