JavaScript---浅谈函数this指向之 call()、apply()、bind()方法

js函数之 call()、apply()、bind()

引言：函数也是对象，所以函数也有属性和方法，例如：构造函数有1个prototype属性。
我们也可以给一个函数对象，添加属性或者方法。

 // 先声明一个构造函数
    function Person(){ }
    console.log(Person.prototype) // Person 这个函数也是一个对象

// 先声明一个构造函数
    function Person(){ }
    console.log(Person.prototype) // Person 这个函数也是一个对象

    // 给Person这个函数添加一个方法
    Person.haha = function(){
      console.log(haha)
    }
    // 调用函数方法
    Person.haha()

函数内部的this

函数内部有1个关键字this，谁调用这个函数，this就代表谁。

• 说道this，就要说一下和this相关的三个方法？

1. call()方法

注：可以拥有多个参数

call([thisObj[,arg1[,arg2[,argN]]]])

参数说明：
	thisObj ：要指向的对象
	[arg1[,arg2[,argN]]]] ：参数列表，参数与参数之间使用逗号隔开

[1] 作用：调用函数，改变函数中的this指向
[2] 参数：第一个，设置函数内部的this指向，其他参数，对应函数的实参
[3] 返回值：call的返回值就是函数的返回值

2. apply()方法

注：最多只能有2个参数

apply([thisObj[,argArray]]) 
参数说明：
thisObj ：要指向的对象
[argArray] ：参数列表，要求是一个数组

[1] 作用：改变函数中的this
[2] 参数：只有2个，第一个参数，设置函数中的this指向，第二个参数，数组（元素是函数所需要的参数）
[3] 返回值：apply()的返回值就是函数的返回值

3. bind()方法

注：参数方式跟call类似
[1] 作用：改变函数的this，但是 不会调用函数 而是返回一个新的函数（复制了函数）
[2] 参数：第一个参数设置this的指向，其他参数对应函数的实参
[3] 返回值：bind()返回一个函数

  function fn(x, y){
      console.log(this)
      console.log(x + y)
    }
    var obj = {
      name: 'zwt'
    }
    var copyFn = fn.bind(obj, 5, 6)
    copyFn();

三个方法的场景应用？

1. call()

• 第一步，先回顾this指向

第二步，使用call()方法，执行getSum

数组的原型对象（Array.prototype）还有拥有其他方法，例如：push()和splice()。
第三步，让伪数组对象（类似数组对象），使用数组方法

 var obj = {
      0: 100,
      1: 10,
      2: 11,
      3: 20,
      length: 4
    }
    // 使用call方法执行push()方法
    Array.prototype.push.call(obj, 30)
    Array.prototype.splice.call(obj, 0, 3)
    console.log(obj)

2. apply()方法

• Math.max(1, 3, 5, 8)方法可以求多个数中的最大值。

1、使用Math.max()返回数组元素中的最大值。
思路：把数组展开作为max()的参数，使用apply()方法调用Math.max()方法。

2、使用console.log()把数组中的元素都打印出来。
思路：把数组展开作为log()的参数，使用apply()方法调用console.log()方法

3. bind()方法

• 定时器的处理函数中的this，默认是window对象。

使用bind()方法后，this指向 obj

• 扩展传送门 - - - JavaScript函数- - - 继承