JS面向对象---继承

Posted 2020-09-06 梁小清

一、面向对象的继承

　　1、解析：在原有对象的基础上，略作修改，得到一个新的对象，并且不影响原有对象的功能

　　2、如何添加继承---拷贝继承

　　　　属性：call

　　　　方法： for in

/*
继承：子类不影响父类，子类可以继承父类的一些功能（代码复用）
属性的继承：调用父类的构造1函数 call
方法的继承：for in   拷贝继承			
*/
//父类
function CreatePerson(name,sex){
	this.name = name;
	this.sex = sex;
}			
CreatePerson.prototype.showName = function(){
	alert(this.name)
}			
var p1 = new CreatePerson(‘小明‘,‘男‘)
p1.showName()   //小明

			
//子类
function CreateStar(name,sex,job){		
	CreatePerson.call(this,name,sex);
	this.job = job;
}
//拷贝继承
extend(CreateStar.prototype,CreatePerson.prototype)		
var p2 = new CreateStar("周杰伦",‘男‘,‘歌手‘);			
p2.showName();    //周杰伦		
			
//面向对象的拷贝复制，防止影响父类对象的内容
function extend(obj1,obj2){
	for(var attr in obj2){
		obj1[attr] = obj2[attr];
	}
}
			

 

然后按照继承的方式做了一个窗口拖拽的demo，你可以狠狠的点击这里，进行查看

 

二、继承的其他形式（用的不是很多）

　　1、类式继承 ： 利用构造函数（类）继承的方式

/*js是没有类的概念的，但我们可以把构造函数看做是类，这种方式是从后端转变过来的 * */
//父类
function Aaa(){
	this.name = ‘小明‘;
}
Aaa.prototype.showName = function(){
	alert(this.name)
}
		
//子类
function Bbb(){}
//这句话就是类式继承
Bbb.prototype = new Aaa();
//修正指向问题
Bbb.prototype.constructor = Bbb;
			
var b1 = new Bbb();
b1.showName();    //小明

 但实际上上面的写法还是有点问题的，假如name是一个数组的时候，父类的属性会被修改，所以例子完善后如下

/*
 1、js是没有类的概念的，但我们可以把构造函数看做是类，这种方式是从后端转变过来的
 2、要做属性和方法继承的时候，要分开继承	 
 * */
//父类
function Aaa(){
	this.name = [1,2,3];
}
Aaa.prototype.showName = function(){
	alert(this.name)
}
			
//子类
function Bbb(){
	Aaa.call(this)
}
			
//这个是构造函数，这个函数里面没有任何的属性与方法,避免属性继承
var F  = function(){}
F.prototype = Aaa.prototype;
//所以在B接收原型的时候，只能接收方法，不能接收属性
Bbb.prototype = new F();
Bbb.prototype.constructor = Bbb;
			
var b1 = new Bbb();		
b1.name.push(4);
			
var b2 = new Bbb();
alert(b2.name);    //1,2,3

 

　　2、原型继承 ： 借助原型来实现对象继承对象

var a = {
	name : ‘小明‘
}
var b = cloneObj(a);
b.name = "小红"

alert(a.name);    //小明
alert(b.name);	  //小红

function cloneObj(obj){
	//这种方式就叫做原型继承
	var F = function(){};
	F.prototype = obj;
	return new F();
}

 

总结：

拷贝继承 ： 通用型，有new或无new的时候都可以

类式继承： new构造函数

原型继承： 无new的对象