js高级_119、继承

实现继承方式

方式一:原型链继承

套路:

1,定义父类型构造函数。
2,给父类型的原型添加方法。
3,定义子类型的构造函数。
4,创建父类型的对象赋值给子类型的原型。
5,将子类原型的构造属性设置为子类型。
6,给子类型原型添加方法
7,创建子类型的对象:可以调用父类型的方法

关键:

子类型的原型为父类型的一个实例对象。实际上是子类的实例通过隐式原型属性一直往原型链找。

创建父类型构造函数

//父类型
	function Super(){
		this.suprop="Super Property";
		
	}
	
	//向父类型原型对象中添加一个方法
	Super.prototype.showSuperpro=function(){
		console.log("我是父类super原型对象的方法")
	}

创建子类型构造函数

	//子类
	function Sub(){
		this.subProp="Sub Property";
		
	}
	
	//向子类型原型对象中添加一个方法
	Sub.prototype.showSubprop=function(){
		console.log("我是子类的super原型对象的方法")
	}

实现原型链继承并调用父类方法

//原型继承
	Sub.prototype=new Super();
	
	
	//实例化子类调用父类方法
	var sub1=new Sub();
	//调用父类的原型对象的方法。
	sub1.showSuperpro();

image

实现原型链继承后,应该将新继承的原型对象的constructor指向自己的构造函数。

让子类的原型对象的constructor指向子类的构造函数,如果不设置,它就是继承的那个构造函数实例的原型对象的constructor指向,那它就是指向一个错误的地方。
因为默认每个函数的原型对象的constructor都是指向自己的,如果一个函数的原型对象去继承别的函数的原型对象,那应该把去继承别的函数的那个函数的construct属性指向自己。
因为是给的一个父类函数的实例,每个构造函数的实例都会自己单独开辟一个空的object对象当作自己这恶实例的原型对象,而这个空的实例对象(原型)里面的constructor默认指向父类的构造函数。
image
不设置原型的constructor的话,那么输出Sub.prototype.constructor你会发现不是指向的自己。



方式2:借用构造函数继承(假继承)

套路:

1,定义父类型构造函数
2,定义子类型的构造函数
3,在子类型构造函数中调用父类型的构造函数。

关键:

在子类型构造函数中通过call()调用父类型的构造函数

假继承,只是借用对方的构造函数,只是简化了代码。也就是子类不用再创建相同的属性,直接使用父类的属性。用来继承父类的属性就有call()方法。

image



方式3:原型链+借用构造函数的组合继承

1、利用原型链实现对父类函数的方法继承。
2,利用call()借用父类创建函数初始化相同属性。

原型链继承获得的属性是在父亲(父类原型对象)身上的,一旦某个子类修改了这个属性,其他子类也会跟着修改。而构造函数可以让每个子类有属于自己的属性(也就是子类不用再创建相同的属性),但没办法获得父类构造函数身上的方法。所以组合继承结合两者,即让子类有自己的属性,又能调用到父类原型身上的方法。

//父类型
	function Person(name,age){
		this.name=name;
		this.age=age;
	}
	//父类原型对象的方法
	Person.prototype.setName=function(name){
		this.name=name;
	}
	
	
	
	
	//子类
	function Student(name,age,price){
		Person.call(this,name,age);//为了继承父类的属性
		this.price=price;
	}
	
	Student.prototype=new Person();//为了能使用父类的方法(使用父类原型对象)
	Student.prototype.constructor=Student;//修正constructor属性。
	
	//子类新原型对象的方法
	Student.prototype.setPrice=function(price){
		this.price=price;
	}

	
	var s=new Student("张三",18,18000);
	s.setName("匡");
	s.setPrice(20000);
	console.log(s.name,s.age,s.price);
posted @ 2022-03-15 11:47  青仙  阅读(56)  评论(0编辑  收藏  举报