js 继承方式(一)

2022-03-01 22:31:52 阅读：160 来源： 互联网

标签：name 方式继承 js Person Student new prototype Man

js 继承 分为 原型继承、组合继承、寄生组合继承、es6的extend
---------------------------------------------------
原型继承
1.父类的实例作为子类的原型
2.缺点：子类的实例对象共享了父类的构造函数的引用属性

function Person() {
	this.name = "tom"
	this.money = {
		consume: 100,
		deposit: 10000
	}
}
function Student() {
	this.school = "希望小学"
}
Student.prototype = new Person()
var stu = new Student()
console.log(stu.name) // tom 
++++++++++++++++++++++++++++++++++++
Student.prototype = new Person()  // 父类的实例作为子类的原型
Student的原型属性的值是 Person 的实例  
new Person() 的作用过程如下：
var p = {}
p.__proto__ = Person.prototype
var res = Person.call(p)
return res instanceof Object ? res : p

Student.prototype = p ==> Student.prototype.__proto__ == Person.prototype
完成了原型链

Student.prototype.__proto__ = Person.prototype
var o = {}
o.__proto__ = Student.prototype
var res = Student.call(o) // this.school = "希望小学"
实现了共享

o.__proto__.__proto__ = Person.prototype

 
++++++++++++++++++++++++++++++++++++
stu.money.consume = 200
var stu1 = new Student()
console.log(stu1.money,consume) // 200
这说明了子类的实例对象共享了父类构造函数的引用属性

var p = new Person()
console.log(p.money.consume) // 100
----------------------------------------------
组合继承
1.在子类构造函数中运行父类构造函数 改变this指向
2.获取父类的原型属性的值的方法  改变constructor 解决共享引用属性的问题
3.优点：可传参 不再共享引用属性 缺点：父类构造函数调用了两次

function Person(name) {
	this.name = name
	this.money = {
		consume: 100
	}
}
Person.prototype.getName = function() {
	alert(this.name)
}
function Man(name, sex) {
	Person.call(this, name)  // this.name = name
	this.sex = sex
}
Man.prototype = new Person() 
Man.prototype.constructor = Man
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript">
			function Person(name) {
				this.name = name
				this.money = {
					consume: 100
				}
			}
			Person.prototype.getName = function() {
				alert(this.name)
			}
			function Man(name, sex) {
			//把这个引用类型独立出来，放在Man的构造函数里，让Man的实例们各自生成自己的这个属性  屏蔽了原型链上的money属性 （Person）
				Person.call(this, name)  // 关键代码 解决共享
				this.sex = sex
			}
			Man.prototype = new Person() 
			Man.prototype.constructor = Man
			
			var tom = new Man('tom', 'man')
			console.log(tom.money) // {consume: 200}
			tom.money.consume = 200
			var john = new Man('john', 'man')
			console.log(john.money) // {consume: 100}
			
			// 没有共享
			
		</script>
	</body>
</html>

+++++++++++++++++++++++++++++++++++++++++++++++++++++++
function P() {
	this.info = {width: 100}
}
function S() {
	this.info = {width: 200}
}
S.prototype = new P()
var s = new S()
console.log(s.info.width) // 200
屏蔽了原型链上的info
+++++++++++++++++++++++++++++++++++++++++++++++++++++++

标签：name,方式,继承,js,Person,Student,new,prototype,Man
来源： https://blog.csdn.net/weixin_43956427/article/details/123215393

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

ICode9

js 继承方式(一)