call、apply、bind三者的异同
可以改变函数体内的this指向
语法:函数.call()、函数.apply()、函数.bind()
call方法
一种调用函数的方式,但是它可以改变函数的 this 指向
应用场景: 经常做继承.
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a+b)
};
fn(1,2)// 此时的this指向的是window 运行结果为3
fn.call(o,1,2)//此时的this指向的是对象o,参数使用逗号隔开,运行结果为3
apply方法
也是调用函数的方式,改变函数的 this 指向。
应用场景: 经常跟数组有关系
var o = {
name: 'andy'
}
function fn(a, b) {
console.log(this);
console.log(a+b)
};
fn()// 此时的this指向的是window 运行结果为NaN
fn.apply(o,[1,2])//此时的this指向的是对象o,参数使用数组传递 运行结果为3
bind方法
bind() 方法不会调用函数,但是能改变函数内部this 指向,返回的是改变this之后产生的新函数
如果只是想改变 this 指向,并且不想调用这个函数的时候,可以使用bind
应用场景:不调用函数,但是还想改变this指向
var o = {
name: 'andy'
};
function fn(a, b) {
console.log(this);
console.log(a + b);
};
var f = fn.bind(o, 1, 2); //此处的f是bind返回的新函数
f();//调用新函数 this指向的是对象o 参数使用逗号隔开
call、apply、bind三者的异同
-
共同点 : 都可以改变this指向
-
不同点:
- call 和 apply 会调用函数, 并且改变函数内部this指向.
- call 和 apply传递的参数不一样,call传递参数使用逗号隔开,apply使用数组传递
- bind 不会调用函数, 可以改变函数内部this指向.
-
应用场景
- call 经常做继承.
- apply经常跟数组有关系. 比如借助于数学对象实现数组最大值最小值
- bind 不调用函数,但是还想改变this指向. 比如改变定时器内部的this指向. 删除线格式
改变this的方法,apply和call最初设计的时候为什么要设计这两个,为什么apply参数是数组call不是
this
引用了调用函数的上下文对象。
如果想更改这个this上下文,就可以使用apply call。
-
为什么要设计
apply
和call
:
如果想更改这个this上下文,就可以使用apply call。 -
为什么
apply
参数是数组而call
不是:
apply
和call
的主要区别在于如何传递函数参数。为了提供不同的用例和便利性。-
apply: 使用
apply
时,你传递参数作为数组(或类数组对象,如arguments
对象)给函数。这在你不确定参数数量或想将数组直接作为参数传递给函数时特别有用。例子:
function greet(a, b, c) { console.log(this.name + " says: " + a + ", " + b + ", " + c); } var person = {name: "Alice"}; greet.apply(person, ["Hello", "How are you", "Goodbye"]);
-
call: 使用
call
时,你传递参数给函数作为单独的参数,而不是数组。例子:
greet.call(person, "Hello", "How are you", "Goodbye");
-
这两个方法的存在增强了 JavaScript 的灵活性,允许开发者在不同的上下文中执行函数并传递任意数量的参数。