javascript原型链简单示例(实现简单的继承)

最新推荐文章于 2022-10-11 15:43:38 发布

啊哈前端

最新推荐文章于 2022-10-11 15:43:38 发布

阅读量892

点赞数

分类专栏： javascript

本文链接：https://blog.csdn.net/wuzhe128520/article/details/51337540

版权

javascript 专栏收录该内容

62 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>原型链</title>
<meta name="description" content="">
<meta name="keywords" content="">
<style type="text/css">
</style>
</head>
<body>
<script type="text/javascript">
	//javascript中的每个函数中都有一个指向某一对象的prototype属性。
	//该函数被new操作符调用时会创建并返回一个对象，并且该对象中会有
	// 一个指向其原型对象的秘密链接。通过该秘密链接(在某些环境中，该链接名为__proto__)
	//我们就可以在新建的对象中调用相关原型对象的方法和属性
	//而原型对象自身也具有对象固有的普遍特性，因此本身也包含了指向其原型的链接，
	//由此就形成了一条链，我们称之为原型链。

	//原型链示例
	function Shape(){
		this.name='Shape';
		this.toString=function(){
			return this.name;
		}
	}
	function TwoDShape(){
		this.name='2D shape';
	}
	function Triangle(side,height) {
		this.name='triangle';
		this.side=side;
		this.height=height;
		this.getArea=function(){
			return this.side*this.height/2;
		}
	}
	//我们将对象直接创建在TwoDShape对象的prototype属性中
	//并没有去扩展这些对象的原有原型。确保了在继承实现之后
	//我们对Shape()所进行的任何修改、重写甚至删除，都不会对
	//TwoDShape()产生影响，因为我们所继承的只是由该构造器所建
	//的一个实体。
	TwoDShape.prototype=new Shape();
	Triangle.prototype=new TwoDShape();
	//重置constructor
	TwoDShape.prototype.constructor=TwoDShape;
	Triangle.prototype.constructor=Triangle;
	var my=new Triangle(5,10);
	var area=my.getArea(); //25
	//虽然我们这里调用的是一个继承方法，但this指向的依然是my对象
	var mystr=my.toString(); // triangle
	my instanceof Shape; //true
	my instanceof TwoDShape //true
	Shape.prototype.isPrototypeOf(my); //true
	TwoDShape.prototype.isPrototypeOf(my); //true
	Triangle.prototype.isPrototypeOf(my); //true
	//将共享属性迁移到原型中去
	//当我们用某一个构造器创建对象是，其属性就会被添加到this中去。
	function Shape(){
		this.name="Shape";
	}
	//这种实现意味着我们用new Shape()创建的每个实体都会拥有一个全新
	//的name属性，并在内存中拥有自己独立的存储空间。
	//而事实上，我们也可以选择将name 属性添加到原型上去，这样一来所有实体
	//就可以共享这个属性了。
	function Shape(){}
	//针对对象实体中的不可变属性，可以这么做。对象的共有方法尤其适合这种共享形式
	Shape.prototype.name='Shape';

</script>
</body>
</html>