js面向对象中父类与子类之间的继承

责编:menVScode 2017-09-06 0:35 阅读(1047)

        方式一:

//构造函数   Person  父类
function Person(name,age){
	// console.log(this)
	this.name=name;   //属性
	this.age=age;
}
Person.prototype={
	eat:function(){
		console.log(this.name+'正在吃饭...')
	},
	song:function(){
		console.log(this.name+'正在唱歌...')
	}
}
Person.prototype.constructor = Person;
var menvscode = new Person('menvscode.com',18);//1创建实例   2:调用
menvscode.eat();

//构造函数   Student  子类
function Student(name,age){
	//继承了父类的属性
	Person.call(this,name,age);//将this指向Student的实例,本来是window
}
//继承父类的方法,和父类共用一个原型独享,但是这种方法有个缺点:在子类扩展一个方法,父类也会有这个方法的。
Student.prototype = Person.prototype;
var mvc = new Student('MVC',15);
console.log(mvc.age)

        这种继承父类的方法,和父类共用一个原型独享,但是这种方法有个缺点:在子类扩展一个方法,父类也会有这个方法的。

QQ截图20170906225408

        

        方式二:

        for-in循环遍历:遍历数组、对象,把他们里面“可枚举属性”全都遍历出来。

var  obj={
  name:"max",
  age:30,
  height:175
}
for(var key in obj){ //遍历数组、对象,把他们里面“可枚举属性”全都遍历出来。
  console.log(key); //属性
  console.log(obj[key]); //值
}
//构造函数   Person  父类
function Person(name,age){
	// console.log(this)
	this.name=name;   //属性
	this.age=age;
}
Person.prototype={
	eat:function(){
		console.log(this.name+'正在吃饭...')
	},
	song:function(){
		console.log(this.name+'正在唱歌...')
	}
}
Person.prototype.constructor = Person;
var menvscode = new Person('menvscode.com',18);//1创建实例   2:调用
menvscode.eat();

//构造函数   Student  子类
function Student(name,age){
	//继承了父类的属性
	Person.call(this,name,age);//将this指向Student的实例,本来是window
}
//用for-in循环继承父类的方法
for(var key in Person.prototype){
	Student.prototype[key] = Person.prototype[key];
}
Student.prototype.school = function(){
	console.log(this.name+'正在上学...');
}
var mvc = new Student('MVC',15);
mvc.school();

        这种子类继承父类的方法也有缺陷:当父类的原型对象存在的很庞大的数据时,这种复制就很容易消耗性能。

        

        方式三:运用原型链

//构造函数   Person  父类
function Person(name,age){
	// console.log(this)
	this.name=name;   //属性
	this.age=age;
}
Person.prototype={
	eat:function(){
		console.log(this.name+'正在吃饭...')
	},
	song:function(){
		console.log(this.name+'正在唱歌...')
	}
}
Person.prototype.constructor = Person;
var menvscode = new Person('menvscode.com',18);//1创建实例   2:调用
menvscode.eat();

//构造函数   Student  子类
function Student(name,age){
	//继承了父类的属性
	Person.call(this,name,age);//将this指向Student的实例,本来是window
}
//利用原型链的方式
Student.prototype = new Person();
Student.prototype.school = function(){
	console.log(this.name+'正在上学...');
}
var mvc = new Student('MVC',15);
mvc.school();
mvc.song();

QQ截图20170906233321

标签: 继承 面向对象
前端交流群: MVC前端网(menvscode.com)-qq交流群:551903636

邮箱快速注册

忘记密码