代码之家 › 专栏 › 技术社区 › Hammer

Javascript模块继承

javascript

Hammer · 技术社区 · 8 年前

var Component = function () {
    var _componentName;
    var _test = 'ts';
    return {
        getName: function(){
            console.log('getName() is called');
            console.log(this._componentName);
            console.log(_test);
            return _componentName;
        }
    };
};

module.exports = Component;

子模块,

var Component = require('./component');

var Skip_button = function () {
    var skipBtn = Component();
    skipBtn._componentName = 'Skip_Btn';
    return skipBtn;
};

module.exports = Skip_button;

在另一个地方,当我打电话

var skipBtn = Skip_button();
skipBtn.getName();

如果是的话 console.log(this._componentName); 在组件中,可以成功打印出值。但是,如果是 console.log(_componentName); ,将出现未定义错误。知道吗?

[更新] 看看这个。它按预期工作。 http://jsfiddle.net/nedvedyy/Lvxqjo9v/1 所以问题仍然是,如果 console.log(this._componentName); 已更改为 console.log(_componentName);

2 回复 | 直到 8 年前

gurvinder372 8 年前

但是,如果是控制台。日志(_componentName);,未定义错误将是那里

这是因为当你这么做的时候 return Skip_button; 在匿名方法中,如果 Skip_button 不在全局上下文中,则将返回 undefined .

如果您只是想能够从方法继承并希望能够调用 getName 然后简单地更换

return Skip_button;

具有

return skipBtn ;

演示

var Component = function () {
    var _componentName;
    var _test = 'ts';
    return {
        getName: function(){
            console.log('getName() is called');
            console.log(this._componentName);
            console.log(_test);
            return _componentName;
        }
    };
};

var Skip_button = function () {
    var skipBtn = Component();
    skipBtn._componentName = 'Skip_Btn';
    return skipBtn ;
};

var skipBtn = Skip_button();
skipBtn.getName();

kgsnaidu 8 年前

在里面 Component 功能 _componentName 和 _test 不在中 this 范围但不管你怎么设置 skipBtn._componentName 在中 Skip_button 在中范围这就是为什么 console.log(this._componentName) 打印“Skip_Btn”

var Component = function () {
    var _componentName;
    var _test = 'ts';
    return {
        getName: function(){
            console.log('getName() is called');
            console.log(this._componentName);
            console.log(this._test);
            return _componentName;
        }
    };
};

var Skip_button = function () {
    var skipBtn = Component();
    skipBtn._componentName = 'Skip_Btn';
    return skipBtn ;
};

var skipBtn = Skip_button();
skipBtn.getName();

如果您运行上述脚本 this._test 将打印“未定义”,因为 _试验 不在中 这 范围

var Component = function () {
        var _componentName = 'test';
        var _test = 'ts';
        return {
            getName: function(){
                console.log('getName() is called');
                console.log(_componentName);
                console.log(_test);
                return _componentName;
            }
        };
    };

    var Skip_button = function () {
        var skipBtn = Component();
        skipBtn._componentName = 'Skip_Btn';
        return skipBtn ;
    };

    var skipBtn = Skip_button();
    skipBtn.getName();

如果运行上述代码, console.log(_componentName) 将打印“test”,因为它有一些值