JS中 类的声明有两种形式:

  

// 类的声明
    function Animal() {
      this.name = 'name'
    }

    // ES6中的class声明
    class Animal2 {
      constructor() {
        this.name = name;
      }
    }

而实例化类,就是一个简单的 new 就完了 

// 实例化
    console.log(new Animal(), new Animal2());


类的创建都是很简单的,主要是类的继承;

JS中类的继承是通过原型链来达到这样的目的;所以在面试过程中问到继承这样的问题,就是在考察你的原型链的掌握水平。

分别像每种继承中运用到的方式、每种继承的缺点和优点等。

先附上一张,我认为很好,但是需要一定了解的人才能看懂的图(原型链的指向)。

 

javascript类继承 js类继承的例子_构造函数

 

 接下来开始上继承的代码和相关的一些见解:

首先ES5,也是面试重点考察的点

 

以下继承中折叠起来的都是红宝书的内容,非折叠的为简单实现继承。

原型链继承

将原型对象等于另一个类型的实列。原型对象将包含一个指向另一个原型的指针,相应的,另一个原型中也包含着一个指向另一个构造函数的指针。它们的关系层层递进,构成实列与原型的链条。

1     // 原型链继承
 2     function Person1() {
 3       this.name = "person1";
 4       this.arr = [1, 2, 3];
 5     }
 6     function Child1() {
 7       this.type = 'child1';
 8     }
 9     // 重点就是这句,通过将子类的原型指针指向了超类的构造函数
10     Child1.prototype = new Person1();
11     console.log(new Child1().__proto__); //Person1 {name: "person1"}
12     var s1 = new Child1();
13     var s2 = new Child1();
14     s1.arr.push(4);
15     console.log(s1.arr, s2.arr); // (4) [1, 2, 3, 4] (4) [1, 2, 3, 4]

 

1 function SuperType(){
 2             this.property = true;
 3         }
 4         SuperType.prototype.getSuperValue = function(){
 5             return this.property;
 6         };
 7 
 8         function SubType(){
 9             this.subproperty = false;
10         }
11 
12         SubType.prototype = new SuperType();
13         //继承了SuperType,将SubType原本指向原型的指针,改为指向SuperType的原型。
14 
15         SubType.prototype.getSubValue = function(){
16             return this.subproperty;
17         };//添加一个新方法
18 
19         var instance = new SubType();
20         alert(instance.getSuperValue());//true
21         alert(instance.subproperty);//true
22         alert(instance instanceof Object);//true
23         //所有函数的默认原型都是Object的实例,因此默认的原型都会包含一个内部指针,指向最高层:Object.orototype;


注意点:通过原型链实现继承时,不能使用对象字面量创建原型方法。因为这样会重写原型链。

原型链的缺点?优点?:一是:会实现为各个实例所共享;二是:在创建子类型的实例时,不能向超类型的构造函数中传递参数。

 

借用构造函数: 主要用在解决原型链的问题上

就是用子类型构造函数的内部去调用超类型的构造函数。构造函数去继承构造函数,就不存在共享和无法传递参数的问题了。

1     // 借用构造函数继承
 2     function Person2() {
 3       this.name = 'person2';
 4       this.arr = [1, 2, 3];
 5     }
 6     function Child2() {
 7       this.type = 'child2';
 8       // 重点是这句: 用子类的构造函数的内部去调用超类的构造函数。构造函数去继承构造函数
 9       Person2.call(this);
10     }
11     // 在超类上加一个方法
12     Person2.prototype.sayName = function () {
13       return 'person2'
14     }
15     // console.log(new Child2().sayName()); // error
16     console.log(new Child2());
17     var s3 = new Child2();
18     var s4 = new Child2();
19     s3.arr.push(4);
20     console.log(s3.arr, s4.arr); // (4) [1, 2, 3, 4] (3) [1, 2, 3]

 

1             function SuperType(){
 2                 this.colors = ["red","blue","green"];
 3             }
 4             function SubType(){
 5                 SuperType.call(this);//继承了SuperType
 6                 //因为要在内部进行继承,且函数都有自己的作用环境,所以要用call()方法来调用SuperType;
 7             }
 8 
 9             var instance1 = new SubType();
10             instance1.colors.push('black');
11             alert(instance1.colors);//red,blue,green,black
12             var instance2 = new SubType();
13             alert(instance2.colors);//red,blue,green
14             //instance2是因为子类型的原型是构造函数,当instance1创建时,它会先创建一个新的副本,以供使用,所以不会影响


 

它的最大的优势: 就是可以传递参数 

1             function SubType(){
2                 //继承了SuperType,同时还传递了参数
3                 SuperType.call(this,"Nicholas");
4                 //实例属性
5                 this.age = 29;
6             }


问题是:

1.它通过超类的构造函数来显示继承. 所以超类的原型中的方法,它并没有继承到。即并没有真正的实现继承。

 

2.都是使用的构造函数来完成继承的,那么不可避免的,它也具有着与构造函数相同的问题: 每个方法都要在每个实例上重新创建一遍。即每次工作量都很大。 

 

组合继承:  将 原型链 和 借用构造函数 的技术组合到一块。

原型链来实现对原型属性和方法的继承(实现属性和方法的共用),而通过借用构造函数来实现对实例属性的继承(实现私有的实例化)。这样,既通过在原型上定义方法实现了函数复用,又能够保证每个实例有自己的属性。

 

1     // 组合继承
 2     function Person3() {
 3       this.name = 'person3';
 4     }
 5     function Child3() {
 6       this.type = 'child3';
 7       // 第一次构造函数调用
 8       Person3.call(this); // 构造函数继承
 9     }
10     // 第二次构造函数调用
11     Child3.prototype = new Person3(); // 原型链继承

 

1             function SuperType(name){
 2                 this.name = name;
 3                 this.colors = ["red","blue","green"];
 4             }
 5             SuperType.prototype.sayName = function(){
 6                 alert(this.name);
 7             };//添加新的方法
 8             //借用构造函数模式,用来实现对实例属性的继承
 9             function SubType(name,age){//继承SuperType
10                 SuperType.call(this,name);
11                 this.age = age;
12             }
13 
14             SubType.prototype = new SuperType();
15             SubType.prototype.constructor = SubType;
16             //它们是原型链模式,不过多了一个实例指向。因为在经过借用构造函数继承后,它实际上指向了SuperType,需要再将它原型的实例指向自身。相当与绕了一圈
17             //对继承后的原型进行添加方法,必须放在继承语句之后。
18             SubType.prototype.sayAge = function(){
19                 alert(this.age);
20             };
21 
22             var instance1 = new SubType("Nicholas",29);
23             instance1.colors.push("black");
24             alert(instance1.colors);//red,blue,green,black
25             instance1.sayName();//Nicholas
26             instance1.sayAge();//29
27 
28             var instance2 = new SubType("Greg",27);
29             alert(instance2.colors);//red,blue,green
30             instance2.sayName();//Greg
31             instance2.sayAge();//27
32


组合继承的最大问题就是,要调用两次超类型构造函数:一次是在创建子类型原型的时候,另一次是在子类型构造函数内部。

 

nstructor也跟着改变了;但是这样的情况下,虽然实现了对象继承,但是超类的原型对象都变成了子类的原型对象,最终导致无法去区分超类的原型对象了。

组合继承优化版: 

 优化版1: 修改原型链继承方式,作为继承超类原型来用,完善借用构造函数继承无法继承到超类原型的缺点。

1     // 组合继承优化1 
 2     function Person4() {
 3       this.name = 'person3';
 4     }
 5     function Child4() {
 6       this.type = 'child3';
 7       Person4.call(this); // 构造函数继承
 8     }
 9     // 将子类原型改成超类的原型
10     Child4.prototype = Person4.prototype;
11     var s5 = new Child4();
12     console.log(s5 instanceof Child4, s5 instanceof Person4);
13     console.log(s5.constructor);

现在引出了一个新的问题: 无法判断到底是 子类 还是 超类 进行的直接对象实例化。 这个问题会出现在 原型链继承、 组合继承 和 组合继承优化1 中。

根据原型链的原理,不难看出这样的问题是因为: 子类原型指向了超类的原型,从而导致子类的constructor也成了超类的constructor;

如果只是这样的话,是否重新对 子类进行constructor进行重新指向就好了呢?

优化版2:修改子类的constructor指向

 利用Object.create() 去 创建中间对象从而将子类和超类区分开;

 

1     // 组合继承优化2
 2     function Person5() {
 3       this.name = 'person3';
 4     }
 5     function Child5() {
 6       this.type = 'child3';
 7       Person5.call(this); // 构造函数继承
 8     }
 9     // 利用Object.create来作为中间链,将子类和超类区分开,且还保持这链接。
10     Child5.prototype = Object.create(Person5.prototype);
11     // 重新修改了constructor指向
12     Child5.prototype.constructor = Child5;
13     var s7 = new Child5();
14     console.log(s7 instanceof Child5, s7 instanceof Person5);
15     console.log(s7.constructor);

 

此继承已经是非常好的继承了,下面的继承可以不看了。

 

原型式继承: 

Object.create方法规范化了原型式继承;这个方法接受两个参数,一个用作新对象原型的对象和(可选)一个为新对象定义额外属性的对象。 即将 新对象 链到 新对象原型的对象的原型链上,以解决上面 组合继承 导致的

 constructor改变问题。

1            //创建一个对象,并将其传送到Object()函数中,然后函数就会返回一个新对象。
 2              var Person = {
 3                 name : "Nicholas",
 4                 friends : ["Shelby","Court","Van"]
 5             };
 6             //这个新对象以Peron为原型,所以他的原型中就包含一个基本类型值属性和一个引用类值属性。这意味着Person.friends不久属于Person,而且也被person1和person2所共享。
 7 
 8             var person1 = Object.create(Person);
 9             //原型继承这种方式,就是要求有一个对象能作为另一个对象的基础,从而进行修改。
10             person1.name = "Greg";//定义的新name属性值,会“屏蔽”原本的name;
11             person1.friends.push("Rob");
12 
13             var person2 = Object.create(Person);
14             person2.name = "Linda";//定义的新name属性值,会“屏蔽”原本的name;
15             person2.friends.push("Barbie");
16 
17             alert(Person.friends);//Shelby,Court,Van,Rob,Barbie
18             alert(person1.friends);//Shelby,Court,Van,Rob,Barbie
19             alert(person2.friends);//Shelby,Court,Van,Rob,Barbie
20             //直接应用了friend的内容,从而导致相互影响。
21             alert(person1.name);//Greg
22             alert(person2.name);//Linda
23             //因为定义了一个name,在查找name时,会先在实例中查找名为name的属性,从而导致了原型中的name被屏蔽。


 

这里也引出了Object.create中继承的参数的内容并不是直接放到子类中,而是存在与子类的原型中; 所以会出现覆盖和共享属性的特征

 

寄生式继承:

寄生式继承是与原型式继承紧密相关的一种思路; 即创建一个仅用域封装过程的函数, 该函数在内部以某种方式来增强对象, 最后就像真的是它做了所有工作一样返回对象;

1             function createAnother(original){ //很像工厂模式
 2                 var clone = Object.create(original);//通过调用函数创建一个新对象
 3                 clone.sayHi = function(){  //通过某种方法来增强这个对象
 4                     alert("hi");
 5                 };
 6                 return clone;               //返回该对象
 7             }
 8             var person = {
 9                 name : "Nichloas",
10                 friends : ["Sheldy","Court", "Van"]
11             };
12             var anotherperson = createAnother(person);
13             person.friends.push("Linda");
14             alert(anotherperson.friends);//Sheldy,Court,Van,Linda
15             anotherperson.sayHi();       //hi


任何能够返回新对象的函数都适用于此模式;

问题: 使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率;这一点与构造函数类似。

 

 寄生组合式继承: 

本质上就是使用寄生式继承来继承超类的原型. 然后再将结果指定给子类的原型;

1         function inheritPrototype(subtype,supertype){
 2             var midlle = Object.create(supertype.prototype);//创建对象
 3             midlle.constructor = subtype;//增强对象
 4             //为创建的副本添加constructor属性,从而弥补重写原型而失去的默认construcor属性。
 5             subtype.prototype = midlle;//指定对象。
 6             //将新创建的对象(即副本)赋值给子类型的原型。
 7         }
 8 
 9         function SuperType(name){
10             this.name = name;
11             this.colors = ["red","blue","green"];
12         }
13 
14         SuperType.prototype.sayName = function(){
15             alert(this.name);
16         };
17 
18         //使用借用构造函数,来继承属性
19         function SubType(name,age){
20             SuperType.call(this,name);
21             this.age = age;
22         }
23 
24         //调用原型链的混成形式,来完成继承。
25         inheritPrototype(SubType,SuperType);
26 
27         //在完成继承后的原型中添加新方法,不影响SuperType中的属性
28         SubType.prototype.sayAge = function(){
29             alert(this.age);
30         }
31 
32         var instance1 = new SubType("Nicholas",29);
33         instance1.colors.push("black");
34         
35         var instance2 = new SubType("Greg",27);
36 
37         instance1.sayName();//Nicholas
38         instance1.sayAge();//29
39         alert(instance1.colors);//red,blue,green,black
40         instance2.sayName();//Greg
41         instance2.sayAge();//27
42         alert(instance2.colors);//red,blue,green

 

 

以上的ES5继承很全了。 面试时,主要说前四种即可;不要直接写出最佳答案,最好是由浅到深的让面试官了解你的基础知识是扎实的。

面试最重要的就是: 要让面试官看到你的知识深度  和 对新技术的掌握。

 

 

ES6的类继承, 都封装好了; extends 所以不会作为重点去问