抛出几个问题:
1.改变函数内部this指针的指向函数有哪几种,他们的区别是什么?
有call,bind,apply
区别
bind是绑定,不会立即调用,返回一个函数值
三个函数的第一个参数均为:指定了函数体内this对象的指向
bind,call第二,三,四…个参数都表示为要传递的参数,而apply用一个数组表示,这就表明apply第二个参数是要传递的数据,即有效参数只有两个。
通常call可用于构造函数的继承,slice.call(伪数组)可以将伪数组转为真数组。
apply可求数组中的最大最小值
例:
console.log(Math.max.apply(null,[1,2,3,4])) //4
console.log(Math.max.call(null,[1,2,3,4])) //NaN
console.log(Math.max.call(null,1,2,3,4)) //4
console.log(Math.max.call(null,...[1,2,3,4])) //4
当第一个参数为null时
函数体内的this会默认指向宿主对象,在浏览器中则是window
call可以直接调用函数,但要注意this指向
var name='window'
var person1={
name:'张三',
say:function(){
console.log(this.name)
}
}
var person2={
name:'李四',
say:function(){
console.log(this.name)
}
}
person1.say(); //张三
person1.say.call(); //window
person1.say.call(person1); //张三
person1.say.call(person2); //李四
二.this的指向可以分为哪几种?
普通函数,对象的方法,构造函数,箭头函数,apply和call调用
具体见这里
分析代码
var name = 'window'
var person1 = {
name: 'person1',
show1: function () {
console.log(this.name)
},
show2: () => console.log(this.name),
show3: function () {
return function () {
console.log(this.name)
}
},
show4: function () {
return () => console.log(this.name)
}
}
var person2 = { name: 'person2' }
person1.show1() //person1
person1.show1.call(person2) //person2
person1.show2() //window
person1.show2.call(person2) //window
为什么第二个是window?
因为show2里是箭头函数,经过用call改变了它的this指向,但是箭头函数中的this没有意义,要到上一级作用域中找
person1.show3()() //window
person1.show3().call(person2) //person2
person1.show3.call(person2)() //window
person1.show4()() //person1
person1.show4().call(person2) //person1
person1.show4.call(person2)() //person2
这里show4是构造函数,但没有一个是window
为什么?
返回的是一个闭包,闭包的作用环境一起返回了
本文探讨了JavaScript中this关键字的多种指向情况及其变化方式,包括call、apply和bind等函数的应用,并通过实例展示了不同情况下this的具体指向。

929

被折叠的 条评论
为什么被折叠?



