函数（this指向）

ES5中函数的this指向

1.普通函数的this:this就是谁调用 this就指向谁 this是在调用的时候确定的

function f1(){
        console.log(111);
        console.log(this);
    }
    f1();
    window.f1();

2.对象里面的方法 它里面的this 指向当前这个对象

var obj = {
        a: "小熙",
        b: "老王",
        print: function () {
            console.log(1111);
            console.log(this);
        }
    }
    obj.print();

    var fn1 = obj.print;
    var fn2 = obj.print();

    fnw = function(){
        console.log(111);
        console.log(this);
    }
    window.fnw();//this指向window

    obj.f2 = f1;
    obj.f2();//this指向obj

3.定时器里面的this,如果没有特殊的指向 那么 setInterval和setTimeout里面的回调函数的this一定是指向window

function f1() {
        console.log(111);
        console.log(this);
        }
var obj = {
            a: "111",
            b: "222",
            print: function () {
                console.log(2222);
                console.log(this);
            }
        }
setTimeout(f1, 1000);
setTimeout(obj.print, 1000);
setTimeout(obj.print(), 1000); //这里运行打印出this是obj 和定时器没有任何关系 只是把obj.print()调用了一遍

4.在ES6里面 箭头函数的this指向 是继承自父级执行上下文中的this

箭头函数没有自己的this, 他的this是从父级继承而来的 箭头函数的this在定义的时候就已经确定了

var name = "我在window里面";
    var obj = {
        name: "我在obj里面的",
        fn: function () {
            console.log(this);
            var that = this;

            setTimeout(() => {
                console.log(this.name);//"我是obj里面的"
                console.log(that.name);//"我是obj里面的"
            }, 1000);
        }
    }
    obj.fn();

5.构造函数里面的this

function Student(name,age){
    this.name = name;
    this.age = age;
    console.log(this);

  }

(1)把构造函数当成普通函数调用

Student("张三",18);

(2)作为构造函数 this就指向new关键字创建的实例化对象

  var s = new Student("张三",16);
  console.log(s);
  console.log(s.name);//"张三"
  console.log(window.name);//""

(3)当做为构造函数时 返回值默认是new关键字创建的实例化对象 但是 如果手动添加了返回值 那么 如果是基本数据类型 就不会影响 如果是复杂数据类型 那么就会覆盖掉默认的返回值

 function Student(name, age){
    this.name = name;
    this.age = age;
    console.log(this);    
    return {
      name:"1111",
      age:111
    };
    return [12,13,15];
  }
  var s1 = new Student("丽丽",15);
  console.log(s1.age);

ES6中函数的this指向

在ES6里面 箭头函数的this指向 是继承自父级执行上下文中的this

​ 箭头函数没有自己的this, 他的this是从父级继承而来的 箭头函数的this在定义的时候就已经确定了

 var name = "我在window里面";
     var obj = {
      	name: "我是obj里面的",
        fn: function () {
        console.log(this);
		var that = this;
		setTimeout(() => {
            console.log(this.name); // "我是obj里面的" 
            console.log(that.name); // "我是obj里面的" 
		}, 1000)
 	}
}
		obj.fn();

  //把fn也换成箭头函数
        var name = "我在window里面";
        var obj = {
            name: "我是obj里面的",
            fn: () => {
                console.log(this);
                var that = this;
                setTimeout(() => {
                    console.log(this.name);  // "我在window里面"
                    console.log(that.name);  // "我在window里面" 
                }, 1000)
            }
        }
        obj.fn();

总结

普通函数 : this是在调用的时候确定 谁调用 this就指向谁

箭头函数 : this是在声明的时候就已经确定 而且不会改变 this是继承自父级执行上下文的this