jQuery插件开发：对象字面量中属性引用返回undefined问题

问题场景 #

原代码中通过变量互相引用可正常运行：

var className = ".container";
var element   = `<div class="${className.slice(1)}"></div>`; 

但重构为jQuery插件时，defaultSettings对象的element函数中引用this.className返回undefined：

$.fn.pluginName = function (options) {

    var defaultSettings = {
        className: ".container",
        element:  function() {
            return `<div class="${this.className.slice(1)}"></div>`;
        }
    };

    var settings = $.extend({}, defaultSettings, options);
};

问题原因 #

element函数内部的this指向并非settings或defaultSettings对象：直接调用settings.element()时，非严格模式下this指向全局对象，严格模式下指向undefined，因此无法获取到className属性。

解决方案 #

方案1：初始化时直接生成element字符串

如果element不需要动态计算，可先单独定义className，再构建element：

$.fn.pluginName = function (options) {
    var className = ".container";
    var defaultSettings = {
        className: className,
        element: `<div class="${className.slice(1)}"></div>`
    };

    var settings = $.extend({}, defaultSettings, options);
};

方案2：调用函数时绑定上下文

若需要element支持动态计算（比如用户修改className后重新生成），调用时手动绑定settings为函数的this：

$.fn.pluginName = function (options) {
    var defaultSettings = {
        className: ".container",
        element: function() {
            return `<div class="${this.className.slice(1)}"></div>`;
        }
    };

    var settings = $.extend({}, defaultSettings, options);
    // 绑定settings作为函数的this上下文
    var elementStr = settings.element.call(settings);
};

方案3：利用闭包访问settings对象

通过闭包让element函数直接访问settings，避免this指向问题：

$.fn.pluginName = function (options) {
    var defaultSettings = {
        className: ".container"
    };

    var settings = $.extend({}, defaultSettings, options);
    
    // 闭包直接引用settings
    settings.element = function() {
        return `<div class="${settings.className.slice(1)}"></div>`;
    };
};

额外说明 #

如果允许用户通过options传入自定义element，建议让用户传入函数，并在调用时同样绑定settings上下文，确保自定义逻辑也能访问到插件的配置属性。

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