(面试常见问题1) js中的this指向问题

JavaScript 重点 ——this指向问题

1.在全局作用域下,指向window对象

<script>
    console.log(this);  // window
</script>

2.在事件处理函数中,指向事件源的DOM对象

 <button>A</button>
 <script>
     let btn = document.querySelector('button')
     btn.addEventListener('click', function () {
         console.log(this);   // <button>A</button>
     })
</script>

3.箭头函数中,this指向箭头函数所在作用域的this指向

<script>
    console.log(this);      // window
    () => {
        console.log(this);  // window
    } 
</script>

4.普通函数,this指向函数调用者

function fun() {
    console.log(this)  // window
}
fun()      // 函数默认由window调用    
// fun() 相当于 window.fun() 

5.定时器是window对象中的一个函数.因为window调用了定时器,所以,定时器中的this指向window对象

<script>
    window.setTimeout(() => {
        console.log(this);  // window
    }, 1000);
    window.setInterval(() => {
        console.log(this);   // window
    }, 1000);
</script>

6. 1 构造函数中,this指向new 出来的内存空间

6.1.1 用构造函数创建实例对象的基本原理示意图!

/*
科普:
	new 构造函数()  指的是创建实例化对象
	new 关键字用于创建实例化对象,每使用一次new,就相当于在内存中开辟了一块新的内存空间.此时,构造函数中的this就指向刚刚开辟出来的新内存空间.
	
*/
<script>
    function dog(name, age) {
        this.name = name
        this.age = age
    }
    let erha = new dog('二哈', 5)
    console.log(erha);  // {age: 5 ,name: "二哈" }
    let erha2 = new dog('金毛', 7)
    console.log(erha2);  // {age: 7 ,name: "金毛" }
</script>

6.2 方法中的this指向调用者或者说是指向当前的实例化对象

<script>
    function dog(name, age) {
        this.name = name
        this.age = age
        this.sound = function () {
            console.log(this);       // {age: 5 ,name: "二哈" sound: f()}
            console.log("汪汪汪!");  // 汪汪汪!
        }
    }
    let erha = new dog('二哈', 5)
    erha.sound()   
</script>

7.自调用函数中,this指向window对象

<script>
    /*
    科普:
         自调用函数:即自己调用自己,无需调用,立刻执行.
    */
    
    // 方法一
    (function fun4() {
        console.log(this);  // window
    }());
    
	//方法二
    (function fun5() {
        console.log(this);  // window
    })()
</script>