报错找不到原因，

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ES6图片切换</title>
</head>
<body>
    <div id="wrap">
        
    </div>
    <script type="text/javascript">
        /////////////////********data.js******/////////////////
        const data = [

          {
            type: 'JavaScript',
            title: 'ES6快速入门',
            alt: 'ES6快速入门',
            src: 'images/1.jpg'
          },

          {
            type: 'JavaScript',
            title: 'Javascript实现二叉树算法',
            alt: 'Javascript实现二叉树算法',
            src: 'images/2.jpg'
          },

          {
            type: 'JavaScript',
            title: 'Canvas绘制时钟',
            alt: 'Canvas绘制时钟',
            src: 'images/3.jpg'
          },

          {
            type: 'JavaScript',
            title: '基于websocket的火拼俄罗斯',
            alt: '基于websocket的火拼俄罗斯',
            src: 'images/15.jpg'
          },

          {
            type: '前端框架',
            title: 'React知识点综合运用实例',
            alt: 'React知识点综合运用实例',
            src: 'images/4.jpg'
          },

          {
            type: '前端框架',
            title: 'React组件',
            alt: 'React组件',
            src: 'images/5.jpg'
          },

          {
            type: '前端框架',
            title: 'Vue+Webpack打造todo应用',
            alt: 'Vue+Webpack打造todo应用',
            src: 'images/6.jpg'
          },

          {
            type: '前端框架',
            title: 'Vue.js入门基础',
            alt: 'Vue.js入门基础',
            src: 'images/7.jpg'
          },

          {
            type: '前端框架',
            title: '使用Vue2.0实现购物车和地址选配功能',
            alt: '使用Vue2.0实现购物车和地址选配功能',
            src: 'images/8.jpg'
          },

          {
            type: 'React',
            title: 'React知识点综合运用实例',
            alt: 'React知识点综合运用实例',
            src: 'images/4.jpg'
          },

          {
            type: 'React',
            title: 'React组件',
            alt: 'React组件',
            src: 'images/5.jpg'
          },

          {
            type: 'Vue.js',
            title: 'Vue+Webpack打造todo应用',
            alt: 'Vue+Webpack打造todo应用',
            src: 'images/6.jpg'
          },

          {
            type: 'Vue.js',
            title: 'Vue.js入门基础',
            alt: 'Vue.js入门基础',
            src: 'images/7.jpg'
          },

          {
            type: 'Vue.js',
            title: '使用Vue2.0实现购物车和地址选配功能',
            alt: '使用Vue2.0实现购物车和地址选配功能',
            src: 'images/8.jpg'
          }

        ];
        /////////////////********data.js******/////////////////
        /////////////////********index.js******/////////////////
        ///1.对图片分类
        ///2.生成DOM元素
        ///3.绑定事件
        ///4.显示到页面上
        (function(window,document){
            const methods = {
                eppendChild(parent,...children){
                    children.forEach(el =>{
                        parent.appendChild(el);
                    });
                },
                $(selector,root = document){
                    return root.querySelector(selector);
                },
                $$(selector,root = document){
                    return root.querySelectorAll(selector);
                }
            };

            let Img = function(option){
                this._init(option);
                this._createElement();
                this._bind();
                this._show();
            };

            Img.prototype._init = function(data,initType,dom){
                this.types = ['全部'];//所有分类
                this.all = [];//所有图片元素
                this.classified = {'全部':[]};//按照类型分类后的图片
                this.currentType = initType;//页面显示的当前图片分类
                this.dom = methods.$(dom);//挂载点

                this._classify(data);
                console.log(this.all);
                console.log(this.dom);
                console.log(this.classified);
            };

            Img.prototype._classify = function(data){
                //类型1 类型2 类型3 类型2 类型3
                //0 1 2 3 4 --index
                // classified:{
                // '类型 1':[0],  --index
                // '类型2':[1,3], --index
                // '类型3':[2,4]  --index
                // }
                let srcs = [];
              
                data.forEach(function({title,type,alt,src}){
                    if(!this.types.inculdes(type)){
                        this.types.push(type);
                    }
                    if(!Object.keys(this.classified).includes(type)){
                        this.classified[type] = [];
                    }

                    if(!srcs.includes(src)){
                        //图片没有生成过
                        //生成图片
                        //添加到对应的分类中
                        srcs.push(src);
                        let figure = document.createElement('figure');
                        let img = document.createElement('img');
                        let figcaption = document.createElement('figcaption');

                        img.src = src;
                        img.setAttribute('alt',alt);
                        figcaption.innerText = title;

                        methods.appendChild(figure,img,figcaption);

                        this.all.push(figure);

                        this.classified[type].push(this.all.length-1);
                    }else{
                        //去all中找到对用的图片
                        //添加到对应的分类中
                        this.classified[type].push(srcs.findIndex(s1 => s1 === src))

                    }
                });
            };

            Img.prototype._createElement = function(){

            };
            Img.prototype._bind = function(){

            };
            Img.prototype._show = function(){

            };

            window.$Img = Img;
        })(window,document)
        /////////////////********index.js******/////////////////
const img = new $Img();
    </script>
</body>
</html>

RahodJoe 2020-04-28

源自：项目：ES6实现图片切换特效 2-7 classify方法实现

收起

4回答

好帮手慕码回答被采纳获得+3积分 2020-04-29 13:33:36

同学你好，因为使用普通函数的话，this指向的是window（在普通函数中的this总是代表它的直接调用者，在默认情况下，this指的是window）

而这里使用箭头函数的话，this指的是当前这个实例（箭头函数没有自己的this, 它的this是继承而来; 默认指向在定义它时所处的对象(宿主对象)）

所以，这里需要使用箭头函数去实现。

另，代码中其他问题：单词写错

如果我的回答帮到了你，欢迎采纳，祝学习愉快~

收起回答

RahodJoe 提问者 #1

啊，老师，那和我想的不一样，但是你这么一说我又觉得你说的有道理，也能听明白你说的，就是说我压根没想到是this 的指向问题，因为我这个代码报错也没导向我去思考this ，报错一直让我以为forEach传参有问题，函数定义方式让window下的data对象的数据传不进来，但是我又不懂怎么看，因为报错了，不知道在哪里看，怎么调试，不会从哪下手解决，主要是上面的_init初始化函数也是普通函数，我没想到在_classify下面的data.forEach里面使用普通函数，还能有这么一出，晕头转向了。

2020-04-29 20:35:34

提问者 RahodJoe 2020-04-30 11:00:27

老师，我实例化传参的时候，forEach又报错了，你们帮忙看看，谢谢了
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>ES6图片切换</title>
</head>
<body>
    <div id="wrap">
        
    </div>
    <script type="text/javascript">
        /////////////////********data.js******/////////////////
        const data = [

          {
            type: 'JavaScript',
            title: 'ES6快速入门',
            alt: 'ES6快速入门',
            src: 'images/1.jpg'
          },

          {
            type: 'JavaScript',
            title: 'Javascript实现二叉树算法',
            alt: 'Javascript实现二叉树算法',
            src: 'images/2.jpg'
          },

          {
            type: 'JavaScript',
            title: 'Canvas绘制时钟',
            alt: 'Canvas绘制时钟',
            src: 'images/3.jpg'
          },

          {
            type: 'JavaScript',
            title: '基于websocket的火拼俄罗斯',
            alt: '基于websocket的火拼俄罗斯',
            src: 'images/15.jpg'
          },

          {
            type: '前端框架',
            title: 'React知识点综合运用实例',
            alt: 'React知识点综合运用实例',
            src: 'images/4.jpg'
          },

          {
            type: '前端框架',
            title: 'React组件',
            alt: 'React组件',
            src: 'images/5.jpg'
          },

          {
            type: '前端框架',
            title: 'Vue+Webpack打造todo应用',
            alt: 'Vue+Webpack打造todo应用',
            src: 'images/6.jpg'
          },

          {
            type: '前端框架',
            title: 'Vue.js入门基础',
            alt: 'Vue.js入门基础',
            src: 'images/7.jpg'
          },

          {
            type: '前端框架',
            title: '使用Vue2.0实现购物车和地址选配功能',
            alt: '使用Vue2.0实现购物车和地址选配功能',
            src: 'images/8.jpg'
          },

          {
            type: 'React',
            title: 'React知识点综合运用实例',
            alt: 'React知识点综合运用实例',
            src: 'images/4.jpg'
          },

          {
            type: 'React',
            title: 'React组件',
            alt: 'React组件',
            src: 'images/5.jpg'
          },

          {
            type: 'Vue.js',
            title: 'Vue+Webpack打造todo应用',
            alt: 'Vue+Webpack打造todo应用',
            src: 'images/6.jpg'
          },

          {
            type: 'Vue.js',
            title: 'Vue.js入门基础',
            alt: 'Vue.js入门基础',
            src: 'images/7.jpg'
          },

          {
            type: 'Vue.js',
            title: '使用Vue2.0实现购物车和地址选配功能',
            alt: '使用Vue2.0实现购物车和地址选配功能',
            src: 'images/8.jpg'
          }

        ];
        /////////////////********data.js******/////////////////
        /////////////////********index.js******/////////////////
        ///1.对图片分类
        ///2.生成DOM元素
        ///3.绑定事件
        ///4.显示到页面上
        (function(window,document){
            const methods = {
                appendChild(parent,...children){
                    children.forEach(el =>{
                        parent.appendChild(el);
                    });
                },
                $(selector,root = document){
                    return root.querySelector(selector);
                },
                $$(selector,root = document){
                    return root.querySelectorAll(selector);
                }
            };
            //构造函数
            let Img = function(option){
                this._init(option);
                this._createElement();
                this._bind();
                this._show();
            };
            //初始化
            Img.prototype._init = function(data,initType,dom){
                this.types = ['全部'];//所有分类
                this.all = [];//所有图片元素
                this.classified = {'全部':[]};//按照类型分类后的图片
                this.currentType = initType;//页面显示的当前图片分类
                this.dom = methods.$(dom);//挂载点

                this._classify(data);
                // console.log(this.classified);
            };
            //对图片分类
            Img.prototype._classify = function(data){
                //类型1 类型2 类型3 类型2 类型3
                //0 1 2 3 4 --index
                // classified:{
                // '类型 1':[0],  --index
                // '类型2':[1,3], --index
                // '类型3':[2,4]  --index
                // }
                let srcs = [];

                data.forEach(({title,type,alt,src}) => {
                    if(!this.types.includes(type)){
                        this.types.push(type);
                    }
                    if(!Object.keys(this.classified).includes(type)){
                        this.classified[type] = [];
                    }

                    if(!srcs.includes(src)){
                        //图片没有生成过
                        //生成图片
                        //添加到对应的分类中
                        srcs.push(src);
                        let figure = document.createElement('figure');
                        let img = document.createElement('img');
                        let figcaption = document.createElement('figcaption');

                        img.src = src;
                        img.setAttribute('alt',alt);
                        figcaption.innerText = title;

                        methods.appendChild(figure,img,figcaption);

                        this.all.push(figure);

                        this.classified[type].push(this.all.length-1);
                    }else{
                        //去all中找到对用的图片
                        //添加到对应的分类中
                        this.classified[type].push(srcs.findIndex( s1 => s1 === src));

                    }                    
                });
            };
            //生成DOM元素
            Img.prototype._createElement = function(){
                let typesBtn = [];
                for(let type of this.types){
                    typesBtn.push(`<li class="__Img_classify__type-btn${this.currentType === type ? ' __Img__type-btn-active' : ''}">${type}</li>`);
                }
                // console.log(typesBtn);
            };
            //绑定事件
            Img.prototype._bind = function(){

            };
            //显示元素
            Img.prototype._show = function(){

            };

            window.$Img = Img;
        })(window,document)
        /////////////////********index.js******/////////////////
const img = new $Img({
    data,
    initType:'JavaScript',
    dom:'#wrap'
});
    </script>
</body>
</html>

收起回答

提问者 RahodJoe #1

老师不用了，我自己解决啦！粗心！定义函数_init参数方式没用对象{} 但是实例化传参用了对象{}

2020-04-30 11:03:47

好帮手慕粉 2020-04-30 10:28:59

同学你好，既然同学第一个考虑的是传参问题，那么就要先检查是否真的是传参出了问题，在这里同学的传参是正确的，所以就要考虑是不是别的问题。既然报错是跟forEach有关的，那么同学就要检查这附近的代码是否有不正确的，因为涉及到this指向，所以同学就要考虑是否是this指向出了问题。如果不是这个，那么还要接着排查。

如果有报错信息的话，就是这样一步一步排查的，不是说看见报错信息就知道是哪出了问题，老师也是一样的呢，要逐一进行排查的。但是单词写错一般是很难排查出来的，因为有的时候会报莫名其妙的错，所以同学写代码的时候也要认真呢。

祝学习愉快~

收起回答

提问者 RahodJoe #1

老师我新的提问在我自己的最新评论中发出了，麻烦你们帮忙看看

2020-04-30 11:00:58
提问者 RahodJoe #2

老师不用了，我自己解决啦！粗心！定义函数_init参数方式没用对象{} 但是实例化传参用了对象{}

2020-04-30 11:03:36