原型

基本概念

隐式原型

显式原型

原型导致的问题

数组遍历问题

问题描述

初始化问题

image-20200910171914788

当树形控件里面有值的时候，点击树形控件会出现上图错误

点击选择问题

image-20200910172140074

点击选择树形控件内容之后显示出js脚本问题

---

问题调试

以“初始化问题”为例

我们通过调试发现问题出现在展开所选择的内容节点的时候

造成报错问题的代码为 expandTargetNode中的 cnodes = zTreeObj.getNodeByParam("id", pid).nodes;

/**
 * 展开指定的节点
 * */
function expandTargetNode(nodes, pid){
	addNodes(zTreeObj, data, pid);
	var cnodes = null;
	for (var node in nodes) {
		var n = nodes[node];
		if (n != null && n.id===pid) {
			zTreeObj.expandNode(n, true, false);
			cnodes = zTreeObj.getNodeByParam("id", pid).nodes;    // 造成问题的代码
			//flag = true;
			break;
		}
	}
	return cnodes;
}

image-20200910172818868

通过调试我们发现在第二次遍历的时候，当nodes数组中的内容遍历结束之后没有跳出循环，同时下标为remove，内容如下，

	function(val) { 
		var index = this.indexOf(val); 
		if (index > -1) { 
		this.splice(index, 1); 
		} 
	};

出现上述问题的原因是因为使用 for (var index in items) 进行遍历是有风险的，items是一个数组，如果往数组原型中(Array.prototype)扩展了任何方法，都会在上述遍历代码中遍历到，导致我们的items遍历结束了却还没有跳出循环

恰巧系统最近集成了关键字组件，该组件中扩展了Array的remove方法

image-20200910172727897

解决办法

​ 1. 使用 for(var i=0;i<items.length;i++) 遍历

​ 2. 去除扩展的原型

这里我们采取第二种做法，因为可能也会影响到其他功能

js中遍历尽量避免使用 for (var index in items)

“点击选择问题”与上述问题属于同一问题导致