扩展Leaflet类时如何正确访问options选项？

我尝试扩展Leaflet类，参考官方文档示例编写了如下代码：

var MyBoxClass = L.Class.extend({

    options: {
        width: 1,
        height: 1
    },

    initialize: function(name, options) {
        this.name = name;
        L.setOptions(this, options);
    }
    
});

var instance = new MyBoxClass('Red', {width: 10});

console.log(instance.name); // Outputs "Red"
console.log(instance.options.width); // Outputs "10"
console.log(instance.options.height); // Outputs "1", the default

但实际运行时，调用L.setOptions后访问this.options.height返回undefined，反而在this.options.prototype.height里能找到默认值。请问该如何正确访问选项成员，在调用者未定义时获取默认值？

出现这个问题的核心原因是未正确初始化实例的options属性，导致L.setOptions无法完成默认选项与传入选项的合并。

Leaflet的L.setOptions方法要求实例自身拥有独立的options对象（而非仅存在于原型链），才能将类原型上的默认选项与传入选项合并。

可以通过以下两种方法修正：

方法1：先初始化实例自身的options对象 #

var MyBoxClass = L.Class.extend({

    options: {
        width: 1,
        height: 1
    },

    initialize: function(name, options) {
        this.name = name;
        // 复制原型上的默认选项，创建实例专属的options对象
        this.options = L.extend({}, this.options);
        // 合并传入的选项
        L.setOptions(this, options);
    }
    
});

方法2：直接用L.extend手动合并选项 #

无需依赖L.setOptions，直接完成默认选项与传入选项的合并：

var MyBoxClass = L.Class.extend({

    options: {
        width: 1,
        height: 1
    },

    initialize: function(name, options) {
        this.name = name;
        // 合并默认选项与传入选项，赋值给实例的options
        this.options = L.extend({}, this.options, options);
    }
    
});

两种方法都能实现：

• 实例的this.options包含所有默认选项
• 传入的选项会覆盖对应默认值
• 未传入的选项保留默认值，可直接通过this.options.height访问

修正后调用instance.options.height即可正确返回默认值1。

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