函数 this 的指向

我们在运行函数时候，经常会用到this，下面我们来介绍一下 this 的指向

1，函数执行地（函数无论在哪里执行），首先看函数名前面是否有“.”，有的话，“.”前面是谁，添加this就是谁，没有的话，就是window

var person = {
    name: 'Jay Person',
    print: function() {
        return this.name;
    }
};

var name = person.print;
name.print() // this -> name

2，自执行函数中的this永远是window

(function() {
     console.log(this);  // this -> window
})();

3，给元素的某一个事件绑定方法，当事件触发的时候，执行对应的方法，方法中的this是当前的html元素

<button onclick="myFunction()">Click me</button>

function myFunction(){
     console.log(this);  // this -> button
}

4，在构造函数模式中，类中（函数体中）出现的this.xxx=xxx中的this是当前类的一个实例

function Obj (){
    this.area={  //  this -> obj
        width:'100px',
        height:'100px'
    }
}
var obj=new Obj;

5，在箭头函数中不绑定 this，箭头函数没有自己的 this关键字，如果箭头函数中使用 this， this关键字将指向箭头函数上下文中的 this

 let obj = {name:'xiaoxiao'}
 function fn () {
      console.log(this) // obj
      return () => {
        console.log(this) // obj
      }
    },
const  resFn = fn.call(obj) // 这直接返回箭头函数
resFn（）// 箭头函数的 this 指向 fn 里面的 this，即 obj

补充案例

var people= {
   age:20,
   say:()=>{
      console.log(this.age) // undefined
   }
}
people.say()

说明：箭头函数中没有this,this指向他定义的地方，但是他定义在 people 对象中，不是一个函数，所以他没有作用域，此时this指向于 window，但是window没有age这个属性，所以只能是undefined