Question

我正在尝试用JavaScript理解原型。

下面提到的示例1和示例2都给出相同的输出。

示例1 [显示＆＃39; f1 l1＆＃39;]

function parent(fname, lname) {
        this.firstName = fname;
        this.lastName = lname;
        this.fun1 = function () {
            return this.firstName + " " + this.lastName;
        };
    };

function child() {};
child.prototype = new parent('f1', 'l1');

var objChild = new child();
alert(objChild.fun1()); // alert displays 'f1 l1'

示例2 [还显示＆＃39; f1 l1＆＃39;]

function parent(fname, lname) {
        this.firstName = fname;
        this.lastName = lname;           
    };

parent.prototype.fun1 = function () {
        return this.firstName + " " + this.lastName;
    }; 


function child() {};
child.prototype = new parent('f1', 'l1');

var objChild = new child();
alert(objChild.fun1()); // alert displays 'f1 l1'

示例1和示例2之间的唯一区别是fun1（）函数的定义方式。我的问题是，当定义fun1（）的任何一种方式给出相同的输出时，两者之间有什么区别。（我明白我对原型的理解并不清楚）。

请澄清

Answer 1

您的第一个示例在每个父实例上放置“fun1”。第二个是将它放在父原型上。

当您在第一个示例中调用objChild.fun1()时，JavaScript运行时将在“child”原型对象上找到该函数。在第二个例子中，它不会在那里找到它，但是当它继续检查“父”原型对象时它会找到它。

顺便说一下，这不是建立继承链的最佳实践方式;有一些（当然令人困惑的）细节，这种方法没有解决。相对较新的Object.create()函数是更好的选择，您可以找到有关它的信息（以及旧版浏览器的“polyfill”）on the MDN site。（如果不清楚，我的意思是将child.protoype设置为新实例化的“父”对象。）

Answer 2

如果您想为所有对象使用相同的方法fun1，则首选第二种方法。相反，第一种方法允许您为不同的对象使用此方法的不同实现。

了解JavaScript中的Prototype概念

2 个答案: