目录
这个三个方法都是改变函数的this指向的方法。
一、call
代码:
javascript
const obj={
uname:"pink"
}
function fn(){
console.log(this) //window
}
// 1. 调用函数
fn()
// 2. 改变 this 指向
fn.call(obj)
打印:可以看到函数在非严格模式下this指向window, 通过call方法将this指向了obj 。
1、继承的子类可以使用父类的方法
javascript
function Animal(){
//this 指向小cat
this.eat=function (){
console.log("吃东西")
}
}
function Cat(){
//this指向小cat
Animal.call(this) //key words
}
let cat = new Cat();
cat.eat()
终端打印:若没有Animal.call(this) 将Cat中的this指向Animal,cat对象也不会有eat方法,会报错
也可实现多继承
javascript
function Animal(){
this.eat=function (){
console.log("吃东西")
}
}
function Bird(){
this.fly=function (){
console.log("飞翔")
}
}
function Cat(){
Animal.call(this)
Bird.call(this)
}
let cat = new Cat();
cat.eat()
cat.fly()
打印如下:
2、可以接收任意参数
第一个参数就是我们函数中的this需要指向的对象
javascript
function sayName(a,b,c){
console.log(a,b,c)
console.log(this)
}
sayName.call(undefined,1,2,3)
打印:
二、call、apply、bind比较
1、案例一
javascript
let obj={name:"Jack"}
function fun01(){
console.log(this,this.name)
}
fun01.call(obj)
打印:可以看到,调用fun01调用call以后fun01的this就指向了obj的this,调用this的属性时也调用的是obj的了。
类似地,我们将call换成apply,
javascript
let obj={name:"Jack"}
function fun01(){
console.log(this,this.name)
}
fun01.apply(obj)
打印:这里和call效果一样,都立即执行了。
再换成bind,并没有立即执行
javascript
let obj={name:"Jack"}
function fun01(){
console.log(this,this.name)
}
fun01.bind(obj)
案例一,我们可以得出,call和apply都是立即执行的,而bind并不会调用立即执行。
2、案例二
javascript
let obj={name:"Jack"}
function fun01(age,sex){
this.age=age
this.sex=sex
console.log(this,this.name,this.age,this.sex)
}
fun01.call(obj,18,"female")
打印
javascript
let obj={name:"Jack"}
function fun01(age,sex){
this.age=age
this.sex=sex
console.log(this,this.name,this.age,this.sex)
}
fun01.apply(obj,[18,"female"])
打印:这里可以看到call和apply效果相同,传入参数不同,apply传人的参数是数组,而call的参数是已逗号隔开的,并将这两种方法都会立即执行
javascript
let obj={name:"Jack"}
function fun01(age,sex){
this.age=age
this.sex=sex
console.log(this,this.name,this.age,this.sex)
}
console.log(fun01.bind(obj,18,"female"))
fun01.bind(obj,18,"female")()
打印:bind不会立即执行,而是返回新函数对象,需要再调用函数对象再打印。
三、总结
1、call、apply、bind方法都可以改变this的指向,可以配合this使用,实现继承的效果。
2、call、apply都是调用后会立即指向的,但区别在于call传入的参数的逗号隔开的,而apply传入的参数是数组。
3、bind调用后不会立即执行函数,而是返回一个新的函数,需要调用才能执行。