当前位置: 代码迷 >> JavaScript >> js中的承袭
  详细解决方案

js中的承袭

热度:118   发布时间:2012-07-29 15:26:13.0
js中的继承
	<script type="text/javascript">

	/**
	   js继承:
	                通过原型链prototype来实现继承
	 */
	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 = new Shape();
	Triangle.prototype = new TwoDShape();

     /*
                   这个可不写,如果不写则如: var my = new Triangle(5, 10); my.constructor则为	
       function Shape() {
		this.name = "shape";
		this.toString = function() {
			return this.name;
		}
	  }
	  
	  指定之后就为指定的
	   TwoDShape.prototype.constructor = TwoDShape;  
	   Triangle.prototype.constructor = Triangle;  
     */
   
   /**
             测试继承
   */
	function test() {
	  var my = new Triangle(5, 10);  
	  alert(my.toString()); 

	/**
		  虽然my对象并没有toString的方法,但是它继承了Shape.就可以调用toString的方法了。
		让我们看看javascript引擎是怎样工作的.

		首先先循环my对象的属性,发现没有toString的方法。
		通过_proto_的链接找到对象,也就是TwoDShape()创建的对象。
		接下来又开始循环TwoDShape的实例,发现也没有toString的方法。然后又会检查_proto_指向的对象。也就是Shape创造的对象。
		终于在Shape的实例中,找到了toString方法。
		最终toString方法在my的上下文中被调用。意思就是this指向了my对象。
		  
	  */
		//alert(my.constructor);
	}
</script>
	
  </head>
  
  
  <body>
    This is my JSP page. <br>
    <input type="button" onclick="test()" value="test">
    
        测试div与span的区别:div是块元素 也就是会换行  而是span是行元素不会换行,但是可以通过样式display来改变
        <span style="display:block">我是行内元素</span>测试行内元素<div style="display:inline">块元素</div>我是快元素  
  </body>
  相关解决方案