js this的指向

		/*
		funtion函数 谁触发指向谁
        0 全局 this===window
        1 看一下函数return 是否为数组 函数 对象 那么this指向return值，引用数据类型改变this的指向
        2 函数触发是不是call.apply,bind 如果是,this===参数
        3 看是不是 new触发的 是 this===new 实例的对象
        4 普通对象调用 this===触发函数的对象
        */
	

情况1:普通函数的调用方式触发 此时 this 指向 window

function zhuzhu(){
          console.log(this);//Window
      }
      window.zhuzhu();

情况2:对象的方法调用 this 指向 该方法所属的对象

let obj = {
         zhuzhu: function () {
             console.log(this);//{zhuzhu: ƒ}
         }
     }
     obj.zhuzhu()

情况3:new关键字触发 this指向这个新的对象 执行构造函数 目的：给这个新对象加属性和方法

 function zhuzhu() { 
        console.log(this);//zhuzhu {}
    }
    new zhuzhu();

情况4:call apply binde 触发函数，call()、apply()、bind() 都是用来重定义 this 这个对象的 bind 方法后面多了个 () 由此得出结论，bind 返回的是一个新的函数，你必须调用它才会被执行

function zhuzhu(a, b) {
        console.log('函数执行');
        console.log(a);
        console.log(b);
        console.log(this);
    }

//1 call 触发函数 并改变fuction函数中this，this为参数一  参数二，三，...给被触发的函数传入实参。
     window.zhuzhu(1,2)//情况1 window
     zhuzhu.call({},3,4) //指向空对象obj
     zhuzhu.call([],4,5)//指向空数组[]
    zhuzhu.call(function(){
         console.log('猪猪咩');
     },10,20)/*指向 ƒ (){
         console.log('猪猪咩');
     } */

//2 apply  参数一 改变触发函数方法题中的this  最多只能有两个参数——新this对象和一个数组 argArray 只有一个参数，也要写进数组里面 this为参数一 参数二 数组 给触发函数传递n个实参
    zhuzhu.apply({},[3,4]) //指向空对象obj
    zhuzhu.apply([],[3,4])//指向空数组[]
    zhuzhu.apply(function(){
        console.log('猪猪咩');
    },[10,20]) 
	
 // 3 bind() 作用:更改触发函数中this的指向 函数不能自动执行，需要再加小括号
    console.log('----------');
    let bar = zhuzhu.bind()//拷贝了zhuzhu函数中的代码赋值给新创建的变量
    console.log(bar);//返回一个新的函数，函数与foo一样功能的函数即函数相同功能相同
    bar()
    zhuzhu()
    console.log('----------');
    zhuzhu.bind([])(13,13)//指向空数组[]
    zhuzhu.bind({})(14,14)//指向空对象{}
    zhuzhu.bind(function(){})(15,15)//指向函数

情况5:构造函数调用， 此时 this 指向 实例对象

function Zhuzhu(age,name){
        this.name = name;
        this.age = age;
        console.log(this);//Zhuzhu {name: 18, age: "猪猪"}
    }
    let p1 = new Zhuzhu('猪猪',18); 

情况6:箭头函数

// 没有this  没有argument
// 剪头函数的this是继承父执行上下文里面的this
// 关键看: 箭头函数写在哪
// 全局  this === window
// function 函数方法中 this===function中this

 var obj = {
        name: "猪猪",
        zhuzhu1: function () {
            console.log(this);
        },
        zhuzhu2: () => {
            console.log(this);
        },
        obj2: {
            zhuzhu3: () => {
                console.log(this);
            }
        }
    }

    obj.zhuzhu1() //对象调用 指向对象obj
    obj.zhuzhu2() //对象是不能形成独立的作用域的,指向对象的上一层 window
    obj.obj2.zhuzhu3() //对象是不能形成独立的作用域的,this指向上上层window

情况7:通过事件绑定的方法， 此时 this 指向 绑定事件的对象

 var div = document.querySelector('#app')
    div.onclick = function () {
        console.log(this);
    }

情况8:定时器函数， 此时 this 指向 window

 setTimeout(function(){
        console.log(this);
    },1000)

情况9:函数有return值时this指向

function zhuzhu() {
        this.name = '猪猪';
        //基本数据类型不改变this的指向
        // return 123;//猪猪
        // return 1; // 猪猪
        // return undefined; // 猪猪
        // return null; // 猪猪

        // 引用数据类型改变this的指向
        // return []//undefined
        // return {}; //undefined
        return function () {}; //空值?

    }
    let baobao = new zhuzhu();
    console.log(baobao)
    console.log(baobao.name)