在介绍浅拷贝和深拷贝的概念之前，我们不妨先了解一下 JavaScipt 变量的两种保存方式。
ECMAScript 变量可能包含两种不同数据类型的值：基本类型值和引用类型值。基本类型值指的是简单的数据段，而引用类型值指那些可能由多个值构成的对象。在将一个值赋给变量时，解析器必须确定这个值是基本类型值还是引用类型值。5 种基本数据类型：Undefined、Null、Boolean、Number 和 String。这 5 种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值。引用类型的值是保存在内存中的对象。与其他语言不同，JavaScript 不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实际上是在操作对象的引用而不是实际的对象。为此，引用类型的值是按引用访问的。
我要评论
var a = 2;
var b = a;
a = 5;
console.log(a); //5
console.log(b); //2
var obj1 = new Object({'name' : 'John', 'age' : 19});
var obj2 = obj1;
obj1.name = 'Sara';
console.log(obj1); //{'name' : 'Sara', 'age' : 19}
console.log(obj2); //{'name' : 'Sara', 'age' : 19}
obj2.age = 30;
console.log(obj1); //{'name' : 'Sara', 'age' : 30}
console.log(obj2); //{'name' : 'Sara', 'age' : 30}
上面例子中，无论修改任何一个变量，都会直接修改这两个变量共同指向的内存中的对象，因此，两个变量的值同时改变。
我们使用Canvas绘图时，经常会遇到改变所绘图形的属性问题，比如控制位置的坐标点。使用浅拷贝，可以有效地节省代码，减少遍历次数，提高代码执行效率。
下面的例子将重点展示：浅拷贝在拖拽图形时如何改变图形的坐标属性。
如上图所示，图中有三个多边形，我们移动其中一个红色的多边形，改变了红色多边形的坐标属性。
我们观察其中一个代码片段，思考其中应用的浅拷贝的原理：
下面代码节选自《Core HTML5 Canvas Graphics, Animation, and Game Development》。
// Event handlers.....................................................
//鼠标点击画布时...
canvas.onmousedown = function (e) {
var loc = windowToCanvas(e.clientX, e.clientY); //获取当前鼠标位置
e.preventDefault(); // prevent cursor change
if (editing) { //进入编辑模式...
polygons.forEach( function (polygon) { //遍历所有的多边形对象组成的数组polygons
polygon.createPath(context); //绘制路径，但不描边
if (context.isPointInPath(loc.x, loc.y)) { //判断鼠标位置是否落在多边形范围内
saveDrawingSurface(); //储存画布信息
mousedown.x = loc.x; //储存鼠标信息
mousedown.y = loc.y;
dragging = polygon; //将当前选中的多边形对象浅拷贝给dragging
draggingOffsetX = loc.x - polygon.x; //储存鼠标距离多边形中心点的偏移值
draggingOffsetY = loc.y - polygon.y;
return;
}
});
}
else { //进入绘图模式...
startDragging(loc);
dragging = true;
}
};
//鼠标移动时......
canvas.onmousemove = function (e) {
var loc = windowToCanvas(e.clientX, e.clientY);
e.preventDefault(); // prevent selections
if (editing && dragging) { //进行编辑模式并选中多边形
dragging.x = loc.x - draggingOffsetX; //修改dragging.x值，直接修改了选中多边形的x属性
dragging.y = loc.y - draggingOffsetY; //修改dragging.y值，直接修改了选中多边形的y属性
context.clearRect(0, 0, canvas.width, canvas.height); //清除画布
drawGrid('lightgray', 10, 10); //绘制网格线
drawPolygons(); // 重新绘制所有的多边形
}
else { //略过......
if (dragging) {
restoreDrawingSurface();
updateRubberband(loc, sides, startAngle);
if (guidewires) {
drawGuidewires(mousedown.x, mousedown.y);
}
}
}
};
将选中的多边形对象复制给dragging变量，当修改dragging变量时，同时也改变了选中多边形的属性，节省了代码，避免了多次遍历数组，提高代码执行的效率。
完整示例请查阅Github源码：https://github.com/corehtml5canvas/code/tree/master/ch02/example-2.28
本文地址：https://blog.csdn.net/m0_37128507/article/details/85785373
如对本文有疑问， 点击进行留言回复！！
ros编译package后，devel文件夹内没有对应package的可执行文件
网友评论