Prototype - 不一样的 Class

作者: 萧沪椿Helson | 来源:发表于2017-08-27 16:07 被阅读0次

prototype class
Prototype - 不一样的 Class
R--S4 Class
2019-06-18 JS 中继承的写法
关于class与prototype
ES6里玩接口
ES6中的Class
ES6之class
JS之面向对象
原型与原型链

我第一次接触面向对象时，使用的是 Python，运用 def __init__(self, *args): 这种 magic method 来完成自身参数的初始化。 JS 当中也有类似的构造器 constructor 。

我先用 ES6 中新引入的 class 语法来定义一个类，因为这样容易理解。

class Student {
  constructor(name) {
    this.name = name;
  }
  
  hello() {
    return 'Hello, ' + this.name + '!';
  }
}

再定义一个类来继承

class PrimaryStudent extends Student {
  constructor(name, grade) {
    super(name); // 调用父类的构造函数
    this.grade = grade;
  }
  
  myGrade() {
    return 'I am at grade ' + this.grade;
  }
}

看似与 Python 极为相似，难怪我直接用 React 写应用的时候并没有发现不对。这种新的语法简化了 JS 原本复杂的原型 (prototype) 继承，也让直接了解新语法的我忽略了它的本质及特性。

（为了学习）回归原本的面貌

function Student(name) {
  this.name = name;
}

Student.prototype.hello = function() {
  return 'Hello, ' + this.name + '!';
}

var kitty = new Student('kitty');
var daisy = new Student('daisy');

可以观察到我们并不在 Student 中直接写 hello 函数，而是写在了它的 prototype 中。只要我们给 prototype 定义了函数，那么 Student 生成的对象就都可以调用这个函数，省去每个对象再独自生成函数的操作。

我们把 Student.prototype 想象成一根树枝，kitty 和 daisy 就是生出的绿叶了，它们共用树枝上的器官，不必自己再生出相同的器官来消耗资源。此时 kitty 和 daisy 的原型指向 Student.prototype。

Javascript规定，每一个构造函数都有一个prototype属性，指向另一个对象。这个对象的所有属性和方法，都会被构造函数的实例继承。

进一步，为了避免生成对象的时候漏写 new，可以封装一下。

function Student(props) {
    this.name = props.name || '匿名'; // 默认值为'匿名'
    this.grade = props.grade || 1; // 默认值为1
}

Student.prototype.hello = function () {
    alert('Hello, ' + this.name + '!');
};

function createStudent(props) {
    return new Student(props || {});  // 兼顾没有参数的情况
}

然后直接调用 createStudent() 就可以了。

Student.prototype 的继承应该如何写呢？

function PrimaryStudent(props) {
    // 调用Student constructor构造函数，绑定this变量
    Student.call(this, props);
    this.grade = props.grade || 1;
}

别以为这就结束了。

Student.call(this, props); 这句代码，确实和 Student 搭上边了，但此时 PrimaryStudent.prototype 是谁？

我们的目标是构造一个 PrimaryStudent.prototype ，令它指向上层的 Student.prototype。

有谁是这种关系？kitty 和 daisy 的原型好像就是。

我就不想了，前辈的方法是这样的。

function F() {
}

F.prototype = Student.prototype;

PrimaryStudent.prototype = new F();

// 把PrimaryStudent原型的构造函数修复为PrimaryStudent(因为上一句修改了constructor)
PrimaryStudent.prototype.constructor = PrimaryStudent;

构造一个函数 F ，令 F.prototype = Student.prototype
生成一个中间对象，那么这个对象的 prototype 就可以指向 Student.prototype

这不就是我们想要的吗？我们把该对象赋给 PrimaryStudent.prototype ，那么就可以实现 PrimaryStudent.prototype —> Student.prototype 的指向连接了。

// 继续在PrimaryStudent原型（就是new F()对象）上定义方法：
PrimaryStudent.prototype.getGrade = function () {
    return this.grade;
};

// 创建xiaoming:
var xiaoming = new PrimaryStudent({
    name: '小明',
    grade: 2
});
xiaoming.name; // '小明'
xiaoming.grade; // 2

// 验证原型:
xiaoming.__proto__ === PrimaryStudent.prototype; // true
xiaoming.__proto__.__proto__ === Student.prototype; // true

// 验证继承关系:
xiaoming instanceof PrimaryStudent; // true
xiaoming instanceof Student; // true

封装它

function extend(Child, Parent) {
  var F = function(){};
  F.prototype = Parent.prototype;
  Child.prototype = new F();
  Child.prototype.constructor = Child;
  Child.uber = Parent.prototype;
}

Child.uber = Parent.prototype; 意思是为子对象设一个uber属性，这个属性直接指向父对象的prototype属性。（uber是一个德语词，意思是"向上"、"上一层"。）这等于在子对象上打开一条通道，可以直接调用父对象的方法。这一行放在这里，只是为了实现继承的完备性，纯属备用性质。