js中this的指向的问题

143 阅读1分钟

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>