Question

我有一个名为Terminal的类，其中我有一个函数构造函数，其中我有一个匿名函数，我想在其中访问Terminal类中的output（）函数。我怎么能这样做？

使用this.output（）会引发错误。（this.output不是函数）

class Terminal
{
    constructor(contentID, inputID, options)
    {
        if (!contentID || !inputID || !options)
        {
            return false;
        }
        this.cid = contentID;
        this.iid = inputID;
        if (!options['pcName'] || !options['username'])
        {
            return false;
        }
        this.pcname = (options['pcName'].replace('<', '&lt;')).replace('>', '&rt;');
        this.username = options['username'];
        this.version = '0.01';
        // commands
        this.commandsList = [];
        this.commandsList['whoami'] = function(){ Terminal.output('lol') };

        console.log('terminal.js version ' + this.version + ' initializing');
        this.output('ja', true);
        this.output('whoami', true);
        this.output('i dont know bro', false, 'whoami');
    }

    output (text, prefix, cmdName) // cmdName is matters only when prefix is false
    {
        if (this.cid && text)
        {
            if (prefix == true)
            {
                text = this.username + '@' + this.pcname + ':~$ ' + text;
            }
            else if (cmdName)
            {
                text = cmdName + ': ' + text;
            }
            var con = document.getElementById(this.cid);
            con.innerHTML = con.innerHTML + text + '<br>';
        }
    }

    makeCommand (cmd)
    {
        if (cmd && cmd != '' && this.commandsList)
        {
            cmd = (cmd.replace('<', '&lt;')).replace('>', '&rt;');
            if (this.commandsList[cmd])
            {
                console.log('Executing ' + cmd);
                this.commandsList[cmd]();
            }
        }
    }
}

Answer 1

出现问题是因为，不幸的是在js中如果你在另一个函数中定义一个函数，“this”不会指向外部作用域，而是指向全局对象，如果你正在使用浏览器“this”将是“窗口”对象。考虑以下示例，第一个console.log将打印{ foo: 'bar', log: [Function] }，它指向正确的对象，但第二个嵌套函数getThis console.log将指向全局对象，

var object = {
    foo: 'bar',

    log: function() {
        console.log("this:", this);

        var getThis = function() {
            console.log("this: ", this);
        };

        getThis();
    }
};

object.log();

以避免在js

中出现此行为

你可以声明一个变量var self = this;并且在整个代码中使用该自我，我会说这是一个很好的做法

var object = {
    foo: 'bar',

    log: function() {
        console.log("this:", this);

        var self = this;
        var getThis = function() {
            console.log("this: ", self);
        };

        getThis();
    }
};

object.log();

或者你可以将“this”绑定到像

这样的函数

var object = {
    foo: 'bar',

    log: function() {
        console.log("this:", this);

        var getThis = function() {
            console.log("this: ", this);
        }.bind(this);

        getThis();
    }
};

object.log();

Answer 2

我不确定答案，我认为您需要定义一个新变量：that等于this。然后像这样调用方法：that.Output()

class Terminal
{
    constructor(contentID, inputID, options)
    {
        if (!contentID || !inputID || !options)
        {
            return false;
        }
        this.cid = contentID;
        this.iid = inputID;
        if (!options['pcName'] || !options['username'])
        {
            return false;
        }
        this.pcname = (options['pcName'].replace('<', '&lt;')).replace('>', '&rt;');
        this.username = options['username'];
        this.version = '0.01';
        // commands
        this.commandsList = [];
        var that = this;
        this.commandsList['whoami'] = function(){ that.output('lol') };
 
        console.log('terminal.js version ' + this.version + ' initializing');
        this.output('ja', true);
        this.output('whoami', true);
        this.output('i dont know bro', false, 'whoami');
    }
   
    output (text, prefix, cmdName) // cmdName is matters only when prefix is false
    {
        if (this.cid && text)
        {
            if (prefix == true)
            {
                text = this.username + '@' + this.pcname + ':~$ ' + text;
            }
            else if (cmdName)
            {
                text = cmdName + ': ' + text;
            }
            var con = document.getElementById(this.cid);
            con.innerHTML = con.innerHTML + text + '<br>';
        }
    }
   
    makeCommand (cmd)
    {
        if (cmd && cmd != '' && this.commandsList)
        {
            cmd = (cmd.replace('<', '&lt;')).replace('>', '&rt;');
            if (this.commandsList[cmd])
            {
                console.log('Executing ' + cmd);
                this.commandsList[cmd]();
            }
        }
    }
}

功能在课堂上的功能

2 个答案: