js 继承的几种方式

**

一、ES6之前的继承

**
1.原型赋值方式
简而言之，就是直接将父类的一个实例赋给子类的原型。如下示例：
function Person(name){
this.name=name;
this.className=“person”
}
Person.prototype.getClassName=function(){
console.log(this.className)
}

function Man(){
}

Man.prototype=new Person();//1
//Man.prototype=new Person(“Davin”);//2
var man=new Man;
如代码中1处所示，这种方法是直接new 了一个父类的实例，然后赋给子类的原型。这样也就相当于直接将父类原型中的方法属性以及挂在this上的各种方法属性全赋给了子类的原型，简单粗暴！我们再来看看man,它是Man的一个实例，因为man本身没有getClassName方法，那么就会去原型链上去找，找到的是person的getClassName。这种继承方式下，所有的子类实例会共享一个父类对象的实例，这种方案最大问题就是子类无法通过父类创建私有属性。比如每一个Person都有一个名字，我们在初始化每个Man的时候要指定一个不同名字，然后子类将这个名字传递给父类，对于每个man来说，保存在相应person中的name应该是不同的，但是这种方式根本做不到。所以，这种继承方式，实战中基本不用！
2.调用构造函数方式
基本思想：在子类型构造函数的内部调用超类型构造函数，通过使用apply()和call()方法可以在将来新创建的对象上执行构造函数
function Person(name){
this.name=name;
this.className=“person”
}
Person.prototype.getName=function(){
console.log(this.name)
}
function Man(name){
Person.apply(this,arguments)
}
var man1=new Man(“Davin”);
var man2=new Man(“Jack”);

man1.name
“Davin”
man2.name
“Jack”
man1.getName() //1 报错
man1 instanceof Person
true
这里在子类的在构造函数里用子类实例的this去调用父类的构造函数，从而达到继承父类属性的效果。这样一来，每new一个子类的实例，构造函数执行完后，都会有自己的一份资源(name)。但是这种办法只能继承父类构造函数中声明的实例属性，并没有继承父类原型的属性和方法，所以就找不到getName方法，所以1处会报错。为了同时继承父类原型，从而诞生了组合继承的方式:

3 组合继承
function Person(name){
this.name=name||“default name”; //1
this.className=“person”
}
Person.prototype.getName=function(){
console.log(this.name)
}
function Man(name){
Person.apply(this,arguments)
}
//继承原型
Man.prototype = new Person();
var man1=new Man(“Davin”);

man1.name
“Davin”
man1.getName()
“Davin”

这个例子很简单，这样不仅会继承构造函数中的属性，也会复制父类原型链中的属性。但是，有个问题，Man.prototype = new Person(); 这句执行后，Man的原型如下：

Man.prototype
{name: “default name”, className: “person”}
也就是说Man的原型中已经有了一个name属性，而之后创建man1时传给构造的函数的name则是通过this重新定义了一个name属性，相当于只是覆盖掉了原型的name属性（原型中的name依然还在），这样很不优雅。

4.分离组合继承(寄生组合继承)
这是目前es5中主流的继承方式，有些人起了一个吊炸天的名字“寄生组合继承”。首先说明一下，两者是一回事。分离组合继承的名字是我起的，一来感觉不装逼会好点，二来，更确切。综上所述，其实我们可以将继承分为两步：构造函数属性继承和建立子类和父类原型的链接。所谓的分离就是分两步走；组合是指同时继承子类构造函数和原型中的属性。

function Person(name){
this.name=name; //1
this.className=“person”
}
Person.prototype.getName=function(){
console.log(this.name)
}
function Man(name){
Person.apply(this,arguments)
}
//注意此处
Man.prototype = Object.create(Person.prototype);
var man1=new Man(“Davin”);

man1.name
“Davin”
man1.getName()
“Davin”
这里用到了Object.creat(obj)方法，该方法会对传入的obj对象进行浅拷贝。和上面组合继承的主要区别就是：将父类的原型复制给了子类原型。这种做法很清晰：
构造函数中继承父类属性／方法，并初始化父类。
子类原型和父类原型建立联系。
还有一个问题，就是constructor属性，我们来看一下：

Person.prototype.constructor
< Person(name){
this.name=name; //1
this.className=“person”
}
Man.prototype.constructor
< Person(name){
this.name=name; //1
this.className=“person”
}
constructor是类的构造函数，我们发现，Person和Man实例的constructor指向都是Person，当然，这并不会改变instanceof的结果，但是对于需要用到construcor的场景，就会有问题。所以一般我们会加上这么一句：
Man.prototype.constructor = Man

二、ES6类和继承

来自：https://blog.csdn.net/qq_34645412/article/details/83584178?utm_source=app
首先看代码
class Person {
constructor(name){
console.log(构造函数执行了,${name})
}
}
let p1= new Person(‘jona’)
此处，调用new的时候就自动执行了构造函数，所以接收参数也是在构造函数出接收

class Person {
constructor(name){
console.log(构造函数执行了,${name})
this.name=name
}
showName(){
return 名字为${this.name}
}
}
let p1= new Person(‘jona’)
console.log(p1.showName)

此处函数不会自动执行，只有调用的时候才会执行console.log(p1.showName)

继承：

// 父类
class Person {
constructor(name){
console.log(构造函数执行了,${name})
this.name=name
}
showName(){
return 名字为${this.name}
}
}
let p1= new Person(‘jona’)
console.log(p1.showName)
// 子类
class children extends Person{
constructor(agrs){
super(ags)
}

showName (){
super.showName()//调用父级的方法也是用super
}
}
let p2 = new children(‘子类’)
console.log(p2.name)

继承用extends,当继承后需要用super()来接收父类的constructor构造函数，否在报错，当new一个子类的时候先把参数传入子类构造函数再通过super（）讲父类的构造函数引入，就可以调用父类。

**

三、ES5/ES6 的继承除了写法以外还有什么区别？

**
来自：https://github.com/Advanced-Frontend/Daily-Interview-Question/issues/20

1.class 声明会提升，但不会初始化赋值。Foo 进入暂时性死区，类似于 let、const 声明变量。
const bar = new Bar(); // it’s ok
function Bar() {
this.bar = 42;
}
const foo = new Foo(); // ReferenceError: Foo is not defined
class Foo {
constructor() {
this.foo = 42;
}
}
2.class 声明内部会启用严格模式。

// 引用一个未声明的变量
function Bar() {
baz = 42; // it’s ok
}
const bar = new Bar();

class Foo {
constructor() {
fol = 42; // ReferenceError: fol is not defined
}
}
const foo = new Foo();
3.class 的所有方法（包括静态方法和实例方法）都是不可枚举的。

// 引用一个未声明的变量
function Bar() {
this.bar = 42;
}
Bar.answer = function() {
return 42;
};
Bar.prototype.print = function() {
console.log(this.bar);
};
const barKeys = Object.keys(Bar); // [‘answer’]
const barProtoKeys = Object.keys(Bar.prototype); // [‘print’]

class Foo {
constructor() {
this.foo = 42;
}
static answer() {
return 42;
}
print() {
console.log(this.foo);
}
}
const fooKeys = Object.keys(Foo); // []
const fooProtoKeys = Object.keys(Foo.prototype); // []
4.class 的所有方法（包括静态方法和实例方法）都没有原型对象 prototype，所以也没有[[construct]]，不能使用 new 来调用。

function Bar() {
this.bar = 42;
}
Bar.prototype.print = function() {
console.log(this.bar);
};

const bar = new Bar();
const barPrint = new bar.print(); // it’s ok

class Foo {
constructor() {
this.foo = 42;
}
print() {
console.log(this.foo);
}
}
const foo = new Foo();
const fooPrint = new foo.print(); // TypeError: foo.print is not a constructor
5.必须使用 new 调用 class。

function Bar() {
this.bar = 42;
}
const bar = Bar(); // it’s ok

class Foo {
constructor() {
this.foo = 42;
}
}
const foo = Foo(); // TypeError: Class constructor Foo cannot be invoked without ‘new’
6.class 内部无法重写类名。

function Bar() {
Bar = ‘Baz’; // it’s ok
this.bar = 42;
}
const bar = new Bar();
// Bar: ‘Baz’
// bar: Bar {bar: 42}

class Foo {
constructor() {
this.foo = 42;
Foo = ‘Fol’; // TypeError: Assignment to constant variable
}
}
const foo = new Foo();
Foo = ‘Fol’; // it’s ok