javascript 继承(extend)

最新推荐文章于 2022-08-04 20:03:15 发布

紫竹

最新推荐文章于 2022-08-04 20:03:15 发布

阅读量1.2k

点赞数

分类专栏： web基础文章标签： javascript JavaScript Javascript

本文链接：https://blog.csdn.net/ziyunyangyong/article/details/8227698

版权

web基础专栏收录该内容

11 篇文章 1 订阅

订阅专栏

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript 继承</title>
<script type="text/javascript" src="js/common.js"></script>
<script type="text/javascript">
	//继承
	println("---继承---");
	println("---原型链---");
	function SuperType(){
		this.superProperty = true;
	}
	SuperType.prototype.getSuperProperty = function(){
		return this.superProperty;
	}
	
	function SubType(){
		this.subProperty = false;
	}
	
	SubType.prototype = new SuperType();
	
	SubType.prototype.getSubProperty = function(){
		return this.subProperty;
	}
	
	var sub = new SubType();
	println("superProperty = " + sub.getSuperProperty() + ", subProperty = " + sub.getSubProperty());
	
	//借用构造函数继承
	println("----借用构造函数继承,无法继承父类原型中的方法----");
	function Animal(name, color){
		this.name = name;
		this.color = color;
		this.sayName = function(){
			println("name = " + this.name);
		}
		
	}
	
	Animal.prototype.showInfo = function(){
		println("name = " + this.name + ", color = " + this.color);
	};
	
	function Dog(name,color){
		Animal.apply(this, arguments);//本质：在子类的构造函数中调用父类的构造函数，所有父类原型中的方法必不能在子类中继承下来
	}
	
	var dog = new Dog("dog","white");
	//dog.showInfo();//不能调用，没有从父类继承
	dog.sayName();
	
	//组合使用原型继承和构造函数继承
	println("---组合使用原型继承和构造函数继承，完美，能继承父类所有的方法---");
	function Pig(name,color){
		Animal.apply(this, arguments);//第二次调用父类构造方法;//or use call method
	}
	
	Pig.prototype = new Animal();//第一次调用父类构造方法
	Pig.prototype.sayColor = function(){
		println("color = " + this.color);
	}
	
	var pig = new Pig("pig", "colorful");
	pig.sayName();
	pig.sayColor();
	pig.showInfo();
	
	//原型式继承
	println("---原型式继承---");
	//原理
	function object(o){
		function F(){}
		F.prototype = o;
		return new F();
	}
	var car = {
		name:"laoshi",
		drivers:["jhon", "kitty"]
	}
	var otherCar = object(car);
	println(otherCar.drivers.join(","));
	var anotherCar = object(car);
	otherCar.drivers.push("noty");
	println(anotherCar.drivers.join(","));
	//在ECMAScript5中规范了此原型式继承:使用Object.create()方法
	var person = {
		name:"zizhu",
		friends:["xia", "xu"]
	}
	var p1 = Object.create(person);	
	var p2 = Object.create(person);
	p1.friends.push("yan");
	println("after p1 push yan, and p2.friends = " + p2.friends.join(","));
	
	//寄生式继承
	println("---寄生式继承---");
	function createAnother(original){
		var clone = object(original);//复制original对象
		clone.sayName = function(){//增强原来对象的方法
			println("name = " + this.name);
		}
		return clone;		
	}
	
	var another = createAnother(person);
	another.sayName();
	
	//寄生组合式继承
	println("----寄生组合式继承---");
	function Shape(name,count){
		this.name = name;
		this.count = count;
	}
	
	Shape.prototype.showInfo = function(){
		println("name = " + this.name + ", count = " + this.count);
	}
	
	function Triangle(name, count){
		Shape.apply(this, arguments);
	}
	
	//继承核心函数
	function inheritProperty(sub, sup){
		var proto = Object.create(sup.prototype);
		proto.constructor = sub;
		sub.prototype = proto;
	}
	
	inheritProperty(Triangle, Shape);
	Triangle.prototype.sayName = function(){
		println("name = " + this.name);
	}
	var triangle = new Triangle("三角形",3);
	triangle.showInfo();//从父类继承
	triangle.sayName();
		
</script>
</head>
<body>
</body>
</html>

紫竹

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
javascript 继承(extend)

javascript 继承 //继承 println("---继承---"); println("---原型链---"); function SuperType(){ this.superProperty = true; } SuperType.prototype.getSuperProperty = function(){ return this.superPropert
复制链接

扫一扫