call、apply、bind方法的由来

在js中所有的函数都是Function的实例，而且对于Function来说，它的原型即Function.prototype中含有很多内容，其中call、apply、和bind方法就是Function原型中的方法，根据原型链规则，所有函数都可以使用原型中的属性和方法，所以所有的函数都可以使用call、apply、和bind。

call、apply、bind方法的作用/定义

都是用来改变this的指向。

call、apply：调用一个对象的一个方法，用另一个对象替换当前对象。例如：B.apply(A,arguments);即A对象应用B对象的方法。

function getInfo(age){
	return '我的姓名是'+this.name+'我的年龄'+age
}

上面代码中，如果我以getInfo(18)来直接调用，返回结果=>我的姓名是 我的年龄18
因为函数在寻找this.name时并没有找到，所以this.name为undefined
接下来我们定义一个对象来调用函数：

function getInfo(age){
	return '我的姓名是'+this.name+'我的年龄'+age
}

let person = {
	name:'xiaoming',
	sex:'男'
}
//通过person对象调用getInfo方法
getInfo.call(person,18)
getInfo.apply(person,[18])

getInfo.bind(person,18)() //与前两者不同，bind返回的是一个函数体，因此需要()进行调用
var fbind=getInfo.bind(person,18);//bind()不能调用函数
fbind();//此时才调用函数
//  上述三种不同的写法，返回值相同
	//	return: 我的姓名是xiaoming,我的年龄18

getInfo("男");//姓名为undefined,性别为男
person.getInfo("男");//报错
//person并没有getInfo方法。

bind 和 call/apply 有一个很重要的区别，一个函数被 call/apply 的时候，会立即执行函数，但是 bind 会创建一个新函数，不会立即执行。

call、apply、bind方法的应用场景

//数组之间追加
var array1 = [12 , "foo" , {name "Joe"} , -2458]; 
var array2 = ["Doe" , 555 , 100]; 
Array.prototype.push.apply(array1, array2); 
/* array1 值为  [12 , "foo" , {name "Joe"} , -2458 , "Doe" , 555 , 100] */

//获取数组中的最大值和最小值
var  numbers = [5, 458 , 120 , -215 ]; 
var maxInNumbers = Math.max.apply(Math, numbers),   //458
    maxInNumbers = Math.max.call(Math,5, 458 , 120 , -215); //458

//利用call()判断数据类型
console.log(Object.prototype.toString.call("qq"))            // [Object String] 返回值都是字符串类型
console.log(Object.prototype.toString.call(12))              // [object Number]
console.log(Object.prototype.toString.call(false))           // [object Boolean]
console.log(Object.prototype.toString.call(undefined))       // [object Undefined]
console.log(Object.prototype.toString.call(null))            // [object Null]
console.log(Object.prototype.toString.call(function(){}))    // [object Function]
console.log(Object.prototype.toString.call([]))              // [object Array]
console.log(Object.prototype.toString.call({}))              // [object Object]

this对象的理解

• this ，函数执行的上下文，总是指向函数的直接调用者（而非间接调用者），可以通过 apply ， call ， bind 改变 this 的指向。

var x =3;
function test(){
　　alert(this.x);//this指window
}
test();//3 ，this指全局对象

var o = {
  x:1,
  m:test 
};
o.m(); // 1 //--》this指上级对象

• 如果有 new 关键字，this 指向 new 出来的那个对象。

function test(){
　　　　console.log(this);
　　}
　　var o = new test();
       test();
//可以看出o代表的不是全局对象

• 在事件中，this 指向触发这个事件的对象，特殊的是，IE 中的 attachEvent 中的 this 总是指向全局对象 window 。
• 对于匿名函数或者直接调用的函数来说，this 指向全局上下文（浏览器为 window ，NodeJS 为 global），剩下的函数调用，那就是谁调用它， this 就指向谁。
• 对于 es6 的箭头函数，箭头函数的指向取决于该箭头函数声明的位置，在哪里声明， this 就指向哪里。

原文链接：https://blog.csdn.net/hanyanshuo/article/details/110222695?utm_source=app&app_version=4.13.0

https://blog.csdn.net/yaojxing/article/details/71942496?utm_source=app&app_version=4.13.0

https://www.ruanyifeng.com/blog/2018/06/javascript-this.html //js中this原理