分享web开发知识

注册/登录|最近发布|今日推荐

主页 IT知识网页技术软件开发前端开发代码编程运营维护技术分享教程案例
当前位置:首页 > 前端开发

JS高级——上下文模式

发布时间:2023-09-06 01:39责任编辑:赖小花关键词:暂无标签

上下文调用模式

可以修改this的值,也就是可以修改函数的调用方式,apply、call可以修改函数调用上下文,也就是this的值

<script> ???var name = "莱昂纳多·自强·郭"; ???function sayHello(a, b) { ???????console.log(this.name + "吃了" + (a * b) + "个馒头"); ???} ???var obj = { ???????name: "尼古拉斯·电饭·锅" ???} ???var arr = [10, 20]; ???sayHello.apply(obj, arr);//尼古拉斯·电饭·锅吃了200个馒头 ???sayHello.call(obj, 2, 3);//尼古拉斯·电饭·锅吃了6个馒头</script>

apply与call的区别

函数.apply(对象, [函数需要参数列表,是一个数组])

函数.call(对象,arg1,arg2,arg3...argn)

具体区别就是apply参数是一个数组,而call传入函数的参数是一个值一个值的方式,所以根据他们的特性,运用情况也是不同:

1、apply用于函数的形参个数不确定的情况

2、call用于确定了函数的形参有多少个的时候使用

案例分析

(1)求一个数组的最大值

<script> ???var arr = [9, 1, 4, 10, 7, 22, 8]; ???//apply方法的第二个参数 是一个数组 ???// 在调用的时候,会将数组中的每一个元素拿出来,作为形参,挨个传递给函数 ???//apply方法和call方法第一个参数传递null的时候,都表示为函数调用模式 ???//也就是将this指向window ???var max = Math.max.apply(null, arr); ???//==>等同于Math.max(9,1,4,10,7,22,8) ???console.log(max);//22</script>

(2)将传入的参数打印,并且用’-‘连接

<script> ???function foo() { ???????//伪数组不具有join方法,所以这个时候就要考虑去借用一下数组的join方法 ???????//var str = Array.prototype.join.apply(arguments,["-"]); ???????var str = [].join.apply(arguments, ["-"]); ???????return str; ???} ???var str = foo(1, 3, "abc", "ffff", 99) // 1-3-abc-ffff-99 ???console.log(str);</script>

(3)设置div、p标签的颜色

<script> ???var divs = document.getElementsByTagName(‘div‘); ???var ps = document.getElementsByTagName(‘p‘); ???var arr = []; ???arr.push.apply(arr, divs); ???arr.push.apply(arr, ps); ???for (var i = 0; i < arr.length; i++) { ???????arr[i].style.backgroundColor = ‘yellow‘; ???}</script>

JS高级——上下文模式

原文地址:https://www.cnblogs.com/wuqiuxue/p/8352256.html

知识推荐

我的编程学习网——分享web前端后端开发技术知识。 垃圾信息处理邮箱 tousu563@163.com 网站地图
icp备案号 闽ICP备2023006418号-8 不良信息举报平台 互联网安全管理备案 Copyright 2023 www.wodecom.cn All Rights Reserved