js继承

js继承

1-------构造函数方式
2-----构造函数+原型方式
3----constructor
4-----构造函数的相关问题

1-------构造函数方式
<script>
		// 对象就是把事物共有的属性提炼出来
		// 构造函数,创建对象 function 构造函数名字(构造函数名字首字母一般要大写){}
			function Student(name,age){
				this.name=name;
				this.age=age;
				this.eat=function(){
					console.log(this.name+'晚上吃了什么呀?');
				}
			}
			// 实例化对象
			/*
				调用new关键字的时候,
				第一步:首先生成一个空对象
				第二步:构造函数中的this指向当前对象
				第三步:执行构造函数代码
			*/
			var stu=new Student('zs',12);
			
			stu.eat()

			var stu1=new Student('LS',14);
			stu1.eat();

			// 书写Product构造函数
			var p=new Product('口红',200,'404');
			p.buy();
		</script>
	2-----构造函数+原型方式
<script>
			// 构造函数+原型方式
			function Product(title,color){
				this.title=title;
				this.color=color;
				// this.buy=function(){
				// 	console.log('buy')
				// }
			}

			// 每一个构造函数,都有一个prototype属性/对象,该属性所有的方法和属性都能被构造函数继承
			Product.prototype.buy=function(){
				console.log('buy')
			}
			Product.prototype.joinCar=function(){
				console.log('加入购物车')
			}

			// 一般情况下,属性类的放置在构造函数内部,方法类的放置在prototype内部

			var flight=new Product('无人机','银色');
			var kh=new Product('口红','404');
			// 如果实例对象没有自己对应的方法,会去构造函数的prototype内部寻找。如果能找到就会执行该方法
			flight.buy();
			flight.joinCar()
			console.log(flight.buy==kh.buy);
		</script>
3----constructor
	function Product(title,color){
				this.title=title;
				this.color=color;
				this.buy=function(){
					alert('确认购买'+this.title)
				}
			}
			Product.prototype.buy=function(){
				console.log('buy')
			}
			Product.prototype.joinCar=function(){
				console.log('加入购物车')
			}
			var p=new Product('口红','401');
			console.log(p)
			// 相当于重写了Product.prototype 丢失了constructor
			Product.prototype={
				// 可以手动加上constructor
				constructor:Product,
				buy:function(){
					console.log('buy')
				},
				joinCar:function(){
					console.log('joinCar')
				}
			}
			var p=new Product('口红','401');
			console.log(p.constructor==Product)


	4-----构造函数相关问题
		<script>
			function Product(title,color){
				this.title=title;
				this.color=color;
				this.buy=function(){
					alert('确认购买'+this.title)
				}
			}
			Product.prototype.buy=function(){
				console.log('buy')
			}
			Product.prototype.joinCar=function(){
				console.log('加入购物车')
			}
			var flight=new Product('无人机','银色');
			var kh=new Product('口红','404');
			console.log(flight)
			// 如果实例对象有自己的方法,执行自己的方法,不会再向上寻找。
			// flight.buy();
			// 实例对象的__proto__指向构造函数的prototype
			console.log(flight.__proto__==Product.prototype);

			flight.__proto__.joinCar=function(){
				console.log('这是修改以后的加入购物车')
			}
			flight.__proto__.buy=function(){
				console.log('这是修改以后的购买')
			}
			console.log(flight)
			// flight.buy()
			flight.joinCar();


			var cat=new Product('小猫','黄色');
			cat.buy();
			cat.joinCar();

			***// 实例对象.hasOwnProperty('属性')可以判断属性是自有的还是继承来的
			console.log(cat.hasOwnProperty('buy'))
			console.log(cat.hasOwnProperty('joinCar'))
			console.log(cat.hasOwnProperty('title'))
			var arr=new Array();
			// 可以通过constructor找到实例对象的构造函数 在某些情况,不太好用
			console.log(arr.constructor==Array)
			console.log(cat.constructor==Product);
			// 官方推荐的 使用 a instanceof b构造函数 判断a是否是通过b构造函数构造出来的
			console.log(arr instanceof Array);***
			
		</script>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值