this 的指向问题1.不管函数或者方法是如何声明的,要看这个函数或者方法最终是谁调用2.谁最终调用这个函数或方法,那么这个函数或者方法的this就指向谁
1.普通函数中的this,指向window
在全局作用域内定义的变量和函数其实都是window的属性和方法 window是浏览器的顶级对象,在使用的时候可以忽略
function foo(){console.log(1323);console.log(this);}foo();window.foo()
2.事件处理程序中的this,指向正在触发事件的事件源,但是也有例外
var btn =document.getElementById('btn')btn.onclice=function(){console.log(this) //这个this 就是指向btn(当前正在执行事件处理程序的事件源)}btn.addEventListener('click',function(){console.log(this);//指代当前正在执行事件处理程序的事件源})// 例外btn.attachEvent("onclick",function(){console.log(this) //指代 window})
3.构造函数当中 this始终指向创建出来的实例,构造函数的原型对象中的this和构造函数的this一样
function Stu(name,age,sex){this.name =name;this.age =age;this.sex=sex;}Stu.prototype.say=function(){console.log(this.name) //都是指向这个zs这个实例对象}var zs =new Stu("张三",15,"男")//拓展//普通实例对象中的this指向对象本省,同时他没有prototype的属性var obj={name:'jack',age:18,sayHi:function(){console.log(this.name)}}obj.prototype.sayHello=function(){ //boj这个实例对象没有prototypeconsole.log(this.name)}console.dir(obj)
4.定时器的指向是指向window
setTimeout(function(){console.log(this)},1000)setInterval(function(){console.log(123,this)},1000)setTimeout(()=>{console.log(this)},1000) //也是指向window
拓展
function Stu(name,age){this.name =name;this.age =age;}Stu.prototype.sayHi=function(){console.log(this.name)}Stu.prototype.sayHello =function(){console.log(this.age)}//区别:上面和下面等待区别就是上面有constructor,下面没有constructor,相当于重新赋值一个普通实例对象Stu.prototype={sayHi:funtion(){console.log(this.name)},sayHello:function(){console.log(this.age)}}var zs= new Stu('张三',16)
案例一:
function foo(){console.log(this);//指向windowconsole.log(this.name)}var name = '张三';var obj ={name:'前端工程师',sayHi:function(){console.log(this);console.log(this.name);}}obj.sayHi();//此时这个this就是指向了 obj 这个对象foo=obj.sayHi;foo();//这是这里面的this指向window
