说一下 this 的指向

普通函数的this

作为函数在全局调用,this的指向是window

var name = '卡卡';
    function cat() {
      var name = '有鱼';
      console.log(this.name);//卡卡
      console.log(this);//window
    }
    cat();

作为对象中的某个方法被调用,this指向该对象

一层作用域链

    var name = '卡卡';
    var cat = {
      name: '有鱼',
      eat: function () {
        console.log(this.name); // 因为函数eat是由cat对象调用的，所以this指向的是cat本身，所以cat.name=有鱼；
        console.log(this);//{name: '有鱼', eat: ƒ}
      }
    }
    cat.eat();

多层作用域链时,this指向最近的

var name = '卡卡';
    var cat = {
      name: '有鱼',
      eat1: {
        name: '年年',
        eat2: function () {
          console.log(this.name);//年年
          console.log(this);//{name: '年年', eat2: ƒ}
        }
      }
    }
    cat.eat1.eat2();

构造函数的调用,this指向实例化新对象

 var name = '卡卡';
    function Cat(name) {
      this.name = name;
      console.log(this)
    }
    var cat1 = new Cat('有鱼');//Cat {name: '有鱼'}
    console.log(cat1.name);// 有鱼

匿名函数的调用,this指向全局对象

var name = '卡卡';
var cat = {
  name:'有鱼',
  eat:(function(){
    console.log(this.name);//卡卡
  })()
}
cat.eat;

箭头函数的this

全局函数下

  const global = () => {
      console.log(this);//Window
    }
    global();

对象方法中

定义箭头函数的作用域的this指向谁,箭头函数的this就指向谁

    const Person = {
      realname: '张三',
      age: 19,
      say: () => {
        console.log(this);//Window 
      }
    }
    Person.say();//window

构造函数中

指向当前实例,就是新建对象本身,箭头函数this一旦定义就不能改变

    function Person(realname, age) {
      this.realname = realname;
      this.age = age;
      this.say = () => {
        console.log(this);
      }
      this.say1 = function () {
        console.log(this);
      }
    }
    const P1 = new Person('张三', 19);
    const P2 = new Person('李四', 20);
    P1.say();  //Person {realname: "张三", age: 19, say: ƒ, say1: ƒ}
    P2.say();  //Person {realname: "李四", age: 20, say: ƒ, say1: ƒ}
    P1.say.call(P2);//Person {realname: "张三", age: 19, say: ƒ, say1: ƒ}
    P1.say1.call(P2);//Person {realname: "李四", age: 20, say: ƒ, say1: ƒ}