前端基础 call、apply、bind
导航
- this 基础
- call 简介
- apply 简介
- bind 简介
一、this 基础
-
在前端学习的过程中，this作为三座大山之一，一直让人比较困惑，主要是因为它和函数、原型、对象等等js最复杂的知识点往往结合在一起。但是当我对它有了一定的了解以后，我就有了一个快速理解它的小窍门
-
下面就让我用一分钟，让你快速入门 this 和 call
let person = {
"name": "张三",
"age": 23,
sayHi() {
console.log('你好，我是' + this.name)
// sayHi()
}
}
假设有一个人,只要你和他说sayHi，他就会给你一个回应，下面让我们来分别模仿两种不同的场景
- 场景1，陌生人打招呼（模拟未来调用不传值情况）
//由于陌生人并不知道 person 的 name，就只能说 hi，那么 person 就会给你一个回复
person.sayHi()// 输出结果：你好，我是张三
- 场景2，熟人打招呼（模拟未来调用传值情况）
// 熟人知道 person 的 name，那么就可以直接传值 + 称呼 person 也会给出相应的回复
person.sayHi.call({name:'小张'}) //输出结果： 你好，我是小张
- 总结：
- 如果函数调用时没有传值，那么函数内部的this默认为是调用它的对象
- 可以使用call指定函数this的值
到这里，我们就对this有了初步的认识，那么让我们再深入一点！
call简介
console.dir(Function.__proo__) // 打印出函数的原型
/*
> ƒ anonymous()
> toString: ƒ ()
> apply: ƒ apply()
> arguments: (...)
> bind: ƒ bind()
> call: ƒ call()
*/
- 可以看出函数的原型上默认就会有 call，apply，bind，arguments等
- 其实他们是我们声明函数时的参数
function fn(this,arguments,arguments){} // 声明
fn(value1,value2)// 调用时 value 会传给 arguments
// this是一个特殊的参数，会被隐藏起来，默认为调用他的对象
- 特殊的参数就会有特殊的传值方法，call就是修改this的一种。
fn.call(this,value1,value2); // call方法的第一个参数会传给this
apply 简介
如果理解了以上内容，那么apply就很简单了，直接看代码
fn.apply({ name: '小张' }, []) // 第一个参数传递给this，其余参数用[]包起来 和call只是写法不同
bind 简介
如果不想this的值被改变，那么就可以用bind来绑定this的值，利用bind创建一个新函数，this会被永久绑定为bind的第一个值
let f1=fn.bind({name:"小张"})
