码迷,mamicode.com
首页 > 其他好文 > 详细

面向对象类

时间:2018-09-24 23:20:14      阅读:202      评论:0      收藏:0      [点我收藏+]

标签:font   而不是   数字   style   构造器   实例   方式   new   解决   

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);

 

面向对象类

标签:font   而不是   数字   style   构造器   实例   方式   new   解决   

原文地址:https://www.cnblogs.com/bestchenyan/p/9696946.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!