js中this的指向

Posted 2020-11-21 天高任我飞

window是js中的全局对象，我们创建的变量实际上是给window添加属性
this的最终指向的是那个调用它的对象

1.全局作用域或者普通函数中this指向全局对象window

未设定全局值

<script>
    function foo(){
       var name=‘ruby‘;
       alert(this.name)  //undefined
    }
    foo();
    console.log(this);  //window
</script>
window中没name这个属性，因此找不到

设定管全局值

<script>
   var name=‘jerd‘;
    function foo(){
       var name=‘ruby‘;
       alert(this.name)  //jerd
    }
    foo();
    console.log(this);  //window
</script>

2.方法调用中谁调用this指向谁

1.对象方法调用

var person = {
    run: function () {
    console.log(this)  //指向person这个对象
    }
}
person.run()

<script>
    var name=‘jerd‘;
    var people= {
    user:"ruby",
    fn:function(){
        console.log(this.user); //this指people这个对象
    }
    };
    window.people.fn()  //ruby
</script>

<script>
    var people = {
    name:‘jerd‘,
    obj:{
        fn:function(){
            alert(this.name);
        }
    }
};
people.obj.fn(); //undefined
此时this指向对象b。b中无a属性，因此值为undefined
</script>

赋值情况

<script>
    var people = {
    name:‘jerd‘,
    obj:{
        fn:function(){
            alert(this); //this指向windonw
        }
    }
};
var obj1=people.obj.fn;
obj1();
</script>
this永远指向的是最后调用它的对象，函数fn是被对象obj1所引用，
但是在将fn赋值给变量obj1的时候并没有执行所以最终指向的是window

2.事件方法

var btn = document.querySelector("button")
btn.onclick = function () {
    console.log(this) // btn
}

3.在构造函数中this指向构造函数的实例

1.不使用new 指向window

 function Person(){
      console.log(this)//window
  }
  Person()

2.使用new 指向当前对象

function Person(){
      console.log(this)//people
  }
  var people = new Person()

<script>
    var name=‘jerd‘;
    function Foo(){
       this.name=‘ruby‘;
       this.func=function () {
           var name="zhao";
           alert(this.name)
       }
    }
    var obj= new Foo();
     obj.func()
</script>
#ruby

<script>
    var name=‘jerd‘;
    function Foo(){
       this.name=‘ruby‘;
       this.func=function () {
           console.log(this)  //Foo
           (function () {
               alert(this.name) //window
           })()
       }
    }
    var obj= new Foo();
     obj.func()
</script>