想要了解this的指向吗?简单聊聊函数内this的六种指向

• 初入前端的小伙伴肯定对this的指向还不太了解或者比较模糊
  • 所以给大家介绍一下关于:函数内部的六种this指向问题
    • 1.在普通函数内this指向的是------window
    • 2.在构造函数内this指向的是------实例对象
    • 3.在函数内的对象this指的是------该方法的调用者
    • 4.在事件绑定函数中this是指------绑定该事件的对象(元素)
    • 5.在定时器中this它指向的是------window
    • 6.在立即执行函数中this是指------window

---

// 1.普通函数
    function fn (){
        console.log(this);
        // 毫无疑问这个this指向的是window
    }
    fn()

---

// 2.构造函数
    function Star(uname) {
        this.uname = uname
        console.log(this);
    }
    var zzh = new Star('渣渣辉')
    //在这个构造函数中this指的是 Star{} 这个实例对象
	Star {uname: "渣渣辉"}
	//下面两个属性 都是Star这个对象中的属性
	//这个uname是传参自定义的
	uname: "渣渣辉"
	//至于这个__proto__  这个就后面说 到时候出一个原型链篇  先看的可以关注点赞(#^.^#)
	__proto__: Object

---

class Star {
        constructor(uname){
            this.uname = uname
        }
        speak(content){
        	// 注意看这里的this.uname  要是谁调用的这个方法,那么这个this.uname就会指向谁
            console.log(this.uname + '-说-' + content);;
        }
    }
    var zzh = new Star('渣渣辉')  // 这是渣渣辉
 	var zjl = new Star('周杰伦')  // 这是周杰伦
 	//下面两个代码都会在控制台中打印出来
 	//按顺序先是渣渣辉调用的所以是先打印  渣渣辉-说-是兄弟就来砍我  
 	//而第二个打印的就应该是周杰伦说的   周杰伦-说-我会唱:稻香
    zzh.speak('是兄弟就来砍我')
    zjl.speak('我会唱:稻香')

---

//4.事件绑定函数
	//在body中创建一个div  然后获取到div元素
    var div = document.querySelector('div')
    //给div添加点击事件,点击后把  this  打印到控制台
    div.onclick = function(){
        console.log(this);
        // 这边打印的是<div></div>
        // 所以是谁绑定的事件  那么this就是谁
    }

---

//5.定时器
    setTimeout(function(){
        console.log(this + 111);
    },1000)

    setInterval(function(){
        console.log(this + 222);
    },1500)
    //两个定时器 打印出来的都是 window  (严谨点是  object window   '万物皆对象' )

---

//6.立即执行函数
	(function () {
        console.log(this);
        //这里的this指向的也是window  和普通函数一样
    })()