面向对象类

Posted 2021-01-08 bestchenyan

1、类的声明

 1 /*
 2 类的声明
 3  */
 4 function Animal(){
 5     this.name = ‘name‘;
 6 }
 7 // ES6中的class声明
 8 class Animal2{
 9     constructor(){
10         this.name="name";
11     }
12 }
13 
14 // 实例化
15 console.log(new Animal(),new Animal2());

2、实现继承的几种方式

　　（1）借助构造函数实现继承

/*借助构造函数实现继承
缺点：只是改变this指向。Parent1中原型链上的东西并没有被Child1所继承
*/

function Parent1(){
    this.name= ‘parent1‘;
}

function Child1(){
    Parent1.call(this);//apply ，Parent1在Child1里执行了,同时修改了父级构造函数this的指向，指向了子构造函数的实例上，从而导致父级函数内的属性挂载到Child1的实例中
    this.type=‘child1‘;
}
console.log(new Child1)

 

（2）借助原型链实现继承

 

 1 /*借助原型链实现继承*/
 2 
 3 function Parent2(){
 4     this.name = "Parent2";
 5     this.play = [1,2,3];
 6 }
 7 function Child2(){
 8     this.type = "Child2";
 9 }
10 Child2.prototype = new Parent2();//重点
11 console.log(new Child2);
12 //s1 通过隐式原型找到构造函数Child2的显示原型，显示原型又是Parent2的实例，因此具有play属性
13 var s1 = new Child2();
14 var s2 = new Child2();
15 console.log(s1.play,s2.play);
16 //缺点：向s1的play属性添加数字，s2的play属性也会改变
17 s1.play.push(4);
18 console.log(s2.play);

 

（3）组合方式继承

 1 /*组合方式*/
 2 
 3 function Parent3(){
 4     this.name = "Parent3";
 5     this.play = [1,2,3];
 6 }
 7 function Child3(){
 8     console.log(this);
 9     Parent3.call(this);//this 将child3的实例，s3调用时this指向s3 s4调用时this指向s4,所以改变s3.play 不会导致s4.play的变化
10     this.type=‘Child3‘;
11 }
12 Child3.prototype = new Parent3();
13 //不足：Parent3执行了两次
14 var s3 = new Child3();
15 var s4 = new Child3();
16 s3.play.push(4);
17 console.log(s3.play,s4.play);

（4）组合方式优化1

 1 /*组合方式优化1*/
 2 
 3 function Parent4(){
 4     this.name = "Parent4";
 5     this.play = [1,2,3];
 6 }
 7 Parent4.prototype.say = function(){
 8     console.log("hah ")
 9 }
10 function Child4(){
11     //这句话继承属性
12     Parent4.call(this);
13     this.type=‘Child4‘;
14 }
15 
16 //这句话继承方法
17 Child4.prototype = Parent4.prototype;
18 var s5 = new Child4();
19 var s6 = new Child4();
20 s5.play.push(4);
21 console.log(s5,s6);
22 // console.log(s5.constructor);//缺点：s5的构造器直接指向Parent4 而不是Child4

（5）组合方式优化2

 1 /*组合方式优化2*/
 2 
 3 function Parent5(){
 4     this.name = "Parent5";
 5     this.play = [1,2,3];
 6 }
 7 function Child5(){
 8     Parent5.call(this);
 9     this.type=‘Child5‘;
10 }
11 //Object.create 创建一个中间对象，第一个参数就是这个中间对象的原型，改变中间对象的constructor不会影响中间对象的原型的constructor，因此可以采用这种方法解决之前的问题。
12 /*
13 var z = Object.create(Parent5.prototype);//中间对象z的原型是Parent5.prototype
14 z.constructor = Child5;//改变z的construrtor
15 console.log(z.constructor);//输出Chiled5
16 console.log(Parent5.prototype.constructor)//仍旧输出Parent5
17 */
18 Child5.prototype = Object.create(Parent5.prototype);
19 Child5.prototype.constructor = Child5;
20 var s7 = new Child5();
21 var s8 = new Child5();
22 s7.play.push(4);
23 console.log(s7.play,s8.play);
24 console.log(s7.constructor);