js中this的指向

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>