apply && call && bind三者的区别和联系

apply && call && bind三者的区别

apply

• 只有两个参数 - 第一个参数 ：设置函数内部this的指向;第二个参数：是一个数组
• 使用的方式

function fn(x, y) {
      console.log(this) // {name: "ls"}
      console.log(x + y) // 3
    }
    var obj = {
      name: 'ls'
    }
    fn.apply(obj, [1, 2]) //结果如上面注释

• 可以看出，它的作用是改变函数中的this，并调用函数
• 实战–打印一个数组中的最大值

var arr = [333,22,55,14,55,0,22.77,21.77]
var maxNumber = Math.max.apply(null,arr)
console.log(maxNumber) //333

bind

• 作用

bind()方法创建一个新的函数，在调用时设置this关键字为提供的值。并在调用新函数时，将给定参数列表作为原函数的参数序列的前若干项。

• 语法

function.bind(thisArg[, arg1[, arg2[, …]]])

• 返回值

返回一个原函数的拷贝，并拥有指定的this值和初始参数。

• 通俗来讲：bind()方法主要改变this的指向，不会调用函数，而是把函数复制一份。第一个参数 设置函数内部this的指向，其它参数，对应函数的参数

function fn1(x,y){
    	console.log(this) // obj1
    	console.log(x+y) // 2
    }
    var obj1 = {
    	name:'bind'
    }
    var f1 = fn1.bind(obj1,1,1) //本身不会调用函数
    f1() //结果看上面注释

call

注意：该方法的作用和 apply() 方法类似，只有一个区别，就是call()方法接受的是若干个参数的列表，而apply()方法接受的是一个包含多个参数的数组。
fun.call(thisArg, arg1, arg2, …)

• call的使用

function fn2(x,y){
    	console.log(this) // obj2
    	console.log(x+y) // 4
    }
    var obj2 = {
    	name:'bind'
    }
    console.log(fn1.call)
    var f2 = fn1.call(obj1,2,2)

• 在严格模式下this的值将会是undefined

'use strict';
var sData = 'Wisen';
function display() {
  console.log('sData value is %s ', this.sData);
}
display.call(); // Cannot read the property of 'sData' of undefined

• 应用场景–借用构造函数使用call实现继承

function Person(name,age,gender){
		this.name = name
		this.age = age
		this.gender = gender
	}
	Person.prototype.eat = function(){
		console.log('food')
	}
	function Son(name,age,gender){
		Person.call(this,name,age,gender)
	}
	var son = new Son('xwh',18,0)
	console.log(son)
	//new的实例对象son返回的只是一个对象

总结主要点

• 相同点
  都是改变this的指向，call的返回值就是函数的返回值
• 不同点
  传参的方式不一致
  bind复制函数但不调用，apply和call直接调用函数