bind和apply以及call函数使用

本文详细介绍了JavaScript中call、apply和bind三个函数的作用,它们主要用于改变函数调用时的this指向。call和apply在传参方式上有所不同,当第一个参数为null时,在浏览器环境中会指向window。手动实现call和apply,以及bind的目的是创建一个绑定特定上下文的函数。此外,文章还提到了arguments对象在没有ES6 Array.from时如何转换为数组。
摘要由CSDN通过智能技术生成

这三个函数都是定义在函数原型对象上的方法,其主要的用途是改变this的指向,并且调用函数,但是bind会返回一个改变bind后的函数。下面我们将详细聊一下三个函数的作用,以及其内部实现。
一、call和apply
(1)、传入参数不同
call函数可以传入的参数没有限制,第一个参数为this指向的值,第二个参数一直到最后一个参数都是传入原函数的参数。apply需要传入两个参数,第一个参数为this指向的对象,第二个参数是需要传入原函数的参数,是一个数组或者伪数组。
(2)、当第一个参数为null
对于call和apply函数,如果第一个参数为null,那么该函数指向默认宿主对象,在浏览器中会指向window对象。

//在node环境下
function foo(a, b) {
  console.log(this)
}
foo.call(null, 10, 20)  //global
//在浏览器环境中
foo.call(null, 10, 20) //window

在严格模式下,其中的this都指向null。

function foo(a, b) {
	"use strict"
	console.log(this)
}
foo.call(null)  //null

(3)、
有时候我们使用call,apply其目的不只是改变this,而是调用对象上面的方法,此时我们传入null,就可以表示一个具体的对象。

let nums = Math.max.apply(null, [12,34,56,2,11])
console.log(nums) //56

二、手动实现call函数

//手动实现call
Function.prototype.myCall = function (obj, ...array) {
  let fn = this
  let thisArg = (obj === undefined || obj === null) ? window : Object(obj)
  array = Array.isArray(array) ? array : []
  thisArg.fn = fn
  let result = thisArg.fn(...array)
  delete thisArg.fn
  return result
}

三、手动实现apply函数

//手动实现apply
Function.prototype.myApply = function (obj, array) {
  let fn = this
  let thisArg = (obj === undefined || obj === null) ? window : Object(obj)
  thisArg.fn = fn
  array = Array.isArray(array) ? array : []
  let result = thisArg.fn(...array)
  delete thisArg.fn
  return result
}

四、手动实现bind函数
bind返回得是一个函数,就是将this改变后的函数。

Function.prototype.myBind = function (obj, ...arg1) {
  let fn = this
  let thisArg = (obj === undefined || obj === null) ? window : Object(obj)

  function proxyFn(...arg2) {
    thisArg.fn = fn
    let arg3 = [...arg1, ...arg2]
    let result = thisArg.fn(...arg3)
    delete thisArg.fn
    return result
  }
  return proxyFn
}

五、arguments的应用
arguments是一个伪数组,但是有时候我们需要使用数组的方法,在ES6之前我们可以使用call方法来调用,但是在ES6之后我们可以使用Array.from来将其转换为数组。

评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值