Search code examples
javascriptoopconstructorprototype-programming

Dynamically assign prototype in constructor not works


What happens when we use "new" operator to create an instance for an Object in javascript? And, during the creation, when the prototype for the constructor is assigned? I try to dynamically assign a new prototype in constructor, but the outcome is quite weird:

function Person(name, age){//the super class constructor
    this.name = name;
    this.age = age;
    if (typeof this.sayName != "function") {//set the function in prototype so Person's instance or subType can share just one instance of function(since function in javascript is Object indeed) 
        Person.prototype.sayName = function(){
            console.log("my name is ", this.name);
        }
    }
}
//if I assign Student's prototype here, not in its constructor, it will be OK, but why not encapsulate it within the constructor if I can?
//Student.prototype = new Person();
function Student(name, age, school, grade){//the subType constructor
    Person.call(this, name, age);//get the super class property
    this.school = school;//init the subType property
    this.grade = grade;
    if (!(Student.prototype instanceof Person)) {//just assign the prototype to Student for one time
        Student.prototype = new Person();
    }
}

let person1 = new Student("Kate", 23, "Middle school", "3.8");
let person2 = new Student("Gavin", 23, "Middle school", "3.8");
let person3 = new Student("Lavin", 23, "Middle school", "3.8");
person1.sayName();//Uncaught TypeError: person1.sayName is not a function
person2.sayName();//my name is  Gavin
person3.sayName();//my name is  Lavin
  1. since the "sayName()" can assign to Person's prototype, we can conclude that the prototype is ready when constructor code is executed
  2. base on point 1, in the constructor Student(), why I can't replace the original prototype?(person1 will not find sayName function)
  3. when the prototype for the constructor is assigned? And where can I replace the default prototype?

Solution

  • What happens when we use "new" operator to create an instance for an Object in javascript?

    Following MDN documentation for your case:

    When the code new Student(...) is executed the first time, the following things happen:

    1. A new object is created, inheriting from Student.prototype
    2. The constructor function Student is called with the specified arguments, and with this bound to the newly created object ...

    Basically, you can't change prototype for the first instance inside the constructor. It is already set to Student.prototype. You can call setting prototype code from anywhere, but before you started creating new instances.

    The next instance will be created with Person prototype.