以javascript模块化模式将参数传递给父类答案

【问题标题】：pass argument to the parent class in javascript modular pattern以javascript模块化模式将参数传递给父类
【发布时间】：2012-06-06 08:45:55
【问题描述】：

我创建了两个类，即 person - 父类和学生类 - 子类。我正在尝试实现继承。我也在尝试以模块化模式实现它。但它没有得到正确的。代码块请查看下方。

Person.js

var Person = function() {

    var details, constructor, getDetailsByAttribute, setDetailsByAttribute, setDetails, getDetails, clearDetails;

    clearDetails = function()   {
        details = {
            uid : '',
            name : '',
            email : ''
        };
    };

    getDetailsByAttribute = function(attr)  {
        return details[attr];
    };

    setDetailsByAttribute = function(key, value)    {
        if(details.hasOwnProperty(key)) {
            details[key] = value;
        }else   {
            console.log('invalid key');
        }
    };

    setDetails = function(param)    {
        clearDetails();
        for(var attr in param)  {
            if(details.hasOwnProperty(attr))    {
                details[attr] = param[attr];
            }
        }
    };

    getDetails = function() {
        return details;
    };

    /**
     * During object creation;
     */
    if(arguments.length >= 1)   {
        //clearDetails();
        setDetails(arguments[0]);
    }

    return {
        getDetailsByAttribute : function(attr)  {
            return getDetailsByAttribute(attr);
        },

        setDetailsByAttribute : function(key, value)    {
            setDetailsByAttribute(key, value);
        },

        setDetails : function(params)   {
            setDetails(params);
        },

        getDetails : function() {
            return getDetails();
        },

        clearDetails : function()   {
            clearDetails();
        }
    };
};

Student.js

var Student = function()    {
    Person.call(this,arguments);
};

Student.prototype = new Person();

index.html

<html>
    <head>
    </head>
    <body>
        <script type="text/javascript" src="modules/Person.js"></script>
        <script type="text/javascript" src="modules/Student.js"></script>
        <script type="text/javascript">
            var person1, person2, person3, student1;

            person1 = new Person({
                uid : 5225,
                name : 'jaison',
                email : 'jaison@jaison.com'
            });

            person2 = new Person({
                uid : 5222,
                name : 'jatin',
                email : 'jatin@jatin.com'
            });

            person3 = new Person();
            person3.setDetails({
                uid : 5221,
                name : 'sarath',
                email : 'sarath@sarath.com'
            });
            person3.setDetailsByAttribute('name', 'sarath');

            student1 = new Student({
                uid : 5221,
                name : 'sachin',
                email : 'sachin@sachin.com'
            });

            console.log('person 1 : ',person1.getDetails());
            console.log('person 2 : ',person2.getDetails());
            console.log('person 3 : ',person3.getDetails());
            console.log('student 1 : ',student1.getDetails());
            //console.log(student1.get);

        </script>
    </body>
</html>

【问题讨论】：

How to get a constructor function to inherit from a constructor function in Javascript? 的可能重复项
一个简单地调用另一个函数的匿名函数（比如你在Person构造函数返回的对象字面量中使用）是完全没有必要的。只需使用该功能。 {getDetailsByAttribute: getDetailsByAttribute, ...} 完全合法并且可以正常工作，因为对象的属性是独立于其他对象属性和局部变量的命名空间。
感谢您提出宝贵意见。但是参考您评论的上述问题，我稍微更改了代码但仍然无法正常工作。
你也可以使用这个{... setDetailsByAttribute: setDetailsByAttribute, ... }

标签： javascript javascript-objects

【解决方案1】：

试试这个：

var Student = function()    {
    return Person.apply(this, arguments);
};

没有

Student.prototype = new Person();

更新：我只是意识到你可以使用这个：

var Student = function()    {
    this.setDetails.apply(this, arguments);
};
Student.prototype = new Person();

所以闭包将在原型内部，setDetails 将访问它。

当你这样做时在你的代码中：

Student.prototype = new Person();

你创建一个闭包，当你调用它时

var Student = function()    {
    Person.call(this,arguments);
};

你创建了另一个闭包（它不应该被调用而是应用，但即使它也不起作用）。您将构造函数作为函数执行，并且（如果将应用它）将参数应用到不同的闭包，所有那些由 Person 返回的具有闭包内详细信息的函数都将被丢弃。 Student 的方法将取自原型而不是构造函数。

【讨论】：

但是如果学生模块返回一组函数，比如 return { foo : foo, bar : bar, test : testing }..
因此您将它们返回给子类（函数）。看看你是如何编写 Person 的，它不是一个类而是一个函数（返回一个对象），你没有使用 this。所以即使你在没有new 的情况下执行student1 = Student({...});，它也会起作用。您不能在代码中使用继承，因为您使用闭包和函数式编程而不是面向对象的编程。你在哪里寻找的是 super 函数，但 JavaScript 没有。
那是给信息伙伴的。你知道有什么地方可以学习 javascript oops。好一个。
@JaisonJustus 你可以看看这个developer.mozilla.org/en/…我不确定我理解你所说的“模块化模式”是什么意思。

【解决方案2】：

问题是details是原型中的局部变量，而Person.apply调用中的局部变量。这些是不同的。我的建议是将details 附加到对象上，即

var Person = function() {
    var self = this;
    self.details = null;

    // the other code goes here;

    clearDetails = function()   {
        self.details = {
            uid : '',
            name : '',
            email : ''
        };
    };

    setDetails = function(param)    {
        clearDetails();
        for(var attr in param)  {
            if(self.details.hasOwnProperty(attr))    {
                self.details[attr] = param[attr];
            }
        }
    };

    // and the other code here.
}

基本上将details 更改为self.details。我没有测试它，但它应该可以工作。

【讨论】：

@freakinsh 如果我们在函数中添加 this.details，它的作用域是否保持私有或公共
@JaisonJustus 一般来说，JavaScript 中没有私有/公共范围 sensu stricto 之类的东西。但在某种意义上，这不再是“私有”范围，即details 可以在对象之外很容易地看到。
谢谢你的朋友。这是我对私有/公共 oops 的误解.. :)