荐 「面面俱到」原型继承篇

前言

今天的备战篇小编总结一下原型以及继承关系

原型、原型链

一提及到原型，那么我们首先要说明白的就是有关原型的几个参数所代表的是什么。我们先写出来一个简单的构造函数，后续就围绕这个构造函数来讲解原型就比较明了

function Person() {

}
var person = new Person();
person.name = 'sichen';
console.log(person.name) 

prototype

每个函数都会有prototype这样的一个隐式属性，总有人就直接把他定义为原型，这其实是一个错误的观点。

其实，函数的prototype属性指向了一个对象，这个对象正是调用该构造函数而创建的实例的原型，那也就是他自身并不是我们所谓的构造函数原型，我们用实例感受一下

function Person() {
}
Person.prototype = {
    name: 'sichen'
}
var person1 = new Person();
var person2 = new Person();

console.log(person1.name); // sichen
console.log(person2.name); // sichen
person2.name = 'afang';

console.log(person1.name); // sichen 
console.log(person2.name); // afang

根据上面例子我们应证了上面的那句话指向的是新创建实例的原型，而非本身，所以person1和person2的原型是相同的内容而但原型指向是不同的内存地址。所以更改了person2的name改变的是自身原型上的这一个。

__proto__

我们直接莽上关系图看一下__proto__这个参数的指向，这是每一个JavaScript对象(除了 null )都具有的一个属性，指向自身对象的原型。

constructor

该属性对应着我们的prototype是从实例原型指向构造函数。到这里我么就可以得到以下内容，那么我们再次更新一下我么的关系图。

function Person() {

}

var person = new Person();

console.log(person.__proto__ === Person.prototype) // true
console.log(Person.prototype.constructor === Person) // true
console.log(Object.getPrototypeOf(person) === Person.prototype) // true

整个关系网构成的就是我们的原型链，我们所有的普通函数对象的__proto__ 都指向 Function.prototype，它是一个空函数（Empty function）

继承

继承意味着复制操作，然而JavaScript默认并不会复制对象的属性，相反，JavaScript 只是在两个对象之间创建一个关联，这样，一个对象就可以通过委托访问另一个对象的属性和函数，所以与其叫继承，委托的说法反而更准确些。

那么继承关系我们上面所描述的就是，这边主要分享一下实现继承的几种方法。

ES3实现继承

ES3实现继承分两步操作，也是最原始的操作模式

1. 由call方法继承构造函数属性
2. 利用一个空函数将 构造函数.prototype 加入自己的原型链(圣杯模式)

function Person(name) {
  this.name = name;
}
Person.prototype.printName = function() {
  console.log(this.name);
};
function Sichen() {
  Person.call(this, "司尘");
  this.hobby = "basketball";
}
function inheritProto(Parent, Child) {
  var Fn = function() {};
  Fn.prototype = Parent.prototype;
  Child.prototype = new Fn();
  Child.prototype.constructor = Child;
}
inheritProto(Person, Sichen);

let people = new Bob()
// 通过这样的方法继承

ES5实现继承

同样也是两步，到了ES5简化了第二步以Object.create方法将Person.prototype 加入原型链。

Sichen.prototype  = Object.create(Person.prototype, {
  constructor: {
    value: Sichen,
    enumerable: false,
    configurable: true,
    writable: true
  }
});

ES6实现继承

到es6就开始围绕class进行操作了

class Person {
  constructor(name) {
    this.name = name;
  }
  printName() {
    console.log(this.name);
  }
}
class Sichen extends Person {
  constructor() {
    super("sichen");
    this.hobby = "basketball";
  }
  printHobby() {
    console.log(this.hobby);
  }
}
console.log(new Sichen());

总结

从原型到继承关系的一次分享，下一篇分享小编会总结一下es6中的promise

本文地址：https://blog.csdn.net/qq_40833779/article/details/107378961