js在构造函数中定义的dom元素无法使用this调用

构造函数如下

 constructor(id){

        this.init()
        //获取父容器的dom节点
        this.box = document.querySelector(id)
        this.picbox = this.box.querySelector(".image-box")
        this.indexbox = this.box.querySelector(".index_box")
        this.index = 1
    }

调用如下

copyPic(){
       //实现复制队首，队尾的两个图
        const imagebox = document.querySelector(".image-box")
        //const first = imagebox.firstElementChild.cloneNode(true)
        const first = this.picbox.firstElementChild.cloneNode(true)
      //报错说这里的this.picbox没有firstElementChild这个方法
    }   

浏览器就会报错如下

疑惑点

• 上面的这种在方法内获取dom元素是可行的
• 但是使用构造函数中定义的 this.picbox却不行？

  const imagebox = document.querySelector(".image-box")
  const first = imagebox.firstElementChild.cloneNode(true)
  

• 请教一下这个原因是什么？？

document 结构发来， 或者你检查一下你的 id 元素下的层次结构

this 的指向你要搞清楚，要么就是类本身，要么就是caller之类的

你的copyPic方法，如果不在类中，那么this指向就是window了，自然就没有picbox这个属性或方法了

console.log(this); // 这个 this 是 window
var x = {
  a:1,
  b:2,
  init:function(){
    console.log(this) // 这个 this 是 x 本身
  },
  sync:function(){
    $.ajax({
      url:'',
      success:function(data){
        console.log(this)  // 这个 this 是 jquery 的 ajax 对象
      }})
  }
};
x.init();x.sync()

class Slider{
    constructor(id){

        this.init()
        //获取父容器的dom节点
        this.box = document.querySelector(id)
        this.picbox = this.box.querySelector(".image-box")
        this.indexbox = this.box.querySelector(".index_box")
        this.index = 1
        this.sliderwidth = this.box.clientWidth
    }
    init(){
        console.log("加载轮播图组件")
        this.initPoint()
        this.copyPic()
    }
    initPoint(){
        const num = $(".image-box").children().length;
        console.log("num值是"+num)
        let frg = document.createDocumentFragment();
        for(let i=0;i<num; i++ ){
            let li = document.createElement("li")
            li.setAttribute("data-index",i+1)
            if(i==0)li.className ="active"
            frg.appendChild(li)
        }
        let ol = document.createElement("ol")
        document.querySelector(".index_box").appendChild(ol)
        ol.appendChild(frg)

        ol.addEventListener("click",(e)=>{
            console.log("点击了小圆点")
            //e.target获取当前点击到那个点
            let pointIndex = (e.target).getAttribute("data-index")
            this.index = pointIndex
            console.log(this.index)

        })
        
    } 
   
    copyPic(){
       //实现复制队首，队尾的两个图
        const imagebox = document.querySelector(".image-box")
        const first = imagebox.firstElementChild.cloneNode(true)
        //const first = this.picbox.firstElementChild.cloneNode(true)
        //const last = this.picbox.lastElementChild.cloneNode(true)
        const last = imagebox.lastElementChild.cloneNode(true)

        //this.picbox.appendChild(first)
        imagebox.appendChild(first)
        //this.picbox.insertBefore(last,this.picbox.firstElementChild)
        imagebox.insertBefore(last,imagebox.firstElementChild)
        imagebox.style.width = this.sliderwidth * imagebox.children.length+ "px"
        imagebox.style.left = -1 * this.sliderwidth + "px"
    }   
}

<script>
        const menu = new Menu("#menu");
        const slider = new Slider("#slider");
 </script>