子构造函数继承父构造函数的属性和方法

旧城等待， 2023-07-24 02:21 8阅读 0赞

ES6之前没有给我们提供extends继承，我们可以通过**构造函数+原型对象**模拟实现继承，被称为**组合继承**

# call() #

function fn(x,y){ 
    		console.log('我想干嘛');
    		console.log(this);
    		console.log(x+y);
    	}
    	var o={ 
    		name:'aaa'
    	};
    	fn();//这里输出的this指向window
    	//1.call() 可以调用函数
    	//fn.call();
    
    	//2.call()可以改变这个函数的this指向，此时这个函数的this就指向了o这个对象
    	fn.call(o,1,4);

# 子构造函数 借用 父构造函数 继承属性 #

在子构造函数中使用call方法：Father.call(this);  
这样就把父构造函数中的this修改为子构造函数中的this

//借用父构造函数继承属性
    	//1.父构造函数
    	function Father(name,age){ 
    		// this指向父构造函数的对象实例
    		this.name=name;
    		this.age=age;
    	}
    	//2.子构造函数
    	function Son(name,age,score){ 
    		// this指向子构造函数的对象实例
    		Father.call(this,name,age);
    		this.score=score;
    	}
    	var son=new Son('刘德华',18,100);
    	console.log(son);

# 利用原型对象继承方法 #

*  第一步：把子原型对象指向父实例对象

**Son.prototype=new Father();**

*  第二步：这个时候Son.prototype.constructor会指向父构造函数，所有我们需要  
    如果利用对象的形式修改了原型对象，别忘了利用constructor指回原来的构造函数  
    **Son.prototype.constructor=Son;**

//借用父构造函数继承属性
    	//1.父构造函数
    	function Father(name,age){ 
    		// this指向父构造函数的对象实例
    		this.name=name;
    		this.age=age;
    	}
    	Father.prototype.money=function(){ 
    		console.log(300000);
    	}
    	//2.子构造函数
    	function Son(name,age,score){ 
    		// this指向子构造函数的对象实例
    		Father.call(this,name,age);
    		this.score=score;
    	}
    
    	// Son.prototype=Father.prototype;
    	//这样直接赋值会有问题，如果修改子原型对象，父原型对象也会跟着一起变化
    
    	Son.prototype=new Father();
    	//如果利用对象的形式修改了原型对象，别忘了利用constructor指回原来的构造函数
    	Son.prototype.constructor=Son;
    
    	Son.prototype.exam=function(){ 
    		console.log('孩子要考试');
    	}
    	var son=new Son('刘德华',18,100);
    	console.log(son);
    	console.log(Father.prototype);
    	console.log(Son.prototype.constructor);

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjEwMDQwNg_size_16_color_FFFFFF_t_70]: /images/20230528/dd842dbe18d54138b5c53a5f7a5dda59.png