[关闭]
@Dale-Lin 2020-05-05T19:23:25.000000Z 字数 2001 阅读 518

JavaScript


继承

通过原型链的继承,不要忽略 Object 才是最终的原型,再结合原型链搜索规则判断搜索的结果。

将一个构造函数 a的原型 设置成另一个构造函数 b的对象实例a.prototype = new b()),即可完成 a对b的继承

  1. function SuperType(){
  2. this.property = true;
  3. }
  4. SuperType.prototype.getSuperValue = function(){
  5. return this.property;
  6. };
  7. function SubType(){
  8. this.subproperty = false;
  9. }
  10. //原型替换成SuperType的实例
  11. SubType.prototype = new SuperType();
  12. var example = new SubType();

完成原型对实例的继承后,可以通过对原型(也就是实例)或其原型的访问来修改SuperType,甚至是SuperType.prototype的属性及方法。
但是,一旦修改SuperType.prototype的内容,将会影响所有对象实例的相应内容。

SuperType.prototype 存在于 SubType 实例的原型链上,通过 instanceof / Object.isPrototypeOf() 可以判断。


借用继承

借用构造函数可以使SuperType的代码在SubType创建实例时,在SubType的环境下运行。

  1. function SuperType(name){
  2. this.colors = ["red", "blue", "green"];
  3. this.name = name;
  4. }
  5. function SubType(name){
  6. SuperType.call(this, name);
  7. }
  8. var i1 = new SubType();
  9. i1.colors.push("black");
  10. console.log(i1.colors); //"red","blue","green","black"
  11. var i2 = new SubType("Nicholas");
  12. console.log(i2.colors); //"red","blue","green"
  13. console.log(i2.name); //"Nicholas"

这样就避免了对所有实例对象的无差别影响。
但是每一次创造实例,都要调用一次SuperType构造函数。


组合继承

在借用继承的基础上,在SubType.prototype上定义函数,即可避免每次调用时写入共用方法,实现代码的复用。

  1. // ...借用继承代码
  2. SubType.prototype = new SuperType();
  3. SubType.prototype.constructor = SubType;
  4. SubType.prototype.myFunc = function(){
  5. console.log(this.name);
  6. };

原型式继承(不需要构造函数)

newObj = Object.create(proto[, propertiesObject])
Object.create() 第一个参数是一个对象,作为newObj的__proto__;
第二个参数如同Object.defineProperties()的第二个参数一样,是一组或几组属性名值对,作为newObj的实例属性添加。

  1. function Shape() {
  2. this.x = 0;
  3. this.y = 0;
  4. }
  5. Shape.prototype.move = function (x, y) {
  6. this.x += x;
  7. this.y += y;
  8. }
  9. // 直接获得原型链
  10. var rect = Object.create(new Shape());
  11. rect instanceof Shape; // true

寄生式继承

创建一个仅用于封装继承过程的函数,内部增强对象,最后返回这个对象。
继承基本是将另一个构造函数的原型作为新构造函数的原型,然后可以修改这个原型(目的是增强新实例的原型,并获得继承的内容)。

核心例子如下:

  1. function inheritPrototype (subType, superType) {
  2. // 从另一个构造函数创建一个即将成为新对象原型的实例
  3. var prototype = Object.create(superType.prototype);
  4. // 绑定构造函数
  5. prototype.constructor = subType;
  6. subType.prototype = prototype;
  7. // 增强 prototype
  8. // ...
  9. }

ES6 类继承

  1. class People {
  2. constructor(name) {
  3. this.name = name
  4. }
  5. sayName() {
  6. console.log(this.name)
  7. }
  8. }
  9. class Student extends People {
  10. constructor(name, id) {
  11. super(name)
  12. this.id = id
  13. }
  14. sayId() {
  15. console.log(this.id)
  16. }
  17. }
添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注