一、函数调用方式的不同,决定了this 的指向不同
1. 普通函数 this 指向 window
调用函数的时候一般直接写fun( ),其实隐藏了前面的window,全写应该是window.fun( )。
function fun() {
console.log(this) // Window
}
fun()
2. 对象的方法调用时,this指向该对象
let obj = {
name: 'xxx',
addZero: function () {
console.log(this) // {name: 'xxx', addZero: ƒ}
}
}
obj.addZero()
3. 构造函数 this 指向实例对象,原型对象里面的this 指向的也是该实例对象
function Star(uname, age) {
this.name = uname;
this.age = age;
this.dance = function () {
console.log('Hip hop dance')
console.log(this) // Star {name: 'jj', age: 18, dance: ƒ}
}
}
Star.prototype.sing = function () {
console.log('美人鱼')
console.log(this) // Star {name: 'jj', age: 18, dance: ƒ}
}
let jj = new Star('jj', 18)
jj.dance()
jj.sing()
4. 绑定事件函数 this 指向的是该事件的绑定者
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
button {
width: 50px;
height: 30px;
}
</style>
</head>
<body>
<button>点击</button>
<script>
let btn = document.querySelector('button');
btn.onclick = function () {
console.log(this) // <button>点击</button>
}
</script>
</body>
5. 定时器函数 this 指向window
setTimeout(function () {
console.log(this) // Window
}, 1000)
6. 立即执行函数 this指向window
(function () {
console.log(this) // Window
})()
二、改变函数内this指向的方法: call() apply() bind()
1. call() 调用函数并改变函数内部this指向
let obj = {
name: 'xxx'
}
function fun() {
console.log(this) // {name: 'xxx'}
}
fun.call(obj)
call 常用于实现继承
function Father(surname, money) {
this.surname = surname;
this.money = money;
}
function Son(surname, money) {
Father.call(this, surname, money)
}
let son = new Son('顾', '3000贯')
console.log(son) // Son {surname: '顾', money: '3000贯'}
2. apply() 调用函数并改变函数内部this指向
let obj = {
name: '顾盼生辉'
}
function fun(...arr) {
console.log(this) // {name: '顾盼生辉'}
console.log(arr)
}
fun.apply(obj, ['倾盖如故', '白头如新'])
apply 常用于跟数组有关的数学计算,比如借助于数学对象实现数组最大值最小值
let arr = [1, 22, 333]
let max = Math.max.apply(Math, arr)
let min = Math.min.apply(Math, arr)
console.log(min, max) // 1 333
3. bind() 不会调用原来的函数,可以改变原来函数内部的this 指向;创建一个新的函数,返回的是原函数改变this之后产生的新函数。
let obj = {
name: 'xxx'
}
function fun(a, b) {
console.log(this) // {name: 'xxx'}
console.log(a + b) // 3
}
let newFun = fun.bind(obj, 1, 2)
newFun()
不想立即调用函数,但是又想改变这个函数内部的this指向
let btn = document.querySelector('button')
btn.onclick = function () {
this.disabled = true
setTimeout(function () {
this.disabled = false
console.log(this) // 此时定时器的this指向由window 变成了btn
}.bind(this), 1000)
}
相同点:
都可以改变函数内部的this指向
不同点:
(1) call 和 apply 会调用函数,bind 不会调用函数。
(2) call 和 apply 传递的参数不一样,call 传递参数以aru1,aru2...形式;apply 必须是数组形式。