如何在原型方法的嵌套函数中传递并使用this.dayNames？

原代码里的嵌套函数createCalendar直接调用时，this并不指向DateNames的实例，因此无法通过this.dayNames正确访问目标数组。以下几种是业界常用的解决方案，各有适用场景：

1. 提前保存外部上下文的this（经典兼容写法） #

在render函数内将外部的this存入一个变量（比如self或that），嵌套函数直接通过这个变量访问dayNames。这种写法兼容所有JavaScript环境，语义清晰易懂：

function DateNames()
{
    this.dayNames = ["Su", "M", "T", "W", "Th", "F", "S"];
}

DateNames.prototype.render = function(date)
{
    console.log(date);
    const self = this;
    createCalendar();
    function createCalendar()
    {
        console.log(self.dayNames);
    }
}

2. 使用ES6箭头函数（简洁现代写法） #

箭头函数不会绑定自身的this，它的this继承自外层作用域的上下文，因此可以直接在箭头函数里访问this.dayNames，代码更简洁：

function DateNames()
{
    this.dayNames = ["Su", "M", "T", "W", "Th", "F", "S"];
}

DateNames.prototype.render = function(date)
{
    console.log(date);
    const createCalendar = () => {
        console.log(this.dayNames);
    }
    createCalendar();
}

3. 显式绑定this（灵活可控写法） #

调用createCalendar时，通过call/apply直接绑定外部的this，或者用bind提前绑定好上下文，适合需要动态切换上下文的场景：

用call即时绑定： #

function DateNames()
{
    this.dayNames = ["Su", "M", "T", "W", "Th", "F", "S"];
}

DateNames.prototype.render = function(date)
{
    console.log(date);
    createCalendar.call(this);
    function createCalendar()
    {
        console.log(this.dayNames);
    }
}

用bind预绑定： #

function DateNames()
{
    this.dayNames = ["Su", "M", "T", "W", "Th", "F", "S"];
}

DateNames.prototype.render = function(date)
{
    console.log(date);
    const boundCalendar = createCalendar.bind(this);
    boundCalendar();
    function createCalendar()
    {
        console.log(this.dayNames);
    }
}

4. 直接传递参数（清晰依赖写法） #

把this.dayNames作为参数直接传给createCalendar，让函数的依赖关系更明确，也方便单独测试嵌套函数：

function DateNames()
{
    this.dayNames = ["Su", "M", "T", "W", "Th", "F", "S"];
}

DateNames.prototype.render = function(date)
{
    console.log(date);
    createCalendar(this.dayNames);
    function createCalendar(dayNames)
    {
        console.log(dayNames);
    }
}

选择建议 #

• 若项目基于现代JS环境（支持ES6+），箭头函数是最简洁高效的选择；
• 若需要兼容老旧环境，保存this到变量是最稳妥的方案；
• 若追求函数的独立性和可测试性，直接传递参数更符合函数式编程的设计思路；
• 若需要动态切换函数的上下文，显式绑定this会更灵活。

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