this指向的问题
js中this的指向是不确定的,只有根据this所在的位置才能判断出它到底指向谁。
1、全局下的this
全局调用的this分为严格模式(需要在顶端第一句打 "use strict" 才能开启)和普通模式(也就是平常的时候)。
<script>
//普通模式下
let num = 1;
function fn1() {
console.log(this.num)
};
fn1(); //1
//严格模式下
let num = 1;
function fn1() {
'use strict'
console.log(this.num)
};
fn1(); //undefined
</script>
在普通模式下,全局调用的this指向window,在严格模式中,禁止this指向window所以为undefined。
2、对象中的this
2、1 在对象中this中分为普通函数和箭头函数
2、1.1 普通函数:在普通函数调用this中,this指向他的直接调用者,也就是这里的obj
<script>
let name = 'laogou';
const obj = {
name: 'maliao',
fn() {
console.log(this.name)
}
}
obj.fn() //maliao
</script>
2、1.2 箭头函数调用:箭头函数的this指向它定义的地方,不是obj而是window,箭头函数的this是根据外层(函数或者全局)作用域来决定的。
<script>
let name = 'laogou';
const obj = {
name: 'maliao',
fn: () => {
console.log(this.name)
}
}
obj.fn() //laogou
</script>
3、构造函数中的this
<script>
function Person(name) {
this.name = name
}
let p1 = new Person('laogou')
console.log(p1.name); //laogou
</script>
在构造函数中,this经过new的调用发生了改变,在使用new调用时:
1.new会在内存中新创建一个空对象,且实例化
2.new会让this指向这个新对象
3.new给这个新对象复制属性和方法
4.return这个新对象
4、call,apply调用的this
call和apply函数可以改变普通函数的this指向,但是不能改变箭头函数的this指向。
<script>
let obj1 = {
name: "laogou",
fn() {
console.log(this.name)
}
}
let obj2 = {
name: "maliao",
fn() {
console.log(this.name)
}
}
obj1.fn.call(obj2) //maliao
</script>