龙空技术网

在JavaScript中call与apply的实际应用你知道多少?

前端小渔歌 365

前言:

如今咱们对“js的addeventlistener函数三个参数的作用”大约比较关怀,咱们都需要分析一些“js的addeventlistener函数三个参数的作用”的相关知识。那么小编同时在网上搜集了一些对于“js的addeventlistener函数三个参数的作用””的相关文章,希望朋友们能喜欢,各位老铁们快快来了解一下吧!

我是小渔歌,点击右上方“关注”,每天为你分享【前端技术知识】干货。

功能介绍

改变函数运行时的上下文,简单说,就是为了改变函数体内部的结构 this 指向而存在的。

参数介绍

Function.prototype.apply(obj,args)

obj:代替function类里的this对象。args:数组或类数组,传递给调用的函数。

注意:call的第二个参数args表示参数列表以逗号隔开。

应用场景

一、优化点击按钮触发事件

<button id="btn1" action="add">添加</button><button id="btn2" action="delete">删除</button><button id="btn3" action="edit">编辑</button>

传统方法

//script document.querySelector("#btn1").addEventListener("click", function(e) {//添加 }); document.querySelector("#btn2").addEventListener("click", function(e) {删除 }); document.querySelector("#btn3").addEventListener("click", function(e) {编辑 });

利用call或apply函数

   //script    let obj = {        add: function(e) {            //添加        },        delete: function(e) {            //删除        },        edit: function(e) {            //编辑        }    }    document.querySelectorAll("button").addEventListener("click", function(e) {        let action = e.currentTarget.dataset.action;        obj[action] ? obj[action].call(this, e) : '';        // obj[action] ? obj[action].apply(this, [e]) : '';    })

二、实现继承

function A(desc) {    this.desc = desc;    this.getDesc = function() {        console.log(this.desc);    }}function B(desc) { //实现了类B继承了类A的方法getDesc    A.call(this, desc);}let b = new B("b-desc");b.getDesc(); //b-desc

三、将类数组转化成真正的数组

let btnEle = document.querySelectorAll("button");Array.prototype.slice.call(btnEle, 0)

四、合并两个数组

let a = [1, 2, 3]let c = [1, 2, 3]let len = Array.prototype.push.apply(a, c)console.log(a, c) //[ 1, 2, 3, 1, 2, 3 ] [ 1, 2, 3 ]

注意:此种方法与concat不同它不会生成一个新数组。

五、求数组最大值最小值

console.log(Math.max.apply(null, [1, 2, 3]))console.log(Math.min.apply(null, [1, 2, 3]))
总结

apply与call都可以调用函数,指定函数运行时的this指向。

标签: #js的addeventlistener函数三个参数的作用