apply 、call 以及 bind 的使用和区别
- 2020 年 12 月 1 日
- 笔记
- javascript
一、被apply和call调用的函数中没有传递参数
（一）不传参数
结果：
（二）传递 null
结果：
总结：
1.当使用 apply和 call去调用函数并且没有传递参数时，前提这个函数中也没有传递参数，我们发现 他们的打印结果和 this 指向是相同的 都是指向window 此时相当于 f1() 调用函数 就相当于 f1.apply() 和 f1.call()
2.当传递 null 的时候，他们的指向也是相同的 都是指向 window
此时相当于 f1() 调用函数 就相当于 f1.apply(null) 和 f1.call(null)
（三）当传递一个具体对象时
结果：
我们发现 使用
f1.apply(stu)和f1.call(stu)去调用函数的时候，this的指向发生了改变，不再是 window，而是 Object
二、被 apply和 call 调用的函数中有参数传递
（一）apply和call不传递参数
结果：
总结：
apply和call没有传递参数，所以没有进行参数的运算，值是 NaN ，但是他们的this指向并没有改变，仍然是 window
（二）当传递null时
结果：
总结：
与不传参数的结果是一样的，值是 NaN，并且this 指向没有改变
（三）当传入一个具体对象时
结果：
总结：
两个方法传入具体对象时，都改变了 this的指向，this 指向不是 window ，而是 Object
思考：
两者都传入一个对象改变了 this 指向，但是如何去传入参数进行函数的运算呢？？？
（四）传入多个参数
结果：
总结：
1.apply和call传入的第一个参数表示 this 指向的对象
2.apply和call可以传递多个参数，只是他们传递参数的方式不一样
3.apply是以数组的方式传递参数的
4.call是以参数列表的方式传递参数的，也就是通过一个一个的方式传递参数
（五）改变this指向，获取对象中的属性值
总结：
1.f1()函数调用时，this的指向是window，而window中没有定义age这个属性值，所以是 undefined
2.apply和call都改变了 this 的指向，this 指向了 stu ，stu这个对象中有 age 这个属性值 ，所以输出 age = 18
三、被apply和 call 调用的函数中有返回值
总结：
apply 和 call 都使用变量来接收函数的返回值
四、原型指向改变案例
function Person(food) {
this.food = food
}
// 通过原型来添加方法
Person.prototype.eat = function (x, y) {
console.log('我好想吃 ---->' + this.food)
console.log(x + y)
}
var per = new Person('大猪蹄')
per.eat(100, 100)
//创建 stu 对象，并添加属性和方法
console.log('============================')
function Student(food) {
this.food = food
}
Student.prototype.study = function () {
console.log('秃头少女的日常操作，天天敲代码')
}
var stu = new Student('大鸡腿')
//改变this指向，让this指向 stu对象
//能调用 per对象中的方法
per.eat.apply(stu, [200, 200])
//也能调用自己的方法
stu.study()
结果：
五、总结apply与call
-
apply 的使用方式
函数名字.apply (对象，[参数1，参数2，…])
方法名字.apply (对象，[参数1，参数2，…]) -
call 的使用方式
函数名字.call (对象，参数1，参数2，…)
方法名字.call (对象，参数1，参数2，…) -
作用：改变this 的指向
-
区别：参数传递的方式不一样
-
使用场景：只要是想使用别的对象的方法，并且希望这个方法是当前对象自己的，那么就可以使用 apply 或者 call 的方法 改变 this 的指向
六、bind 方法的使用
结果：
我们发现，虽然使用了bind 方法，但是它并没有输出内容，所以，要用一个变量接收一下，然后再调用
结果:
还可以写成：
七、bind方法的案例
function Person(say){
this.say = say
}
Person.prototype.play = function(x,y){
console.log('做人嘛~~最重要的就是要开心呐！！' + this.say )
console.log(x+y)
}
var per = new Person('对呢对呢')
per.play(10,10)
//这是一条华丽的分割线
console.log('==============================================')
function Student(say){
this.say = say
}
Student.prototype.study = function(){
console.log('一根毛，两根毛，头上还有几根毛')
}
var stu = new Student('撒花撒花')
//调用别人的方法
var ff = per.play.bind(stu)
ff(20,20)
//调用自己的方法
stu.study()
结果：
八、apply与call与bind之间的区别
相同点：
- 他们的作用都是相同的：改变 this 的指向
- 当他们不传参数的时候，就跟直接调用函数或者方法的作用一样，不改变this的指向
- 当只传入 null 的，与上面作用也是一样，不改变this的指向
不同点：
- apply 与 call 直接调用即可
- bind 要使用变量接收一下，然后再调用
- apply与call 是在调用的时候直接传递参数
- bind 可以在用变量接收的时候传递参数，也可以在接收后在调用中传递参数
- 传递参数的方式不一样
- apply 的使用方式
函数名字.apply (对象，[参数1，参数2，…])
方法名字.apply (对象，[参数1，参数2，…]) - call 的使用方式
函数名字.call (对象，参数1，参数2，…)
方法名字.call (对象，参数1，参数2，…) - bind 的使用方式:
函数名字.bind (对象，参数1，参数2，…)
函数名字. bind (对象)，在调用时再传递参数
方法名字.bind (对象，参数1，参数2，…)
方法名字. bind (对象)，在调用时再传递参数
