js中call、apply、bind那些事

2024年3月23日 217次阅读 来源: learn_shifeng

媒介

口试，险些每次都邑问到一个js中关于call、apply、bind的题目，比方…

  • 怎样运用call、apply来求一个数组中最大或许最小值

  • 怎样运用call、apply来做继续

  • apply、call、bind的区分和重要运用场景

作用

起首问个题目，这三个函数的存在意义是什么？答案是转变函数实行时的上下文，再详细一点就是转变函数运行时的this指向。

举个栗子
function Person(name) {
    this.name = name
}

Person.prototype = {
    constructor: Person,
    showName: function() {
        console.log(this.name)
    }
}

var person = new Person('shifeng')
person.showName() // 输入'shifeng'
接下来
var animal = {
    name: 'cat
}

上面代码中有一个对象字面量，他没有所谓的showName要领，然则我照样想用？怎样办？(坑爹了，这好像在让巧媳妇去做无米之炊)，不过没紧要，call、apply、bind能够帮我们干这件事。

// 以下三种都邑输出'cat'
// 1. call
person.showName.call(animal)
// 2. apply
person.showName.apply(animal)
// 3. bind
person.showName.bind(animal)

我们拿他人的showName要领，并动态转变其上下文帮本身输出了信息，说到底就是完成了复用

区分

上面看起来三个函数的作用差不多，干的事险些是一样的，那为何要存在3个家伙呢，留一个不就能够。所以实在他们干的事从本质上讲都是一样的动态的转变this上下文,然则若干照样有一些差异的…

call, apply与bind的差异

call和apply转变了函数的this上下文后便实行该函数, 而bind则是返回转变了上下文的一个函数

call和apply的区分

他们俩之间的差异在于参数的区分，call和aplly的第一个参数都是要转变上下文的对象，而call从第二个参数最先以参数列表的情势展示，apply则是把除了转变上下文对象的参数放在一个数组内里作为它的第二个参数。

fn.call(contextObj, arg1, arg2, arg3...)
fn.apply(contextObj, [arg1, arg2, aeg3...])

运用场景

  • 求数组中的最大值和最小值(并非最好挑选)

var arr = [34,5,3,6,54,6,-67,5,7,6,-8,687]

// max、min 是 Math 中的静态要领，因而必定是没有运用上下文的必要的。
// 因而 call、apply 绑定只须要用 null 或许 undefined 占位就能够了。
Math.max.call(null, 34,5,3,6,54,6,-67,5,7,6,-8,687) // 同Math.max(34,5,3,6,54,6,-67,5,7,6,-8,687)
Math.max.apply(null, arr)

Math.min.call(undefined, 34,5,3,6,54,6,-67,5,7,6,-8,687)
Math.min.apply(undefined, arr)

// 最好要领, ES6数组解构
Math.max(...arr)
Math.min(...arr)

  • 将伪数组转化为数组

js中的伪数组(比方经由过程document.getElementsByTagName或许document.querySelectorAll猎取的元素)具有length属性，而且能够经由过程0、1、2…下标来接见个中的元素，然则没有Array中的push、pop等要领。我们能够运用call、apply来将其转化为真正的数组如许便能够方便地运用数组要领了。

var arrayLike = {
    0: 'shifeng',
    1: 'xingyun',
    2: 'ruxue',
    length: 3
}

上面就是一个一般的对象字面量，怎样把它变成一个数组呢？最简朴的要领就是

var arr = Array.prototype.slice.call(arrayLike)

上面arr就是一个包括arrayLike元素的真正的数组啦(注重数据结构必需是以数字为下标而且肯定要有length属性)

  • 数组追加

在js中要往数组中增加元素, 能够直接用push要领

var arr1 = [1,2,3]
var arr2 = [4,5,6]

// Array.prototype.push.apply(arr1, arr2)
[].push.apply(arr1, arr2)
// 运用一个辅佐的空数组（为了接见非静态要领)，就是把arr2运用apply的数组参数特征push到arr1中.
// 如许经由过程解构能够写成 arr1.push(...arr2), 假如须要返回一个全新的对象，还能够运用 [...arr1, ...arr2]。
// 还能够写成var newArr =  arr1.concat(arr2)

// arr1 [1, 2, 3, 4, 5, 6]
// arr2 [4,5,6]

  • 推断变量范例

关于对象型的数据范例, 我们能够借助call来得知他的详细范例, 比方数组

function isArray(obj){
  return Object.prototype.toString.call(obj) == '[object Array]';
}
isArray([]) // true
isArray('qianlong') // false
    原文作者：learn_shifeng
    原文地址: https://segmentfault.com/a/1190000007402815
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞