Javascript 模块继承

Javascript Module inheritence

本文关键字:继承 模块 Javascript      更新时间:2023-09-26

父模块,

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);,为什么它在上面的原始代码示例中不起作用

但是,如果是控制台.log(_componentName);,则取消定义错误将是 那里

这是因为当您在匿名方法中return Skip_button;时,如果Skip_button不在全局上下文中,那么它将返回undefined

如果您只是希望能够从方法继承Skip_button并希望能够调用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();

Component功能_componentName_test不在this范围内。 但是,您在Skip_button函数中设置skipBtn._componentName意味着您在this范围内设置_componentName。这就是为什么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将打印"未定义",因为_test不在this范围内。

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",因为它有一些价值