ES5和ES6中的this指向

1,379 阅读1分钟

ES5

  1.在普通函数中的this总是代表他的直接调用者,默认情况下指向windos
  2.在严格模式下,没有直接调用者的函数中的this是undefined使用  
  3.call,apply,bind,this指向的是绑定的对象;

ES6

箭头函数没有自己的this,他的this是继承来的,默认指向在定义他时所在的对象,

ES5中this指向:

  1.在全局的调用函数this指向windos
  
      function fn(){
           console.log(this)
       }
       
 2.对象函数调用,那个函数调用this就指向那个对象
 
      var odiv = document.getElementById('div');
        odiv.onclick = function(){
            console.log(this)
        }
        
 3.定时器中this指向全局
 
     var a = 10;
        var fn = setInterval(function(){
            var a = 20;
            console.log(this.a)
            clearInterval(fn)
        },3000)
        
 4.addEventListener this的指向
    addEventListener this指向事件前的dom对象在IE11下attachEvent this 指向window
    
    <div id="btn">
       点击我
    </div>
<script>
     btn.addEventListener('click',function(){
          console.log(this)    //<div>点击我</div>
    })
   IE下
   IE11不兼容
    btn.attachEvent('onclick',function(){
         alert(this)     //window
    })
</script>
  5.构造函数下this指向
      构造函数中的this指向构造出来的新对象
      
    function aa(){
        this.name = 'yuangege',
        this.age = '18',
        this.sayName = function(){
            console.log(this.name)
        }
    }
    var aaa = new aa();
    aaa.sayName();
6.箭头函数this指向
    在fn1中箭头函数默认指向为window而fn2是在data对象中创建的this指向
    data对象,所以fn2中的this指向对象
    
    const fn1 = () =>{
        console.log(this)
    }

    const data = {
        name:'yuangege',
        fn: function (){
            console.log(this)
            const fn2 = () =>{
                console.log(this.name)
            }
            fn2();
        }
    }

    data.fn();

class

1.Es6class类和模块的内部默认为严格模式必须使用new操作符来调用,否则会报错。
2.constructor是类的默认方法,如果没写他会默认添加一个constructor方法返回默认值是实例的对象,也就是this类也可以自执行。
3.class类不存在变量提升