解决CoffeeScript类构造函数中属性双向依赖导致的未定义问题

这确实是个典型的双向依赖陷阱——你需要btnText的宽度来设置Button配置项的width，但btnText又依赖Button配置项的type，两者卡在构造函数里互相等待，自然会出现undefined。咱们一步步拆解问题，给出可行的解决方案：

问题根源分析 #

先看你代码的执行顺序：

class Button extends Layer
  constructor: (@opt={}) ->
    super  # 先调用父类构造，但此时opt还不完整
    _.defaults @opt,
      width: @btnText.width  # 这里@btnText还没创建，必然是undefined
      type: "default"
    @btnText = new Text  # 直到这里才创建btnText，晚于width的读取
      width: 200
      type: @opt.type

核心问题是初始化顺序颠倒：你在创建btnText之前就试图读取它的属性，同时opt的默认值设置也没有拆分出“不依赖btnText”和“依赖btnText”的部分。

解决方案1：同步场景下调整初始化顺序 #

最直接的办法是拆分初始化流程，先处理不依赖btnText的配置，创建btnText后再补全依赖它的配置，最后调用父类构造（确保父类拿到完整的配置）：

class Button extends Layer
  constructor: (@opt={}) ->
    # 1. 先设置不依赖btnText的默认配置
    _.defaults @opt,
      type: "default"
    
    # 2. 创建btnText，此时@opt.type已经有有效值了
    @btnText = new Text
      width: 200
      type: @opt.type
    
    # 3. 再设置依赖btnText的默认配置
    _.defaults @opt,
      width: @btnText.width
    
    # 4. 最后调用父类构造，传入完整的opt
    super @opt

这样调整后，btnText创建时能拿到正确的type，Button的width也能获取到btnText的真实宽度，完美解决双向依赖问题。

解决方案2：异步场景下用Promise处理 #

如果btnText的宽度需要异步获取（比如从API加载、读取DOM尺寸等），可以用Promise来等待异步操作完成后再补全配置：

class Button extends Layer
  constructor: (@opt={}) ->
    # 先设置基础默认值
    _.defaults @opt,
      type: "default"
    
    # 假设Text的创建是异步的，返回Promise
    Text.create({ width: 200, type: @opt.type })
      .then((btnText) =>
        @btnText = btnText
        # 异步获取到宽度后更新Button的配置和视图
        @opt.width = btnText.width
        @resize(@opt.width, @height)  # 调用Layer的尺寸更新方法
      )
    
    # 先调用父类构造，用临时宽度占位
    super _.defaults(@opt, width: 200)

这种方式适合需要等待异步结果的场景，先给父类传递一个临时默认宽度，等异步操作完成后再更新真实宽度。

额外建议 #

尽量避免在构造函数中处理复杂的依赖关系：

• 把初始化逻辑拆分成单独的方法（比如init()），在实例创建后手动调用；
• 如果两个类的依赖无法避免，考虑让其中一方接受回调函数，在依赖项就绪后触发；
• 优先传递默认值占位，后续再更新，减少初始化阶段的耦合。

内容的提问来源于stack exchange，提问作者Pavel Laptev