this指向问题与apply、call、bind的区别

一、this的指向

要理解函数更改了this指向，就需要了解this的指向：

内部函数的this指向obj

var name="张三";
var age=18;
var obj={
    name:'李四',
    objage:this.age,  
    myfun1:function(){
        console.log(this.name+''+this.age+''+this.objage)
    }
}
obj.myfun1()//李四undefined18

全局声明的函数this指向window

var name="张三";
function myfun2(){
    console.log(this.name)
}
myfun2()//张三

重定义this指向：

var obj1={
    name:'王五',
    myfun3:function(){
        console.log(this.name);
    }
}
var obj2={
     name:'赵六'
}
obj1.myfun3.call(obj2)//赵六
obj1.myfun3.apply(obj2)//赵六

然后我们来用一张图总结一下：

二、apply、call、bind的区别

JavaScript中每个function对象都有一个call()方法和一个apply()方法

语法：

apply()：function.apply(this,[arg1,arg2,…])

最多两个参数：this、数组(一个对象也数组)

call()：function.call(this,arg1,arg2…)

多个参数：this、参数列表

都是可以用来代替另一个对象调用一个方法，将函数的对象上下文从初始的上下文改变为由thisObj指定的新的对象。
bind()的语法和call()相似，区别在于bind方法返回值是函数以及bind接收参数列表的使用。

bind返回对应函数，之后便于调用；apply、call是立即调用。
在ES6的箭头函数下，call、apply会失效

主要应用场景

1、求数组中的最大和最小值

var arr=[1,2,31,30]
var max=Math.max.apply(null,arr)//31
var min=Math.min.apply(null,arr)//1

2、将类数组转为数组

var trueArr=Array.prototype.slice.call(arr)

3、数组追加

var arr1=[1,2,3]
var arr2=[4,5,6]
var total=[].push.apply(arr1,arr2);//6

4、判断变量类型

function isArry(obj){
    return Object.prototype.toString.call(obj)=='[Object Array]'
}

5、做继承

function Person(name,age){
    this.name=name
    this.age=age
    this.sayAge=function(){
        console.log(this.age)
    }
}
function Female(){
    Person.apply(this,arguments)
}
var female=new Female('张三','20')

6、使用log代理console.log

function log(){
    console.log.apply(console.arguments)
}