Question

我试图理解javascript原型设计原则，并且无法获得一些基本的工作。我试图实现的一件事是创建一个基础对象，它处理构造函数输入，并根据该输入设置值，如果没有给出构造函数参数，则设置默认值。

另外，我无法弄清楚如何将此存储在一个变量中，以便它指向正确的对象实例（也许是父对象）

以下是我试图创建基本继承的两个版本。（我以前见过的第一个，但它不允许我使用它的基础对象的构造函数处理传递给扩展对象的构造函数参数。第二个版本...是我想出来的东西，但是...我从未见过有人使用这样的原型并且我确定它的方法是错误的（因为原型属性是一个函数而不是一个对象）< / p>

解决这两个问题的正确方法是什么。

var Person = function(conf) {
    if (!conf) {conf = {};}
    var _person = this;
    this.first_name = conf.first_name;
    this.last_name = conf.last_name;
    this.greet = function() {
        alert("Hi, im " + this.first_name + " " + this.last_name );
    }
    this.callback_greet = function() {
        alert("Hi, im " + _person.first_name + " " + _person.last_name );
        console.log("this:", this, " _person:", _person );
    }
}

var Student = function(conf) {
    if (!conf) {conf = {};}
    /* id like to pass this conf on to Person constructor */
    this.report = function() {
        alert(  this.first_name + " " + this.last_name + " is ready to study"  );
    }
}
Student.prototype = new Person();

var Teacher = function(conf) {
    if (!conf) {conf = {};}
    this.teach = function() {
        alert(  this.first_name + " " + this.last_name + " is ready to teach...maggots"  );
    }
}
Teacher.prototype = new Person();

student  = new Student({first_name: "Mike", last_name: "Stud"});
//student.first_name="Mike";
//student.last_name="Stud";
student.greet();
/* alerts Hi, im Mike Stud */


teacher  = new Teacher();
teacher.first_name="John";
teacher.last_name="Smith";
teacher.teach();
/* alerts John Smith is ready to teach...maggots */
teacher.callback_greet ();
/* both alerted values are undefined */

//_________________________
//_______Version 2  _______
//_________________________

var Person = function(conf) {
    if (!conf) {conf = {};}
    var _person = this;
    this.first_name = conf.first_name;
    this.last_name = conf.last_name;
    this.greet = function() {
        alert("Hi, im " + this.first_name + " " + this.last_name );
    }
    this.callback_greet = function() {
        alert("Hi, im " + _person.first_name + " " + _person.last_name );
        console.log("this:", this, " _person:", _person );
    }
}

var Student = function(conf) {
    if (!conf) {conf = {};}
    this.prototype = Person;
    this.prototype(conf);
    this.report = function() {
        alert(  this.first_name + " " + this.last_name + " is ready to study"  );
    }
}

var Teacher = function(conf) {
    if (!conf) {conf = {};}
    this.prototype = Person;
    this.prototype(conf);
    this.teach = function() {
        alert(  this.first_name + " " + this.last_name + " is ready to teach...maggots"  );
    }
}

var Principal = function(conf) {
    if (!conf) {conf = {};}
    this.prototype = Teacher;
    this.prototype(conf);
    this.dicipline_teachers = function() {
        alert(  this.first_name + " " + this.last_name + " thy all mighty principal is watching you"  );
    }
}

student  = new Student({first_name: "Mike", last_name: "Stud"});
student.greet();
/* alerts Hi, im Mike Stud */

teacher  = new Teacher({first_name: "John", last_name: "Smith"});
teacher.teach();
/* alerts John Smith is ready to teach...maggots */

principal  = new Principal({first_name: "David", last_name: "Faustino"});
principal.teach();/* alerts David Faustino is ready to teach...maggots */
principal.dicipline_teachers();/* David Faustino thy all mighty principal is watching you*/

Answer 1

嗯，你的第二个版本实际上......有点...... 正确！

你的代码片段

var Student = function(conf) {
    this.prototype = Person;
    this.prototype(conf);

在这里：

使用Student

this

new Student()

在包含函数的实例上创建一个属性（在本例中为父构造函数），它实际上在实例上创建了一个方法
将称为方法。这意味着调用Person函数，其this指向我们这里的实例 - 然后Person在该实例上进行设置。

这正是我们想要的。也许除了创造无情的财产。请注意，此属性的名称prototype与其功能完全无关，您也可以使用myParentConstructor左右。

在标准JavaScript继承中，我们对该方法调用做了类似的事情 - 我们想在上调用当前（子）实例的父构造函数，以便它确实设置。但是，我们使用.call() method。

现在我们也想使用原型。在您的代码中，所有方法greet，report，teach和dicipline_teachers都可以在实例之间共享，因此他们可以 - and should - 继续ConstructorFn.prototype。为了让所有教师，学生和校长继承这些方法，我们需要建立一个原型链（继承层次结构）。我们don't want to use new Person会调用构造函数并在原型对象上设置first_name之类的东西，然后我们就不会这样了。相反，我们使用Object.create。

总之，您的代码看起来像这样：

function Person(conf) { if (!conf) {conf = {};} var _person = this; this.first_name = conf.first_name; this.last_name = conf.last_name; this.callback_greet = function() { alert("Hi, im " + _person.first_name + " " + _person.last_name ); console.log("this:", this, " _person:", _person ); }; } Person.prototype.greet = function() { alert("Hi, im " + this.first_name + " " + this.last_name ); }; function Student(conf) { Person.call(this, conf); } Student.prototype = Object.create(Person.prototype, {constructor:{value:Student}}); Student.prototype.report = function() { alert( this.first_name + " " + this.last_name + " is ready to study" ); }; function Teacher(conf) { Person.call(this, conf); } Teacher.prototype = Object.create(Person.prototype, {constructor:{value:Teacher}}); Teacher.prototype.teach = function() { alert( this.first_name + " " + this.last_name + " is ready to teach...maggots" ); }; function Principal(conf) { Teacher.call(this, conf); } Principal.prototype = Object.create(Teacher.prototype, {constructor:{value:Principal}}); Principal.prototype.dicipline_teachers = function() { alert( this.first_name + " " + this.last_name + " thy all mighty principal is watching you" ); };

Answer 2

（1）在对所传递的价值类型进行适当的健全性检查后，最好处理设定的默认值：

var Constr = function (conf) {
  if (!!conf && !(conf instanceof Object)) {
    throw new Error('An invalid parameter was passed to Constr.');
  }
  if (!conf) { // Prevent "Can't read property 'name' of undefined." 
    conf = {};
  }
  this.name = conf.name || null; // Set defaults this way.
};

（2）您需要使用Object.create()和Object.apply()来做到这一点：

var Person = function (param1, param2) {
  this.param1 = param1;
  this.param2 = param2;
}

Person.prototype.cough = function () {
  // Do stuff.
}

var Student = function (param1, param2, paramN) {
  Person.call(this, param1, param2);
  this.paramN = paramN; // Define a new property on the subclass
}

// Invoke the superclass to have the subclass inherit properties and methods.
Student.prototype = Object.create(Person.prototype);
Student.prototype.constructor = Student;

处理self和构造函数参数的Javascript原型

2 个答案: