原型和属性继承。为什么房产遗失?

时间:2017-05-18 15:44:30

标签: javascript inheritance properties prototype

让我们考虑以下代码:

// Let's create a constructor "Point".

let Point = function(x,y) { this.x = x; this.y = y; };
Point.prototype = { x:null, y:null, print: function() { console.log("(" + this.x + "," + this.y + ")")} };

let p = new Point(1,2);
p.print();
console.log(Object.getPrototypeOf(p)); // => { x: null, y: null, print: [Function: print] }
console.log(Point.prototype === Object.getPrototypeOf(p)); // => true
console.log(p.constructor); // => Object
console.log(p.constructor.name); // => Object
console.log(p.constructor === Point); // => false
console.log(p.constructor === Object); // => true
console.log(p.prototype); // undefined
console.log(p instanceof Point); // => true
console.log(typeof p); // => Object
console.log();

// Let's create the constructor "Pigment" that derives from "Point".

let Pigment = function(x,y,c) {
    Point.call(this, x, y);
    this.color = c;
};
Pigment.prototype = new Point;
Pigment.prototype.paint = function () {
    console.log(this.color);
};

let pi = new Pigment(1,2,'red');
console.log(pi);
pi.print();
pi.paint();
console.log(Object.getPrototypeOf(pi)); // => (Pigment) { x: undefined, y: undefined, paint: [Function] }
console.log(pi instanceof Object); // => true
console.log(pi instanceof Point); // => true
console.log(pi instanceof Pigment); // => true
console.log(pi.constructor === Object); // => true
console.log(pi.__proto__); // => (Pigment) { x: undefined, y: undefined, paint: [Function] }
console.log(pi.__proto__.__proto__); // => (Point) { x: null, y: null, print: [Function: print] }
console.log(pi.print); // => [Function: print]
console.log(pi.__proto__ === Object.getPrototypeOf(pi)); // => true
console.log(pi.__proto__ == Pigment.prototype); // => true
console.log(pi.__proto__.__proto__ === Point.prototype); // => true

构造函数的原型" Point"是:

{
    x:null,
    y:null,
    print: function() { console.log("(" + this.x + "," + this.y + ")")}
}

构造函数的原型"颜料"是" Point"的一个实例。 :

Pigment.prototype = new Point;

因此我希望原型与构造函数相关联"颜料"包括该物业" print" 。但事实并非如此。事实上:

console.log(pi.__proto__);

打印:

{ x: undefined, y: undefined, paint: [Function] }

为什么财产" print"丢失?

- 编辑 -

以下示例按预期工作:

var util = require("util");

function Person(age) {
    this.age = age;
}
Person.prototype = {
    age: null,
    print : function(){
        console.log("This person is " + this.age + " years old.");
    }
};

function Student(age, level) {
    Person.call(this, age);
    this.level = level;
}

Student.prototype = new Person;
Student.prototype.level = null;
Student.prototype.talk = function () {
    console.log("I talk");
};


Student.prototype.constructor = Student;
var b = new Student(10, 5);
b.print();
console.log(b.constructor);
console.log("b.proto:\n" + util.inspect(b.__proto__) + "\n");
console.log("b.proto.proto:\n" + util.inspect(b.__proto__.__proto__) + "\n");

请注意添加的行:

Student.prototype.constructor = Student;

输出结果为:

This person is 10 years old.
[Function: Student]
b.proto:
Student {
  age: undefined,
  level: null,
  talk: [Function],
  constructor: [Function: Student] }

b.proto.proto:
{ age: null, print: [Function: print] }

这是正确的。

现在,让我们来做MeteorZero的建议:让我们替换

Student.prototype = new Person;

人:

Student.prototype = Person.prototype;

然后,结果是:

This person is 10 years old.
[Function: Student]
b.proto:
Student {
  age: null,
  print: [Function: print],
  level: null,
  talk: [Function],
  constructor: [Function: Student] }

b.proto.proto:
{}

这不是我们所期望的。

1 个答案:

答案 0 :(得分:1)

你的假设是错误的Pigment.prototype = new Point;。您为Pigment.prototype分配了新的Point对象而不是Point.prototype对象。我已经修改了你的作业,所以现在可以使用打印功能了



// Let's create a constructor "Point".

let Point = function(x,y) { this.x = x; this.y = y; };
Point.prototype = { x:null, y:null, print: function() { console.log("(" + this.x + "," + this.y + ")")} };

let p = new Point(1,2);
p.print();
console.log(Object.getPrototypeOf(p)); // => { x: null, y: null, print: [Function: print] }
console.log(Point.prototype === Object.getPrototypeOf(p)); // => true
console.log(p.constructor); // => Object
console.log(p.constructor.name); // => Object
console.log(p.constructor === Point); // => false
console.log(p.constructor === Object); // => true
console.log(p.prototype); // undefined
console.log(p instanceof Point); // => true
console.log(typeof p); // => Object
console.log();

// Let's create the constructor "Pigment" that derives from "Point".

let Pigment = function(x,y,c) {
    Point.call(this, x, y);
    this.color = c;
};
// Pigment.prototype = new Point;
Pigment.prototype = Point.prototype;
Pigment.prototype.paint = function () {
    console.log(this.color);
};

let pi = new Pigment(1,2,'red');
console.log(pi);
pi.print();
pi.paint();
console.log(Object.getPrototypeOf(pi)); // => (Pigment) { x: undefined, y: undefined, paint: [Function] }
console.log(pi instanceof Object); // => true
console.log(pi instanceof Point); // => true
console.log(pi instanceof Pigment); // => true
console.log(pi.constructor === Object); // => true
console.log("pi.__proto__::", pi.__proto__); // => (Pigment) { x: undefined, y: undefined, paint: [Function] }
console.log(pi.__proto__.__proto__); // => (Point) { x: null, y: null, print: [Function: print] }
console.log(pi.print); // => [Function: print]
console.log(pi.__proto__ === Object.getPrototypeOf(pi)); // => true
console.log(pi.__proto__ === Pigment.prototype); // => true
console.log(pi.__proto__ === Point.prototype); // => true