【JavaScript 面向对象编程——《深浅拷贝》】计数器例子

最新推荐文章于 2022-07-20 19:38:45 发布
最新推荐文章于 2022-07-20 19:38:45 发布
阅读量159 收藏 1
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45389633/article/details/107073228
版权

相关文章导航

👉【JavaScript 面向对象编程——《深浅拷贝》】计数器例子👈
     【JavaScript 面向对象编程——《设计模式》】计数器例子
     【JavaScript 面向对象编程——《原型继承》】计数器例子

关于深浅拷贝：

文章目录

🔸浅拷贝🔸（❌慎用）

一、【ES5】Object.create()方法

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 封装深拷贝函数
		function deepClone(obj) {
			// 通过调用函数创建一个以指定对象的原型为模板的新对象
			var copy = Object.create(Object.getPrototypeOf(obj));

			// 利用数组的 “Array.prototype.forEach” 方法进行复制，实现深拷贝
			var propNames = Object.getOwnPropertyNames(obj);
			propNames.forEach(function(name) {

				// 获取指定对象上一个自有属性对应的属性描述符。
				var desc = Object.getOwnPropertyDescriptor(obj, name);

				// 直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。
				Object.defineProperty(copy, name, desc);
			});

			return copy;
		}

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = deepClone(makeCounter);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = deepClone(makeCounter);
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>【ES5】Object.create()方法</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>

优缺点

  • 【优点】：适用于仅有一层嵌套层的对象的拷贝。

  • 【缺点】：无法对多层对象嵌套层实现深拷贝。

二、【ES6】Object.assign()方法

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = Object.assign({}, makeCounter);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = Object.assign({}, makeCounter);
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>【ES6】Object.assign()方法（该方法实际属于浅拷贝）</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>

优缺点

  • 【优点】：
    a）适用于仅有一层嵌套层的对象的拷贝；
    b）方便简洁快捷，一行代码解决…

  • 【缺点】：无法对多层对象嵌套层实现深拷贝。

三、【ES6】对象展开运算符 “…”

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = {...makeCounter};
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = {...makeCounter};
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>【ES6】扩展运算符</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>

优缺点

  • 【优点】：
    a）适用于仅有一层嵌套层的对象的拷贝；
    b）方便简洁快捷，一行代码解决…

  • 【缺点】：无法对多层对象嵌套层实现深拷贝。

🔸深拷贝🔸

一、【jQuery】extend()方法

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = $.extend(true, {}, makeCounter);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = $.extend(true, {}, makeCounter);
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>【jQuery】extend()方法</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>

优缺点

  • 【优点】：
    a）方便简单且快捷；
    b）支持很多层级的数据；

  • 【缺点】：
    a）无法拷贝对象中值为 ‘undefined’ 的属性；
    b）鸡肋：为了一个方法引入 jQuery 库…除非项目用 jQuery 开发；

二、递归算法

（1）第一种递归

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 递归封装深拷贝
		function deepClone(obj) {
			if (obj === null) {
				return null;
			} else if (typeof obj !== 'object') {
				// 不再具有下一层次
				return obj;
			} else if (obj.constructor === Date) {
				return new Date(obj);
			}

			// 保持继承链
			var objClone = new obj.constructor ();
			for (var k in obj) {

				// 不遍历其原型链上的属性
				if (obj.hasOwnProperty(k)) {

					// 判断obj子元素是否为对象，如果是，递归复制
					if (obj[k] && typeof obj[k] === 'object') {
						objClone[k] = deepClone(obj[k]);
					} else {
						objClone[k] = obj[k];
					}

					// 简写
					// objClone[k] = typeof obj[k] === 'object' ? deepClone(obj[k]) : obj[k];
				}
			}

			// 返回深度克隆后的对象
			return objClone;
		};

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = deepClone(makeCounter);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = deepClone(makeCounter);
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>（一）递归算法</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>

优缺点

  • 【解释】：
    a）用 new obj.constructor () 构造函数新建一个空的对象，而不是使用 {} 或者 []，这样可以保持原形链的继承；
    b）用 obj.hasOwnProperty(key) 来判断属性是否来自原型链上，因为 for…in… 也会遍历其原型链上的可枚举属性；
    c）对于 function 类型，这里是直接赋值的，还是共享一个内存值。这是因为函数更多的是完成某些功能，有个输入值和返回值，而且对于上层业务而言更多的是完成业务功能，并不需要真正将函数深拷贝。

  • 【优点】：
    a）常用的递归封装方法，可满足普通对象深拷贝；
    b）支持很多层级的数据；

  • 【缺点】：
    a）无法保持引用；
    b）当数据的层次很深，会栈溢出；

（2）第二种递归

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 创建对元素进行类型判断的函数
		function getType(obj) {
			// tostring会返回对应不同的标签的构造函数
			var _toString = Object.prototype.toString;
			var map = {
				'[object Boolean]' : 'boolean',
				'[object Number]' : 'number',
				'[object String]' : 'string',
				'[object Function]' : 'function',
				'[object Array]' : 'array',
				'[object Date]' : 'date',
				'[object RegExp]' : 'regExp',
				'[object Undefined]' : 'undefined',
				'[object Null]' : 'null',
				'[object Object]' : 'object'
			};
			if (obj instanceof Element) {
				return 'element';
			}
			return map[_toString.call(obj)];
		}

		// 递归封装深拷贝
		function deepClone(obj) {
			var type = getType(obj);
			var objClone;
			if (type === 'array') {
				objClone = [];
			} else if (type === 'object') {
				objClone = {};
			} else {
				// 不再具有下一层次
				return obj;
			}

			// 类型为数组或对象时的递归复制
			if (type === 'array') {
				for (var i = 0, len = obj.length; i < len; i++) {
					objClone.push(deepClone(obj[i]));
				}
			} else if (type === 'object') {
				for (var k in obj) {
					objClone[k] = deepClone(obj[k]);
				}
			}

			// 返回深度克隆后的对象
			return objClone;
		}

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = deepClone(makeCounter);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = deepClone(makeCounter);
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>（二）递归算法</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>

优缺点

  • 【解释】：对于 function 类型，这里是直接赋值的，还是共享一个内存值。这是因为函数更多的是完成某些功能，有个输入值和返回值，而且对于上层业务而言更多的是完成业务功能，并不需要真正将函数深拷贝。

  • 【优点】：
    a）可满足普通对象深拷贝；
    b）支持很多层级的数据；

  • 【缺点】：
    a）无法保持引用；
    b）当数据的层次很深，会栈溢出；

三、二叉树遍历算法

【DFS】树深度优先遍历

（1）第一种 DFS 写法

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 深度优先深度克隆， 利用栈的方式实现
		// 防栈溢出
		function deepClone(obj) {
			var objClone = {};

			// 栈
			var loopList = [{
				parent: objClone,
				key: undefined,
				data: obj,
			}];

			while (loopList.length) {
				// 深度优先
				var node = loopList.pop();
				var parent = node.parent;
				var key = node.key;
				var data = node.data;

				// 初始化赋值目标，key为undefined则拷贝到父元素，否则拷贝到子元素
				var res = parent;
				if (typeof key !== 'undefined') {
					res = parent[key] = {};
				}
				for (var k in data) {
					if (data.hasOwnProperty(k)) {
						if (typeof data[k] === 'object') {
							// 下一次循环
							loopList.push({
								parent : res,
								key : k,
								data : data[k],
							});
						} else {
							res[k] = data[k];
						}
					}
				}
			}

			// 返回深度克隆后的对象
			return objClone;
		}

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = deepClone(makeCounter);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = deepClone(makeCounter);
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>【DFS】树深度优先遍历（一）</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>
优缺点
  • 【优点】：
    a）不会栈溢出；
    b）支持很多层级的数据；

  • 【缺点】：…
（2）第二种 DFS 写法

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 创建对元素进行类型判断的函数
		function getType(obj) {
			// tostring会返回对应不同的标签的构造函数
			var _toString = Object.prototype.toString;
			var map = {
				'[object Boolean]' : 'boolean',
				'[object Number]' : 'number',
				'[object String]' : 'string',
				'[object Function]' : 'function',
				'[object Array]' : 'array',
				'[object Date]' : 'date',
				'[object RegExp]' : 'regExp',
				'[object Undefined]' : 'undefined',
				'[object Null]' : 'null',
				'[object Object]' : 'object'
			};
			if (obj instanceof Element) {
				return 'element';
			}
			return map[_toString.call(obj)];
		}

		// 深度优先深度克隆， 利用栈的方式实现
		// 解决【递归、对象环、边界处理（比如函数，Set等）、防栈溢出】问题
		function deepClone(obj) {
			var type = getType(obj);
			var objClone = {};
			// 用于存储复制过程中访问过的对象的队列，避免对象环的问题
			var visitQueue = [];
			if (type === 'array' || type === 'object') {
				var index = visitQueue.indexOf(obj);
				if (index > -1){
					objClone = visitQueue[index]
				} else {
					visitQueue.push(obj);
					for (var key in obj) {
						objClone[key] = deepClone(obj[key], visitQueue);
					}
				}

			} else if (type === 'function') {
				// 处理函数
				objClone = eval( '(' + obj.toString() + ')');
			} else {
				// 处理原始值
				objClone = obj;
			}

			// 返回深度克隆后的对象
			return objClone;
		}

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = deepClone(makeCounter);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = deepClone(makeCounter);
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>【DFS】树深度优先遍历（二）</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>
优缺点
  • 【优点】：
    a）不会栈溢出；
    b）支持很多层级的数据；

  • 【缺点】：…

【BFS】树广度优先遍历

（1）第一种 BFS 写法

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 广度优先深度克隆， 利用队列的方式实现
		// 利用objClone建立一个与原对象相同的数据结构， 遇到可处理的值（比如原始值，函数，就处理后赋值到相应的节点下）
		function deepClone(obj) {
			var objClone = {};

			// 进队列
			var originQueue = [obj];

			// 同时objClone也跟着一起进队列
			var copyQueue = [objClone];

			// 以下两个队列用来保存复制过程中访问过的对象，以此来避免对象环的问题（对象的某个属性值是对象本身）
			var visitQueue = [];
			var copyVisitQueue = [];

			while (originQueue.length > 0) {
				var _obj = copyQueue.shift();
				var _data = originQueue.shift();
				copyVisitQueue.push(_obj);
				visitQueue.push(_data);
				for (var k in _data) {
					var _value = _data[k];
					if (typeof _value !== 'object') {
						_obj[k] = _value;
					} else {
						// 使用indexOf可以发现数组中是否存在相同的对象(实现indexOf的难点就在于对象比较)
						var index = visitQueue.indexOf(_value);
						if (index >= 0) {
							// 出现环的情况不需要再取出遍历
							_obj[k] = copyVisitQueue[index];
						} else {
							originQueue.push(_value);
							_obj[k] = {};
							copyQueue.push(_obj[k]);
						}
					}
				}
			}

			// 返回深度克隆后的对象
			return objClone;
		}

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = deepClone(makeCounter);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = deepClone(makeCounter);
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>【BFS】树广度优先遍历（一）</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>
优缺点
  • 【优点】：
    a）不会栈溢出；
    b）支持很多层级的数据；

  • 【缺点】：…
（2）第二种 BFS 写法

在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<title></title>
	<script type="text/javascript">
		// 定义对象字面量
		var makeCounter = {
			num : 0,
			changeBy : function(val) {
				this.num += val;
			},
			add : function() {
				this.changeBy(1);
			},
			red : function() {
				this.changeBy(-1);
			},
			value : function() {
				return this.num;
			}
		};

		// 创建对元素进行类型判断的函数
		function getType(obj) {
			// tostring会返回对应不同的标签的构造函数
			var _toString = Object.prototype.toString;
			var map = {
				'[object Boolean]' : 'boolean',
				'[object Number]' : 'number',
				'[object String]' : 'string',
				'[object Function]' : 'function',
				'[object Array]' : 'array',
				'[object Date]' : 'date',
				'[object RegExp]' : 'regExp',
				'[object Undefined]' : 'undefined',
				'[object Null]' : 'null',
				'[object Object]' : 'object'
			};
			if (obj instanceof Element) {
				return 'element';
			}
			return map[_toString.call(obj)];
		}

		// 广度优先深度克隆， 利用队列的方式实现
		// 利用objClone建立一个与原对象相同的数据结构， 遇到可处理的值（比如原始值，函数，就处理后赋值到相应的节点下）
		function deepClone(obj) {
			var objClone = {};

			// 进队列
			var originQueue = [obj];

			// 同时objClone也跟着一起进队列
			var copyQueue = [objClone];

			// 用于存储复制过程中访问过的对象的队列，避免对象环的问题
			var visitQueue = [];
			while(originQueue.length){
				var _obj = originQueue.shift();
				var _data = copyQueue.shift();
				if (getType(_obj) === 'array' || getType(_obj) === 'object') {
					for(item in _obj){
						var val = _obj[item];
						if (getType(val) === 'object') {
							var index = visitQueue.indexOf(val);
							if (~index) {
								// 对象环
								_data[item] = visitQueue[index];
							} else {
								// 新的对象，给objClone一个对应属性的空对象
								originQueue.push(val);
								_data[item] = {};
								copyQueue.push(_data[item]);
								visitQueue.push(val);
							}
						}
						else if (getType(val) === 'array') {
							originQueue.push(val);
							_data[item] = [];
							copyQueue.push(_data[item])
						} else if (getType(val) === 'function') {
							// 处理函数
							_data[item] = eval( '(' + val.toString() + ')');
						} else {
							// 处理原始值
							_data[item] = val;
						}
					}
				} else if (getType(obj) === 'function') {
					// 处理函数
					_data = eval( '(' + _obj.toString() + ')');
				} else {
					// 处理原始值
					_data = _obj;
				}
			}
			// 返回深度克隆后的对象
			return objClone;
		}

		// 执行操作
		function event(ele, btn1, btn2, obj) {
			btn1.onclick = function() {
				obj.add();
				ele.innerHTML = obj.value();
			}
			btn2.onclick = function() {
				obj.red();
				ele.innerHTML = obj.value();
			}
			ele.innerHTML = obj.value();
		}

		window.onload = function() {
			// 计数器 1
			var Counter1 = deepClone(makeCounter);
			var add1 = document.getElementById('add1');
			var red1 = document.getElementById('red1');
			var demo1 = document.getElementById('demo1');
			event(demo1, add1, red1, Counter1);

			// 计数器 2
			var Counter2 = deepClone(makeCounter);
			var add2 = document.getElementById('add2');
			var red2 = document.getElementById('red2');
			var demo2 = document.getElementById('demo2');
			event(demo2, add2, red2, Counter2);
		}
	</script>
</head>
<body>
	<h3>【BFS】树广度优先遍历（二）</h3>
	<hr />
	<p>计数器 1</p>
	<input type="button" id="add1" value="自增 (+1)" />
	<input type="button" id="red1" value="自减 (-1)" />
	<p id="demo1"></p>
	<hr />
	<p>计数器 2</p>
	<input type="button" id="add2" value="自增 (+1)" />
	<input type="button" id="red2" value="自减 (-1)" />
	<p id="demo2"></p>
</body>
</html>
优缺点
  • 【优点】：
    a）不会栈溢出；
    b）支持很多层级的数据；

  • 【缺点】：…
iuukai
关注
专栏目录
前端最新面试题(Javascript模块篇)
前端的路上
05-22 1061
前端最新面试题Javascript
ym——Andorid-15k+的面试题。
热门推荐
陈宇明
08-07 2万+
最近才开的博客，希望大家多多关注，andorid开发也做了3年有余了，也面试很多加企业，借此机会分享一下，我们中遇到过的问题以及解决方案吧，希望能够对正在找工作的andoird程序员有一定的帮助。学完本人博客发表《ym--andorid从零开始教程》+面试题目全理解，年薪18w以上绝对没问题。 特别献上整理过的50道面试题目 1.listView的优化方式 重用conve
【JavaScript 面向对象编程——《设计模式》】计数器例子
iuukai
07-01 240
相关文章导航      【JavaScript 面向对象编程——《深浅拷贝》】计数器例子 ????【JavaScript 面向对象编程——《设计模式》】计数器例子????      【JavaScript 面向对象编程——《原型继承》】计数器例子 文章目录一、模块模式优缺点二、工厂模式优缺点三、构造函数模式优缺点四、原型模式优缺点五、混合模式（构造函数模式 + 原型模式）优缺点 一、模块模式 &
textarea支持复制粘贴的文本计数器
疏雨萧萧千行泪
11-23 1217
function statInputNum( textArea, numItem ) {  var max = textArea.attr( "maxlength");  var curLength=0;  curLength = textArea.val()    .length;    numItem.text(max-curLength);  textArea.on( 'inp
【JavaScript 面向对象编程——《原型继承》】计数器例子
iuukai
07-01 215
相关文章导航      【JavaScript 面向对象编程——《深浅拷贝》】计数器例子      【JavaScript 面向对象编程——《设计模式》】计数器例子 ????【JavaScript 面向对象编程——《原型继承》】计数器例子???? 文章目录 ...
JavaScript函数，闭包，对象，类，原型链
weixin_46104231的博客
11-24 518
JavaScript函数： 在 JavaScript 中，函数是对象的方法。 var person = { firstName:"Bill", lastName: "Gates", fullName: function () { return this.firstName + " " + this.lastName; } } person.fullName(); 在该实例中，fullname是person对象的一个方法。 函数call方法： .
大厂面试八股文——C++
xiaohu的博客
04-05 4061
文章目录可变参数-printf的实现原理编译语言和解释语言C++空指针调用成员函数std::move移动语义std::move的实现完美转换malloc函数底层实现被free回收的内存是立即返还给操作系统吗？定义和声明的区别调试程序的方法遇到coredump要怎么调试引用作为函数参数以及返回值的好处成员初始化列表的概念，为什么用成员初始化列表会快一些this指针，类对象调用普通的成员函数定义常量/处理返回值/拷贝赋值函数的形参只能引用编译底层内存区域的划分和分配内存分配方式LINUX进程区分段及存储数据被f
JavaScript知识点整理
weixin_56299841的博客
07-20 356
JavaScript知识点整理
前端面试问题（适用于面试回答思路）
yaminne的博客
03-28 4963
原型和原型链 原型：构造函数的 prototype 属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型。也即，每个构造函数的实例都有一个原型，叫原型对象，由实例对象的内置属性_proto_指向。每个原型都有一个 constructor 属性指向关联的构造函数。 原型用法：构造函数创建的实例可以访问实例的属性和方法，也可以访问原型的属性和方法。对于原型只能访问自己的属性和方法。考虑这一特性，如果对象公有的属性和方法，我们可以添加到原型上面，对象需要的时候直接访问原型的属性和方法就可以。 当读取实
js面试题
yang159819的博客
04-22 1494
1、介绍js的基本数据类型　　 答： Undefined、Null、Boolean、Number、String 　　 2、js有哪些内置对象？　 答：数据封装类对象：Object、Array、Boolean、Number 和 String 　　其他对象：Function、Arguments、Math、Date、RegExp、Error 　　 3、this对象的理解　 答：thi...
面经准备（持续更新）
qq_40088655的博客
05-25 719
1. get和post的区别 GET 在浏览器回退时是无害的，而 POST 会再次提交请求。 GET 产生的 URL 地址可以被 Bookmark，而 POST 不可以。 GET 请求会被浏览器主动 cache，而 POST 不会，除非手动设置。 GET 请求只能进行 url 编码，而 POST 支持多种编码方式。 GET 请求参数会被完整保留在浏览器历史记录里，而 POST 中的参数不会被保留。 GET 请求在 URL 中传送的参数是有长度限制的，而 POST 么有。 对参数的
Python基础知识资料收集库
01-03 2064
对于开始想输出 “Hello 世界” 的用户，以下资料值得珍藏^~^ 1：为什么学习Python 家里有在这个IT圈子里面，也想让我接触这个圈子，然后给我建议学的Python， 然后自己通过百度和向有学过Python的同学了解了Python，Python这门语言，入门比较简单， 它简单易学，生态圈比较强大，涉及的地方比较多，特别是在人工智能，和数据分析这方面。在未来我觉得是往自动化， 人工...
关于<script>元素（js两种引用方法：内部嵌入，外部引入）
iuukai
07-12 5912
文章目录一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。二、在同一个HTML文档中，调用多个JavaScript脚本。三、<script>元素定义的6个属性。 一、在HTML中引用JavaScirpt脚本的方法有两种：内部嵌入和外部引用。 关于<script>标签的位置问题，虽然<script></script>可以放在...
setTimeout() 与 setInterval() 的区别及使用
iuukai
06-14 5130
Test1 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <script type="text/javascript"> //变量初始化 var num1 = 0; var num2 = 0; var clock1; var clock2; //定义启动器 function work(ele)
【JavaScript】数值精度与数值范围
iuukai
09-10 3640
文章目录一、整数与浮点数二、精度丢失1. 组成2. 二进制表示3. 如何解决三、整数精度四、数值范围1. 正向溢出与负向溢出2. 利用 Number 对象返回具体最大值和最小值 一、整数与浮点数 JavaScript 内的数字没有 int(整数型) 与 float(浮点型) 之分，即 1 与 1.0 相同，为同一个数。 JavaScript 内所有数字都是浮点数，若遇到需要整数才能运算的情况，JavaScript 会自行将64位浮点数转成32位整数，再进行运算，而这个转换过程，便导致了精度丢失。 0.1 +
【JavaScript】《整体代码script》为何是一个宏任务
iuukai
07-14 2912
JavaScript是一门单线程的语言，因此，JavaScript在同一个时间只能做一件事，单线程意味着，如果在同个时间有多个任务的话，这些任务就需要进行排队，前一个任务执行完，才会执行下一个任务。 有很多小伙伴不明白【整体代码script】为何是一个宏任务，为了让大家更好理解这里举个栗子… 例子① <!-- 脚本 1 --> <script> // 同步 console.log('start1') // 异步宏 setTimeout(() => console.l.
【HTML5】Web SQL Database【已废弃】（可能是最全详解，含各种参数介绍，以及一些SQL语句）
iuukai
07-16 2801
在阅读本篇文章之前，请先注意以下几点声明： 1. 原文：  Beware. This specification is no longer in active maintenance and the Web Applications Working Group does not intend to maintain it further.  译文：   注意。此规范不再处于主动维护中，Web应用程序工作组不打算进一步维护它。 2. 原文：  This document was on th
【HTML5 + API】 地理定位（Geolocation）之【Google 地图 API 用不了？不如换国内地图 API ！！】
iuukai
07-11 1846
文章目录前提百度地图 API （简单教程）1. 获取经纬度2. 处理错误和拒绝3. 在地图中显示结果注意！！！！！ 前提   这几天在菜鸟学习 HTML5 教程，学到地理定位，发现一个很严重的问题，Google 地理位置服务早已不提供给我国，然，各大教程的代码和方法，都是由 Google 服务支持的，那不就不可用了么？   菜鸟教程：HTML5 Geolocation（地理定位）   我的学习方法是必须照着敲一遍，然后再各大浏览器运行测试一遍，若都可兼容运行那我才会去消化掉这些知识。所以，我把代码放去 E
现代JavaScript面向对象编程探索
"javascript面向对象编程" JavaScript面向对象编程是一种基于对象和原型的编程范式，它允许开发者通过创建和操作对象来构建复杂的应用程序。在JavaScript中，对象是数据（属性）和函数（方法）的集合，这些函数可以...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值