<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>函数--call()函数、apply()函数、bind()函数的使用与区别</title>
</head>
<body>
<script>
/*
javascript函数--call()函数、apply()函数、bind()函数的使用与区别:
在js中，每个函数都包含两个非继承而来的函数apply（）和call（），
这两个函数作用都是一样的，都是为了改变函数运行时的上下文而存在的，
实际就是改变函数内部的this指向。
而bin（）函数也可以达到这个目的，但是在处理上与另外两个有一定区别。
*/
/*
1.call（）
2.apply（）
3.bind（）
4.三者比较
5.巧妙用法
*/
// 1.call（）
/*
call函数调用一个函数时，会将该函数的执行对象上下文改变为另一个对象。
function.call（thisArg，arg1，arg2，...）
thisArg
可选的。在 function 函数运行时使用的 this 值。
请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，
则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
arg1, arg2, ...
指定的参数列表。
返回值：使用调用者提供的 this 值和参数调用该函数的返回值。
若该方法没有返回值，则返回 undefined。
*/
//1.无arg1
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates",
}
person.fullName.call(person1); // 将返回 "Bill Gates"
//2.有arg1
function add(x,y){
return x+y;
}
//通过call（）函数进行add（）函数调用
function myAddCall(x,y){
//调用add（）函数的call（）函数
return add.call(this,x,y);
}
console.log(myAddCall(10,20));//输出”30“
//3.有arg1
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"Bill",
lastName: "Gates"
}
//调用call，this转到person1
console.log(person.fullName.call(person1, "Seattle", "USA"));//Bill Gates,Seattle,USA
// 2.apply（）
/*
apply（）函数的作用域与call（）函数是一样的，只是在传参时有所不同。
function.apply(thisArg,[argsArray])
thisArg
必选的。在 func 函数运行时使用的 this 值。
请注意，this可能不是该方法看到的实际值：如果这个函数处于非严格模式下，
则指定为 null 或 undefined 时会自动替换为指向全局对象，原始值会被包装。
argsArray
可选的。一个数组或者类数组对象，其中的数组元素将作为单独的参数传给 func 函数。
如果该参数的值为 null 或 undefined，则表示不需要传入任何参数。从ECMAScript 5 开始可以使用类数组对象。
返回值：调用有指定this值和参数的函数的结果。
*/
//1.无arg1
var person = {
fullName: function() {
return this.firstName + " " + this.lastName;
}
}
var person1 = {
firstName: "Bill",
lastName: "Gates",
}
person.fullName.apply(person1); // 将返回 "Bill Gates"
//2.有arg1
var person = {
fullName: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var person1 = {
firstName:"John",
lastName: "Doe"
}
console.log(person.fullName.apply(person1, ["Oslo", "Norway"]));//John Doe,Oslo,Norway
// 3.bind（）
/*
bind（）函数创建一个新的函数，在调用时设置this关键字为提供的值，
在执行新函数时，将给定的参数列表作为原函数的参数序列，从前往后匹配。
bind() 方法创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，
而其余参数将作为新函数的参数，供调用时使用。
function.bind(thisArg[, arg1[, arg2[, ...]]])
thisArg
调用绑定函数时作为 this 参数传递给目标函数的值。
如果使用new运算符构造绑定函数，则忽略该值。
当使用 bind 在 setTimeout 中创建一个函数（作为回调提供）时，作为 thisArg 传递的任何原始值都将转换为 object。
如果 bind 函数的参数列表为空，或者thisArg是null或undefined，执行作用域的 this 将被视为新函数的 thisArg。
arg1, arg2, ...
当目标函数被调用时，被预置入绑定函数的参数列表中的参数。
返回值：返回一个原函数的拷贝，并拥有指定的 this 值和初始参数。
*/
//无arg1
const module = {
x: 42,
getX: function() {
return this.x;
}
};
const unboundGetX = module.getX;
console.log(unboundGetX()); // undefined-----全局无x
const boundGetX = unboundGetX.bind(module);
console.log(boundGetX());//42
//有arg1
var person1 = {
fullName1: function(city, country) {
return this.firstName + " " + this.lastName + "," + city + "," + country;
}
}
var fullName11=person1.fullName1;
console.log(fullName11( "Seattle", "USA"));//undefined undefined,Seattle,USA
function aa(x,y){
return fullName11.bind(fullName11,x, y);
}
console.log(aa( "Seattle", "USA")());//undefined undefined,Seattle,USA
// 4.三者比较
/*
相同之处：
它们在功能上是没有区别的，都是改变this的指向（第一个参数都是this的指向对象），它们的区别主要是在于方法的实现形式和参数传递上的不同。
不同之处：
（1）call() 和 apply() 会立即执行，而 bind() 不会立即执行，它返回一个函数。
（2）call() 期望所有参数都单独传递，参数之间用逗号分隔，而 apply() 的参数都必须放在一个数组里面传进去。
（3）bind() 除了返回的是一个函数以外，它的参数和call() 一样。
*/
// 5.巧妙用法
//5.1求数组中的最大项和最小项
/*
数组本身没有max（）和min（）函数，无法直接获取到最大最小值，但是Math却有
*/
var arr=[3,5,7,2,9,11];
//求数组最大值
console.log(Math.max.apply(null,arr));
//求数组最小值
console.log(Math.min.apply(null,arr));
</script>
</body>
</html>