Question

我不太确定我的代码是怎么回事。我认为Webpack出于某种原因将this的值设置为undefined，我不知道为什么。

webpack文件正确构建-但如果我在app.js中使用console.log（this），则无法定义-是否缺少某些内容？

this

应该先参考窗口，然后再参考我在setVars中登录它的控制器？

这是我的webpack文件

const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const path = require('path'
const entry = [path.resolve(__dirname, 'public/js/app.js'), path.resolve(__dirname, 'public/styles/scss/main.scss')];

    module.exports = {
      entry: entry,
      output: {
        filename: 'scripts/bundle.js',
        path: path.resolve(__dirname, 'dist'),
        publicPath: '/'
      },
      module: {
        rules: [
          {
            test: /\.js$/,
            exclude: /node_modules/,
            use: {
              loader: "babel-loader",

            }
          },
          {
            test: /\.css$/,
            use: [
              "style-loader", "css-loader"
             ]
          },
          {
            test: /\.scss$/,
            use: [
              MiniCssExtractPlugin.loader,
              "css-loader", "sass-loader?"
            ]
          }]},
          plugins: [
            new MiniCssExtractPlugin({
              filename: "styles/[name].css",
              chunkFilename: "[id].css"
            }),
            // new HtmlWebpackPlugin()

          ]
        }

还有Babel RC

{
  "presets": ["@babel/preset-env"]
}

从“ axios”导入axios；

  const Controller = {

    init: async () => {
      const res = await axios.get('/api/nav.json');
      const data = res.data.items;
      Controller.createNavigationMenu(data);
      Controller.getVars()
    },

    getVars: () => {
      const navigationContainer = document.querySelectorAll('.navigation__primary-menu');
      console.log(navigationContainer, this)
    },

    createNavigationMenu: (data) => {
      console.log(data)
    }
  }

Controller.init()
console.log(this)

Answer 1

在getVars中this是undefined，因为您使用的函数是Lambda函数（() => {...}）而不是（function() { ... }）。如果它是一个实函数，则上下文将是函数的上下文。它永远不会是Controller的上下文，因为那仅仅是一个对象而不是一个类。因此，您可以为Controller创建一个真实的类，以便创建一个this上下文。

class Controller = {
  // ...
  getVars() {
    // ...

  }
}

在文件的下部：我不知道webpack到底是做什么的，但是您不应该依靠它，而将this保留为window。实际上，您应该始终明确使用window。这也增加了可读性，因为很清楚您要指的是什么，并且可以确保在定义this的上下文中不要误用this，而不是window。< / p>

为什么“ this”的值未定义-Webpack问题？

1 个答案: