JS面向对象

╰+哭是因爲堅強的太久メ 2022-11-16 05:51 130阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70][]

## 类的声明 ##

//类的声明，声明了Animal的一个类，通过this表明这是一个构造函数
    function Animal1 () {
    	this.name = 'name';
    }					
    			
    //ES6中的class的声明
    class Animal2 {
    	constructor(name) {
    		this.name = name;
    	}
    }

类的声明有2种方式，一种是传统的用构造函数来模拟一个类的方式，第二种就是ES6中对class的声明。ES6中有增加了对类的声明，就是class这个语法，后面就是类名，constructor就是构造函数，构造函数里面就可以写它这个属性了，跟ES5中的写法是相同的

## 实例化类的对象 ##

//实例化类的对象
    console.log(new Animal1(), new Animal2(name));

通过new就可以实例化一个类，虽然声明方式不一样，但是实例化的方式是一样的，**如果构造函数没有参数的话，new Animal()的括号是可以不要的**

## 如何实现继承 ##

继承的本质就是原型链，第一种方式是借助构造函数实现继承，第二种方式是借助原型链实现继承，第三种方式是前两种的组合方式

第一种方式（借助构造函数）：

//借助构造函数实现继承
    function Parent1 () {
    	this.name = 'parent1';
    }
    Parent1.prototype.say = function () {alert(1)};
    function Child1 () {
    	Parent1.call(this);// apply
    	this.type = 'child1';
    }
    
    console.log(new Child1)//Child1 {name: "parent1", type: "child1"}
    console.log(new Child1.say())//报错，因为没继承父类原型对象上的方法

主要原理就在Parent1.call(this);这句话上（没有这句话实现不了继承）：将父级构造函数那个this指向子构造函数的实例上去，导致你看到的父级构造函数的所有属性在子级中也有就是这个原理

缺点：Parent1的原型链上的东西并没有被Child1继承，这种方式只是实现了部分继承，如果父类的属性都在构造函数里面，那么完全可以实现继承，但如果父类的原型对象上还有方法的话，那么子类是拿不到这些方法的

第二种方式（借助原型链）：

//借助原型链实现继承
    function Parent2 () {
    	this.name = 'parent2';
    	this.play = [1,2,3];
    }
    function Child2 () {
    	this.type = 'child2';
    }
    Child2.prototype = new Parent2();//重点，没有这句话实现不了继承
    
    console.log(new Child2);//Child2 {type: "child2" __proto__:Parent2实例}

每个函数都有一个prototype属性，这个属性它是一个对象，这个对象是可以任意赋值的，现在赋值给父类一个实例对象，而Child2.prototype和new Child2.\_\_proto\_\_是等同的，所以new Child2().\_\_proto\_\_引用的就是父类Parent2的一个实例对象。按照类似于作用域的寻找方式，先找new Child2()上面的属性，比如找name，通过Child2实例化的属性上没有name，然后这个作用域开始找\_\_proto\_\_属性，这个属性是一个对象，这个属性又被赋值为父类的一个实例，所以这个属性也就找到了父类的一个对象，父类的对象上已经有name了，所以这个对象也就能拿到这个name，也就实现了继承。这种方式完全就是原型链。new Child2().\_\_proto\_\_.name返回"parent2"

//缺点
    var s1 = new Child2();
    var s2 = new Child2();
    console.log(s1.play, s2.play);//[1, 2, 3] [1, 2, 3]
    s1.play.push(4);
    console.log(s1.play)//[1, 2, 3, 4]
    console.log(s2.play)//[1, 2, 3, 4]
    console.log(s1.__proto__ === s2.__proto__)//true
    s1.name = 'parent3'//改变了父类值类型，一样影响所有的实例对象
    console.log(s1.name)//parent3
    console.log(s1.name)//parent3

缺点：在一个类上我们实例了两个对象，修改第一个对象的属性play，第二个对象也跟着改变了，这个不是想要的效果。这个缺点造成的原因就是因为原型链中的原型对象它俩是共用的，因为s1.\_\_proto\_\_和s2.\_\_proto\_\_它俩引用的是同一个对象，也就是父类的实例对象，而那个父类方法是在它的实例对象上，无论是引用类型还是值类型都会影响所有实例对象，所以，当你改变s1这个原型链对象的时候，改的就是s2原型对象的值，所以它俩会同时跟着变，同理，你改了s2，s1也会跟着变

第三种方式-组合方式：

//组合方式，把上面两种方式的优点结合起来，弥补它们的不足
    function Parent3 () {
    	this.name = 'parent3';
    	this.play = [1,2,3];
    }
    function Child3 () {
    	Parent3.call(this);//写到这，是继承了构造函数的继承方式的优点
    	this.type = 'child3';	
    }
    Child3.prototype = new Parent3();
    var s3 = new Child3();
    var s4 = new Child3();
    s3.play.push(4);
    console.log(s3.play, s4.play);//[1,2,3,4] [1,2,3]
    console.log(s3.constructor)//Parent3，这是第二个缺点

通过组合方式轻松地实现了继承，把构造函数和原型它们的优点都结合起来，把它们的不足也弥补了，这是实现继承最通用的方式，但也有不足

缺点1：我们在写子类的原型链的时候，就是实例化了这个父类，我们在实例化子类的时候，父类的构造函数在Parent3.call(this);和Child3.prototype = new Parent3();这两处地方都执行了一次，也就是父类的构造函数执行了两次，然而这两次没有必要，因为构造函数函数体内的内容会自动执行，所以没有必要再把父类的实例对象再放到原型对象上去，因为在子类的构造函数里面已经有了这块内容

缺点2：因为prototype直接拿的是父类的实例，它没有自己的constructor，它的constructor是从父类的实例中继承的，也就是原型链的上一级拿过来的，它拿过来的constructor肯定是Parent3的原型的constructor，所以肯定指向Parent3，而不是指向Child3

组合继承优化1：

//组合继承的优化1
    function Parent4 () {
    	this.name = 'parent4';
    	this.play = [1,2,3];
    }
    function Child4 () {
    	Parent4.call(this);
    	this.type = 'child4';
    }
    Child4.prototype = Parent4.prototype;
    var s5 = new Child4();
    var s6 = new Child4();
    s5.play.push(4);
    console.log(s5);//Child4 {name: "parent4", play: Array(4), type: "child4"}
    console.log(s6);//Child4 {name: "parent4", play: Array(3), type: "child4"}

通过两个构造函数组合能拿到所有的构造函数体里面的属性和方法，既然是想继承父类的原型对象，所以直接赋值给我当前这个原型对象就行了，这样的话就可以把父级的构造函数体内的属性和方法拿到，还能把它原型对象拿到，完成继承。这种方式父类的构造函数只执行了一次，也就是在实例化子类的时候执行一次，原型对象上只是简单的引用，Parent4.prototype是引用类型，所以它不会再执行父级的构造函数

//判断s5这个对象是不是Child4或Parent4类的实例
    console.log(s5 instanceof Child4, s5 instanceof Parent4);//true true
    console.log(s5.constructor);	//Parent4
    console.log(Child4.prototype.constructor);	//Parent4

缺点1：s5.constructor指向了父类，这不是想要的效果，prototype里面有一个属性constructor，而子类的原型对象和父类的原型对象是一个对象，这个对象的constructor就是父类的constructor，指向的当然是Parent4自己了，所以这就是问题的根源所在。将子类的原型对象和父类的原型对象划等号，也就是引用同一个对象，说白了，它俩是一个对象，它俩的构造函数指向的是一个，也就是constructor是一个，所以无法区分这个实例是由父类创造的还是由子类创造的

缺点2：因为prototype直接拿的是父类的prototype，它没有自己的constructor，所以它的constructor肯定是Parent4.prototype的constructor，所以肯定指向Parent4，而不是指向Child4

组合继承优化2：

//组合继承的优化2
    function Parent5 () {
    	this.name = 'parent5';
    	this.play = [1,2,3];
    }
    function Child5 () {
    	Parent5.call(this);
    	this.type = 'child5';	//写到这，是继承了构造函数的继承方式那种方式的优点
    }
    Child5.prototype = Object.create(Parent5.prototype);//通过__proto__往上找
    Child5.prototype.constructor = Child5;
    
    var s7 = new Child5();
    console.log(s7 instanceof Child5, s7 instanceof Parent5); //true true
    console.log(s7.constructor); 	//Child5

这是组合最完美的方式。通过创建中间对象的方法，就把两个原型对象区分开，中间对象还具备的一个特性就是，它的原型对象是父类的原型对象，这样的话在原型链上又连起来了通过给Child5的原型对象的constructor做修改，就能正常地区分父类和子类的构造函数了。

Object.create创建出来的对象，其原型对象就是参数。

Child5的实例的原型对象等于Child5.prototype，它又等于Object.create这个方法创建出来的中间对象，这个中间对象的原型对象又是父类的原型对象，一级的上一级的上一级，通过这样找就实现了继承，而且还达到了父类和子类原型对象的隔离，这就是原理。

这时候Child5实例的constructor还是没有自己的constructor，它要找的话肯定也到原型对象找，到原型对象找的话contructor还是找到Parent5的原型，最后还是找到Parent5，因为作用域通过原型链向上找的特性，所以要覆盖，要给Child5的原型对象写一个自己的constructor，Child5.prototype.constructor = Child5

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzgwNDQ5Ng_size_16_color_FFFFFF_t_70]: /images/20221022/99c70b518d5c4e0e8d4e4c0f583346b7.png