标签：console 方式 Parent 继承 javascript log Child 构造函数

• 让一个构造函数去继承另一个构造函数的属性和方法
• 继承是发生在两个构造函数之间
• 是与构造函数相关的应用

1.原型对象(prototype)继承

• 优点：简单，方便，易操作
• 缺点：
  • 不能继承构造函数里的属性和方法
  • 只能继承原型对象身上的属性和方法

function Parent(){
	this.name = "admin";
	this.sayHi = function(){
		console.log("hi");
	}
}
Parent.prototype.show = function(){
	console.log("Parent的方法");
}

function Child(){}

//原型对象继承：深拷贝
for(var i in Parent.prototype){
	Child.prototype[i] = Parent.prototype[i];
}

var p = new Parent();
console.log(p.name);    //admin
p.sayHi();			    //hi
p.show();		    	//Parent的方法

var c = new Child();
console.log(c.name);    //undefined
//c.sayHi();	    	//报错：c.sayHi is not a function
c.show();		    	//Parent的方法


Child.prototype.show = function(){
	console.log("Child自己写的方法");
}
//不会覆盖Parent实例的方法
c.show();		    	//Child自己写的方法

2.原型链(__proto__)继承

• 优点：
  • 更加的简单，方便，易操作
  • 可以继承构造函数中的方法和属性
  • 可以继承原型身上的方法和属性
• 缺点：不方便传参

function Parent(a){
	this.name = "admin";
	this.sayHi = function(){
		console.log("hi");
	};
	this.age = a;
}
Parent.prototype.show = function(){
    console.log("Parent的方法");
	console.log(this.age);
}

function Child(){}

var p = new Parent("18");
console.log(p.name);    //admin
p.sayHi();	            //hi
p.show();	            //Parent的方法  18

//原型链继承
Child.prototype = new Parent();
//Child实例c ---> __proto__ ---> Child.prototype ---> Parent的实例 ---> __proto__ ---> Parent.prototype

var c = new Child();
console.log(c.name);    //admin
c.sayHi();	            //hi
c.show();	            //Parent的方法   undefined

Child.prototype.show = function(){
	console.log("Child自己写的方法");
}
//不会覆盖Parent实例的方法
c.show();			//Child自己写的方法

构造函数继承

• 优点：
  • 方便传参
  • 可以实现多继承
• 缺点：
  • 只能继承构造函数内部的属性或方法，
  • 不能继承原型身上的属性或方法

function Parent(s){
	this.skill = s;
	this.sayHi = function(){
		console.log("hi");
	};
}
Parent.prototype.show = function(){
	console.log("parent的方法");
}

function Child(n){
	//构造函数继承：改变this指向
	Parent.call(this,n);
}

var p = new Parent("正式工");
console.log(p.skill);	//正式工
p.sayHi();				//hi
p.show();				//parent的方法

var c = new Child("实习工");
console.log(c.skill);	//实习工
c.sayHi();				//hi
//c.show();				//报错：c.show is not a function

混合继承(构造函数继承 + 原型对象继承)

• 优点
  • 方便传参
  • 可以实现多继承构造函数
  • 可以继承构造函数中的方法和属性
  • 可以继承原型身上的方法和属性
• 缺点：
  • 略复杂
  • 原型链继承时，传参时有隐患

function Parent(s){
	this.skill = s;
	this.sayHi = function(){
		console.log("hi");
	};
	//测试原型链继承时，参数隐患，报错：Cannot read property 'split' of undefined
	//测试原型对象继承时，不报错。
	this.skill.split();
}
Parent.prototype.show = function(){
	console.log("parent的方法");
}

function Child(s){
	//构造函数继承
	Parent.call(this,s);
}

//原型对象继承：没有传参隐患
for(var i in Parent.prototype){
	Child.prototype[i] = Parent.prototype[i];
}

//原型链继承：有传参隐患
//Child.prototype = new Parent();

var p = new Parent("正式工");
console.log(p.skill);	//正式工
p.sayHi();				//hi
p.show();				//parent的方法

var c = new Child("实习工");
console.log(c.skill);	//实习工
c.sayHi();				//hi
c.show();				//parent的方法

Child.prototype.show = function(){
	console.log("Child自己写的方法");
}
//不会覆盖Parent实例的方法
c.show();				//Child自己写的方法

ES6的class继承(构造函数继承 + 原型链继承)

• 优点：
  • 方便传参
  • 可以继承构造函数中的方法和属性
  • 可以继承原型身上的方法和属性
• 关键字：
  • extends
  • super

class Parent{
	constructor(s){
		this.skill = s;
		this.name = "admin";
	}
	show(){
		console.log("parent的方法");
	}
}

class Child extends Parent{
	constructor(s){
		super(s);   //改变this指向和传参的作用
		this.skill = s;
		this.name = "anran";
	}
	show(){
		console.log("Child自己写的方法");
	}
}

var p = new Parent("正式工");
console.log(p.skill);       //正式工
console.log(p.name);        //admin
p.show();			        //parent的方法

var c = new Child("实习工");
console.log(c.skill);       //实习工hello
//不会覆盖Parent实例的属性和方法
console.log(c.name);        //anran
c.show();			        //Child自己写的方法

总结比较

标签：console,方式,Parent,继承,javascript,log,Child,构造函数
来源： https://blog.csdn.net/anr_safely/article/details/106984652

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。