无法使用ES6模块中的getter访问对象文字属性

Question

当我发现ES5 getter feature时，我正在寻找一种自我引用对象来访问它的属性的方法（参见。MDN）。

我正在使用NPM模块，无法访问canvas属性。

config.js

import path from "path";
import layout from "./layouts";

const config = {
  canvas: { width: 80, height: 80 },
  layout: {
    get base() {
      console.log(this);
      console.log(this.canvas);
      return layout.base.bottom(this.canvas);
    },
    get annotation() {
      return layout.annotation.top(this.canvas);
    }
  }
};
export default config;

layouts.js

export default {
  annotation: {
    top: options => ({
      x: options.width / 2,
    })
  },
  base: {
    bottom: options => ({
      x: options.width / 2,
    })
  }
};

错误

{ base: [Getter], annotation: [Getter] }
undefined 
TypeError: Cannot read property 'width' of undefined                                                                                                                                          
    at Object.bottom (/data/projects/hanzi-pinyin-font/src/layouts.js:13:10)                                                                                                                  
    at Object.get base [as base] (/data/projects/hanzi-pinyin-font/src/config.js:17:26)                                                                                                       
    at generateSvg (/data/projects/hanzi-pinyin-font/index.js:15:40)                                                                                                                          
    at /data/projects/hanzi-pinyin-font/index.js:39:5                                                                                                                                         
    at /data/projects/hanzi-pinyin-font/node_modules/jsonfile/index.js:46:5                                                                                                                   

问题

为什么这不起作用？

Answer 1

您有嵌套的对象文字。内部layout对象文字不知道它有父文件，因此this的getter中的layout引用config.layout。

您可以使用对象速记语法来改善它。

import path from "path";
import layouts from "./layouts";

const canvas = {
  canvas: { width: 80, height: 80 }
}

const layout = {
  get base() {
    return layouts.base.bottom(canvas);
  },
  get annotation() {
    return layouts.annotation.top(canvas);
  }
}

export default {
  canvas, layout
};

Answer 2

.canvas不是layout对象的属性，而是config对象的属性，因此您无法使用this（引用layout来访问它，如您的日志所示）。相反，使用

import path from "path";
import layout from "./layouts";

export default const config = {
  canvas: { width: 80, height: 80 },
  layout: {
    get base() {
      return layout.base.bottom(config.canvas);
    },
    get annotation() {
      return layout.annotation.top(config.canvas);
    }
  }
};

Answer 3

正如@Chris所解释的那样，this并未引用我的顶级对象config，而是父对象layout。

向上移动吸气剂可以解决这个问题。

const config = {
  get layout() {
    return {
      base: layout.base.bottom(this.canvas),
      annotation: layout.annotation.top(this.canvas)
    };
  }
}