1.this在函数中的指向
1.1 作为对象的属性时,this指当前对象。
1.2 单纯就是个函数时,this指向window。
let obj = {
monicker: '张三',
showName () {
console.log(this) //obj
function showThis () {
console.log(this) //window
}
showThis()
}
}
obj.showName()
2.改变this指向
2.1通过定义常量来改变
let obj = {
monicker: '张三',
arr: ['js','css','html'],
showName () {
const self = this //把this存到self中然后传下去
let newArr = this.arr.map(function(value){
return `${self.monicker}---${value}`
})
console.log(newArr)
}
}
obj.showName()
2.2特殊函数中可以通过传入this改变当前函数中的this
let obj = {
monicker: '张三',
arr: ['js','css','html'],
showName () {
let newArr = this.arr.map(function(value){
return `${this.monicker}---${value}`
},this)
console.log(newArr)
}
}
obj.showName()
2.3使用箭头函数,箭头函数中的this就是上一级中的this
let obj = {
monicker: '张三',
arr: ['js','css','html'],
showName () {
let newArr = this.arr.map(value => `${this.monicker}---${value}`)
console.log(newArr) //输出结果一样
}
}
obj.showName()
2.4使用箭头函数时,当前this就会变成上一级中的this,如果又想要当前this又想要上一级中的this有两种办法。
2.4.1 普通函数配合常量
普通函数中this代表当前对象,常量代表指定的对象
let obj = {
name: '张三说',
bind () {
const rain = document.querySelector('button')
const self = this
rain.addEventListener('click',function(){
console.log(self.name+this.innerHTML)
})
}
}
obj.bind()
2.4.2 箭头函数配合event
箭头函数中this指向上一级,event指向当前事件对象
总之就是两头都要有
但是要注意使用箭头函数时如果上一级就是个普通函数,那么this就会是window
let obj = {
name: '张三说',
bind () {
const rain = document.querySelector('button')
rain.addEventListener('click',event => {
console.log(this.name+event.target.innerHTML)
})
}
}
obj.bind()
3.call改变this
不会改变原有的函数this,但会产生一个新的
function User (name) {
console.log(this)
console.log(name)
}
User() //window '张三'
let obj = {num: 1}
User.call(obj,'张三') //{num: 1} '张三'
4.apply
apply跟call的功能一样,只是第二个参数必须是数组的形式,系统会自动将数组中的元素分配给形参
function User (name,age,gender) {
console.log(this)
console.log(name+age+gender)
}
User()
let obj = {num: 1}
User.apply(obj,['张三',18,'男']) //{num: 1} 张三18男
5.bind函数
bind和call,apply差不多,只是不会立即执行,而是会返回一个新的函数,并且可以实现两次传参,但一旦在bind调用时就传参,后面调用新函数传的参数会被覆盖掉。
<button>今天在下雨</button>
<script>
document.querySelector('button').addEventListener('click', function (event) {
document.write(event.target.innerHTML+this.text)
}.bind({text: '落得好大啊'}))
</script>
5.1使用bind函数来完成随便变色
<script>
function Colors (elem) {
this.elem = elem
this.colors = ['#4a69bd', '#fa983a', '#3c6382', '#079992', '#f8c291', '#b8e994']
this.run = function () {
setInterval(function () {
let i = Math.floor(Math.random() * this.colors.length)
this.elem.style.backgroundColor = this.colors[i]
}.bind(this),1000)
}
}
let obj = new Colors(document.body)
obj.run()
</script>