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

水深无声 2022-04-03 14:50 275阅读 0赞

## 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直接调用函数