看似懵懂,其实简单的一比
废话少说直接扯代码
代码段一:
var name = '哪吒', age = 13;
var obj = {
name: '松岛老师',
objAge: this.age,
fun: function () {
console.log('name:', this.name + ',Age:' + this.age);
}
}
obj.fun() // name: 松岛老师,Age:undefined
代码段二:
var name = '太乙真人'
function show () {
console.log(this.name);
}
// show() // 太乙真人
扯一下两段代码的区别
- 第一个
this
指向方法的调用者,也就是obj这个对象 - 第二个
this
因为你的函数是全局声明,所以执行函数时,this指向window
该扯主角了
call() apply() bind()
- 先注意一点:这仨api都是用来"
重新定义this
" 关键词重新
还是之前这段代码
var name = '哪吒', age = 13;
var obj = {
name: '松岛老师',
objAge: this.age,
fun: function () {
console.log('name:', this.name + ',Age:' + this.age);
}
}
新添加一个对象
var cxk = {
name: '鸡你太美',
age: 18
}
结果:
obj.fun.call(cxk) // name: 鸡你太美,Age:18
obj.fun.apply(cxk) // name: 鸡你太美,Age:18
obj.fun.bind(cxk)() // name: 鸡你太美,Age:18
- 至此你会发现这仨功能除了bind带了一个括号,其他好像都是一样都是改变了this的指向,将this重新指向了一个新的对象
- 至此通过观察代码你可以得出结论:
- call() apply() 都是使用后,方法直接执行
- bind() 返回一个方法,需要我们手动调用执行
=========华丽分割线
关于call,apply,bing 参数问题
对原来的代码进行一点点修改:让fun方法带参数
var name = 'itcast', age = 13;
var obj = {
name: '松岛老师',
objAge: this.age,
fun: function (from, to) { // 注意此时这个方法需要传参
console.log('name:', this.name + ',Age:' + this.age, '来自:', from, '去:', to, '参加演出');
}
}
var cxk = {
name: '鸡你太美',
age: 18
}
obj.fun.call(cxk, '日本', '泰国') // 鸡你太美,Age:18 来自: 日本 去: 泰国 参加演出
obj.fun.apply(cxk, ['日本', '泰国']) //鸡你太美,Age:18 来自: 日本 去: 泰国 参加演出
obj.fun.bind(cxk, '日本', '泰国')() //鸡你太美,Age:18 来自: 日本 去: 泰国 参加演出
此时观察代码:
- 参数:
- 第一个参数:this指向的对象
- 第二个参数:call和bind都是将方法参数直接放进去,中间以逗号隔开即可,唯独apply,方法的参数必须放进一个数组才行
最后总结:
1、call,apply,bind都是改变this的指向
2、call,apply都是直接调用方法
3、bind在改变this指向之后返回方法,需要我们手动调用
4、方法传参时,call,bind都是直接将参数直接写入,中间用逗号分开即可,bind必须用数组