[].indexOf.call(this.oBtnItems,target) 学习理解-CSDN博客

本文链接：https://blog.csdn.net/m0_50015961/article/details/113878785

1.先学习一下call

语法：call([thisObject[,arg1 [,arg2 [,...,argn]]]]);，应用某一对象的一个方法，用另一个对象替换当前对象。

可以指定上下文this;可以使用call()来实现继承：写一个方法，然后让另外一个新的对象来继承它（而不是在新对象中再写一次这个方法）。

[].indexOf.call(),根据上面call用法的分析，这里是想指定上下文。数组的indexOf(string)是返回字符串string在父串中首次出现的位置，从0开始，-1表示没有。
类似拓展：

[].join.call([1,2,3],',') // "1,2,3"
[].sort.call([5,7,1,3,4]); // [1, 3, 4, 5, 7]

上面代码中第一行代码，中[1,2,3]继承了空数组的join() 方法，把数组中的所有元素放入一个字符串。以逗号分开。
第二行代码，中数组[5,7,1,3,4]继承了空数组的sort方法，进行从小到大排序。

实现点击多个按键改变背景颜色

<style type="text/css">
	.f-operator button.operator-active{
		background-color:orange;
		color: #FFFFFF;
	}
</style>
<div class="f-operator">
	<button data-operator="plus" class="operator-active">+</button>
	<button data-operator="reduce">-</button>
	<button data-operator="ride">*</button>
	<button data-operator="except">/</button>
</div>

const fOperator = document.getElementsByClassName('f-operator')[0];
			const oBtnItems = fOperator.getElementsByTagName('button');
			fOperator.addEventListener('click',scaler.bind(this),false);
			bindIndex=0;
			function scaler  (event){
					const e = event || window.event,
						target = e.target || e.srcElement,
						tagName = target.tagName.toLowerCase();
				
					tagName === 'button' && fieldUpdate(target);
				}
			function fieldUpdate(target){
					oBtnItems[bindIndex].className="";
					bindIndex = [].indexOf.call(oBtnItems,target);
					
					target.className = 'operator-active';
					
				}
	//中的 [].indexOf.call(oBtnItems,target)，可以解读为oBtnItems的对象继承了空数组indexOf方法，找到点击的按钮在OBtnItems出现的位置更改bindIndex值