在构造函数中动态分配原型不起作用
Dynamically assign prototype in constructor not works
当我们使用 "new" 运算符为 javascript 中的对象创建实例时会发生什么?而且,在创建过程中,何时分配构造函数的原型?
我尝试在构造函数中动态分配一个新原型,但结果很奇怪:
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
- 由于"sayName()"可以赋值给Person的原型,我们可以得出结论,当执行构造函数代码时,原型就准备好了
- 根据第1点,在构造函数Student()中,为什么我不能替换原来的原型?(person1不会找到sayName函数)
- 何时分配构造函数的原型?我在哪里可以替换默认原型?
function Person(name, age, parents){//the super class constructor
this.name = name;
this.age = age;
}
// This is must be outside the constructor/function Person
Person.prototype.sayName = function(){
console.log("my name is ", this.name);
}
// Is Student created inside Student constructor?
//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;
}
// Check this to understand why this is a good way to inherit in js
Student.prototype = Object.create(Person.prototype);
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
What happens when we use "new" operator to create an instance for an Object in javascript?
针对您的案例遵循 MDN 文档:
When the code new Student(...) is executed the first time, the following things happen:
- A new object is created, inheriting from Student.prototype
- The constructor function Student is called with the specified arguments, and with this bound to the newly created object ...
基本上,您不能在构造函数中更改第一个实例的原型。它已经设置为 Student.prototype
。您可以从任何地方调用设置原型代码,但在您开始创建新实例之前。
下一个实例将使用 Person 原型创建。
当我们使用 "new" 运算符为 javascript 中的对象创建实例时会发生什么?而且,在创建过程中,何时分配构造函数的原型? 我尝试在构造函数中动态分配一个新原型,但结果很奇怪:
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
- 由于"sayName()"可以赋值给Person的原型,我们可以得出结论,当执行构造函数代码时,原型就准备好了
- 根据第1点,在构造函数Student()中,为什么我不能替换原来的原型?(person1不会找到sayName函数)
- 何时分配构造函数的原型?我在哪里可以替换默认原型?
function Person(name, age, parents){//the super class constructor
this.name = name;
this.age = age;
}
// This is must be outside the constructor/function Person
Person.prototype.sayName = function(){
console.log("my name is ", this.name);
}
// Is Student created inside Student constructor?
//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;
}
// Check this to understand why this is a good way to inherit in js
Student.prototype = Object.create(Person.prototype);
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
What happens when we use "new" operator to create an instance for an Object in javascript?
针对您的案例遵循 MDN 文档:
When the code new Student(...) is executed the first time, the following things happen:
- A new object is created, inheriting from Student.prototype
- The constructor function Student is called with the specified arguments, and with this bound to the newly created object ...
基本上,您不能在构造函数中更改第一个实例的原型。它已经设置为 Student.prototype
。您可以从任何地方调用设置原型代码,但在您开始创建新实例之前。
下一个实例将使用 Person 原型创建。