前端this指针

一、前端this

1. 普通函数的调用指向全局对象

var x = 5
// 1. 普通函数的调用指向全局对象
function test(){
    var x = 1
    console.log(this.x)
}

test()   // 5
window.test() // 5

console.log('--------------------------')

2. 作为对象方法调用，this指向上级对象

 var x =5;

 // 2. 作为对象方法调用，this指向上级对象
 function test2(){
     console.log(this.x)
 }

 var obj = {}
 obj.x = 2
 obj.f = test2
 obj.f() // 2

 obj = {
     x :2,
     f() {
         var that = this;

         function demo (){
             // demo不是方法里面的方法，所以this指向window
             // 具体：this.x 相当于 window.obj.x
             console.log(this.x) // 5
             console.log(that.x) // 2
         }

         demo()
     }
 }

 obj.f()
 // 方法里面的方法指向window
 // 看上以及块是谁，如果是一个对象那就是对象，如果是方法，你就不知道上一级块开辟的空间在哪
 // 这是可以把  对象.方法当成整体  window调用他们

 console.log('--------------------------')

3. 作为构造函数 this指代new 出来的对象

 // 3. 作为构造函数 this指代new 出来的对象
 function test3(){
      this.x =3
      this.y =5
  }

  var myObj = new test3()
  // 按照常理来说会指向window
  // 因为window.myobj.x
  // 但这里时指向new出来的对象
  console.log(myObj.x) // 3

  function test4(){
      this.my = 5
  }

  var myObj2 = new test4()
  console.log(window.myObj2.my) // s5
  console.log('--------------------------')

4. apply call bind 调用指代其绑定的镀锡 第一个参数，第一个参数不写默认为window

// 4. apply call bind 调用指代其绑定的镀锡 第一个参数，第一个参数不写默认为window
 var o = 66
 function func(){
     console.log(this.o)
 }

 var obj3 = {}
 obj3.o = 6
 obj3.f = func

 obj3.f()  // 6
 obj3.f.apply()  // 66   指向window
 obj3.f.apply(window)  // 66  指向window
 obj3.f.apply(obj3)  // 6  指向obj3


 // apply call bind
 // 1. apply    p1: this指向   p2: [name,age]   调用：立即调用
 // 1. call    p1: this指向   p2: 之后的参数，需要枚举出来 name,age   调用：立即调用
 // 1. bind    p1: this指向   p2: 之后的参数，需要枚举出来   调用：手动调用

 // 类
 function CLassName() {
     // 属性
     // 方法
 }