前端JS的this指向问题

前言：this指向谁取决于函数执行上下文，谁调用函数this指向谁，箭头函数没有自己的this。

一、全局作用域下的this指向

全局对象：浏览器中是window  Node.js中是Global

全局作用域中this永远指向全局对象。

二、函数作用域下的this指向

1.严格模式下

        .ES5的严格模式下函数中的this不会指向window，this为undefined

func(){
    use strict
    console.log(this)  //undefined
}

2.普通函数中

        普通函数functio(){}作用域的this指向window 相当于 函数中的this.propertyName调用的是全局中的变量window.propertyName。

3.当函数为对象的一个属性

        当一个函数为某对象的属性时 该函数内部的this指向这个对象本身

obj={
    name:'test',
    func:()=>{
    console.log(this.name)  //'test'
    }}

4.使用new新建对象

        使用new新建对象时this指向新建的对象，箭头函数不能配合new使用。

5.箭头函数中的this(箭头函数本身没有this都是继承而来)

箭头函数()=>{}作用域中的this指向上一层的this

const func =  ()=>{
        console.log(this) //指向window
}

watch：{
   propertyName1：{
    handler：nv=>{
        console.log(this)//this为undefined
        }
    },
    propertyName2:{
     handler:function(nv){
        console.log(this) //this指向window
        }
    }
}

三、改变 this的指向

1.bind

        bind为原型的一个方法 function.property.bind() ，bind是新建一个函数将this指向调用bind时传的参数并不会改变原函数的this指向。bind底层是通过apply实现的。

2.aplly&&call

        apply和call的作用相同只不过是参数格式不同 apply的参数 第一个是要将this绑定给谁、第二个参数是传参数且格式只能为数组。

        call的参数第一个是和apply一样指定绑定对象，从第二个开始可以有多个参数且顺序可以与绑定函数顺序不同

        apply和call在第一个参数为null时自动默认绑定全局对象

        apply可以合并两个数组和求取数组最大值最小值

Array.prototype.push.apply(arr1,arr2)
//相当于将this绑定到arr1 是arr1调用push方法将arr2 push到arr1中
//求一个数组中的最大最小值也是同理  
var max=Math.max.apply(null,array)
var min=Math.min.apply(null,array)