js 面向对象问题。new 出来的对象相互影响怎么回事啊。

Question

js 文件：    //压路机对象    function Ylj(json){      'use strict';      var _this = this;      this.timer = null;      this.color = json.color;      this.width = json.width;      this.speed = json.speed;      this.C = document.getElementById('c1'); //路径画布      this.picStage = document.getElementById('c2'); //      this.pic = new Image();      this.pic.src='./img/icon-ylj.png';      this.pGC = this.picStage.getContext('2d');      this.GC = this.C.getContext('2d');      this.GC.lineWidth = json.width;      this.GC.strokeStyle = json.color;      this.disX = json.disX;      this.disY = json.disY;      this.line = 0;      this.count = 0;      this.start = function(arr){        _this.startDraw(_this,arr);      };      this.stop = function(){        _this.stopDraw(_this);      };    }    Ylj.prototype.stopDraw=function(obj){      'use strict';       clearTimeout(obj.timer);    };    Ylj.prototype.startDraw=function(obj,arr){      'use strict';      var C = document.getElementById('c3'); //重复路径部分画布      var GC = C.getContext('2d');      var x0 = obj.disX;      var y0 = obj.disY;      obj.GC.lineCap = 'round';      obj.GC.globalCompositeOperation="lighter";         // 移动到初始位置        obj.GC.moveTo(obj.disX,obj.disY);        obj.GC.beginPath();        for(let i=0;i<=arr.length;i++){          obj.timer=setTimeout(function(){            if(i==arr.length){              clearTimeout(obj.timer);              obj.GC.stroke();              obj.GC.closePath();              return ;            }            //获取经纬度转换坐标值            for(let v in arr[i]){              if(v == 'X'){                x0 = arr[i][v];              }else{                y0 = arr[i][v];              }            }             // 绘制压路机图片             obj.pGC.clearRect(0,0,obj.picStage.width,obj.picStage.height);             // obj.pGC.rotate()             obj.pGC.drawImage(obj.pic,x0-50,y0-70);             // 绘制压路机经过路径             obj.GC.lineTo(x0,y0)          },obj.speed);        }    }HTML：let ylj1 = new Ylj({        color:'red',        width:30,        speed:10,        disX:100,        disY:0      });      let ylj2 = new Ylj({        color:'blue',        width:30,        speed:1000,        disX:1000,        disY:0      });      console.log(ylj1==ylj2);    function go(){      let timer=setTimeout(go,300);      function go1(){        if(arr.length==0) {          clearTimeout(timer);          return ;        }        let arr1 = arr;        arr=[];        ylj1.start(arr1);        ylj2.start(arr1);      }     go1();    }    add();    go();ylj1和ylj2最后只有压路机2在画了，怎么回事啊，求教大神~~~~~

Answer 1

实例化出来的东西是不会互相影响的，按照你的代码逻辑，你执行的所有startDraw都会画在c3这个canvas上面，建议从这个地方入手看看。