call、apply、bind能用来干点啥(接上文)

上文我们了解了call、apply、bind的使用规则,学以致用,我们要在平时的搬砖中怎么使用呢?

其实好些人平时也用不到这三货,但是在框架底层,这三货可是经常被用到的啊,现在我们来了解了解吧

• 1、处理伪数组

假使,在html页面中有多个名为“c-container”的容器,现在我们来获取他们,并且把他们赋值给一个变量list

let list = document.getElementsByClassName('c-container')

然后我们来看看list

然后,我们想获取list中div#2、div#3的node,那能不能使用slice来截取出来呢?下面我们来试试

list.slice(2,4) //Uncaught TypeError: list.slice is not a function

报错了,说明list上面没有slice的方法,我们用不了,那是不是我们只能通过for循环才能找到呢,其实也不用,我们来使用call吧

[].slice.call(list, 2,4) //(2) [div#2.result-op.c-container.new-pmd, div#3.result.c-container.xpath-log.new-pmd]

是不是很简单呢,只需借用数组上的方法来操作伪数组即可.

这里需要说一下,什么是伪数组

• 有length属性
• 能按索引存储数据
• 能像遍历数组一样来遍历
• 不能使用数组的push()、slice()等方法

常见的伪数组包括：

• 函数内部的arguments对象
• 通过getElementsByTagName、document.childNodes等方式获取的NodeList集合。jQuery中的DOM元素集。

要将伪数组转换为真正的JavaScript数组，可以使用以下方法：

• 使用扩展运算符(…)。
• 使用Array.from(伪数组)。这个方法也会创建一个新的数组，包含伪数组中的元素。与slice方法不同，Array.from方法还可以接受一个映射函数作为参数，用于转换元素。
• 使用Array.prototype.slice.call(伪数组)

上面转换的第三种方法就是利用的call,这里没有传递参数,所以slice方法会返回原数组,即将伪数组转换为真数组

• 2、实现继承

利用call来实现构造函数的继承,不废话,直接上代码看看哈

单继承

function Person(name){
    this.name = name
}
function User(age, name){
    Person.call(this, name);
    this.age = age;
    console.log('my name is ' + this.name + ' i am ' + this.age + ' years old')
}
let mikeObj = new User(18, 'mike')  // my name is mike i am 18 years old

多继承

function Favorite(sport){
    this.sport = sport
}
function Person(name){
    this.name = name
}
function User(name, sport){
    Person.call(this, name)
    Favorite.call(this, sport)
    console.log('My name is ' + this.name + ',my Favorite is ' + this.sport)
}

let obj = new User('jhon', 'football') // My name is jhon,my Favorite is football

可以看到我们通过call等方法实现构造函数的继承

• 3、bind实现this的绑定

在上一篇文章,提到过函数中的this和它执行的作用域有关,和它定义的的作用域没有关系,我们在日常使用中,其实有时候会想让函数执行的作用域就固定在定义它的地方,那我们要如何操作呢

我们来看代码

let obj = {
    name: 'mike',
    getName(){
        return function(){
            console.log(this.name)
        }
    }
}
var name = 'lili'
let getName = obj.getName()
getName(). // lili. 

我们利用bind来绑定obj的作用域

let obj = {
    name: 'mike',
    getName(){
        return function(){
            console.log(this.name)
        }.bind(this)
    }
}
var name = 'lili'
let getName = obj.getName()
getName(). // mike

• 4、取数组的最大、最小值
  这里用到apply的一个默认功能,展开数组

let array  = [1,2,5,9,100]
Math.max.apply(null, array)  //100
Math.min.apply(null, array). //1

• 5、合并数组

常用到的合并数组的方法有 循环、push、concat、展开符号…,现在我们再来看看apply

let array  = [1,2,5,9,100]
[].push.apply(array, ['a','b'])
array. //[1, 2, 5, 9, 100, 'a', 'b']

以上就是最常用到几种情况,多用才能加深印象哈