javascript创建自定义对象和prototype

时间:2022-08-25 15:17:20
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" language="javascript" src="my.js"></script>
</head>


<body>
    <script type="text/javascript" language="javascript">
    //写构造函数-----------------------------------------
    
    
        //1.写构造函数
        function Person(){
                
        }
        //2创建对象
        var p=new Person();
        //3绑定属性
        p.name="张三";
        p.age=23;        
        
        //4绑定函数
        p.say=sayHi;
        
        //5调用
        p.say();
        
        document.write(p+"<br/>");
        document.write( p.name+"<br/>");
        
        function sayHi(){
            document.write( "hello hi <br/>" );
            }
    </script>
    <script type="text/javascript" language="javascript">
    //写构造函数的另一种形式-----------------------------------------
        //1创建构造函数
        function Shape(x,y){
            this.x=x;//this 代表当前对象
            this.y=y;    
            this.say=function(){
                document.write("这个是一个函数<br/>");    
            }
        }
        
        //创建对象
        var shape=new Shape(12,34);
        
        //调用
        document.write( shape +"<br/>");
        document.write(shape.x+"<br/>");
        shape.say();
        
        //动态修改属性
        delete shape.x;//删除对象的x属性
        shape.say=null;//直接删除该方法
        shape.say=function (){
            document.write("重写前面的方法!<br/>");    
        }
        document.write( shape.x+"<br/>");//undefined  没有找到该属性
        shape.say();//这里会报错
        
    </script>
    <script type="text/javascript" language="javascript">
        //Object 形式的-----------------------------------------
        document.write( Math.constructor +"<br/>");
        var p=new Object();//这里的new关键字可以不要var p= Object();
        p.name="jack";
        p.gender="male";
        p.eat=function(){
            document.write(this.name+"<br/>"+"eat..............");
        }
        document.write(p.name+" : " +p.gender+"<br/>");
        p.eat();
        
    </script>
    <script type="text/javascript" language="javascript">
    //字面值形式-------------------------------------
        var person={
            name:"张三",
            age:14,
            sleep:function(){
                document.write(this.name+"sleep。。。。。。。。。。。。<br/>");    
            },
        };
        
        document.write( person.name+":这个是一个名字"+person.age+"<br/>");
        person.sleep();
        
    </script>
</body>
</html>
<!-----------
    javascript中内置的对象有限,不能满足所有项目开发的要求,所以javascript就提供了开发者自定义对象的功能
    
        创建自定义对象的几种方式:
            1.构造函数
                1.1写构造函数
                1.2创建对象
                1.3属性绑定
                1.4函数绑定
                
                缺点:没创建一个对象都要写一个构造函数
                
            2.Object
                所有的对象都是Object
                2.1直接使用javascript语言中默认的Object构造函数创建对象
                2.2绑定属性
                2.3绑定函数
                
                特点:new关键字可以不要
                
            3.字面值
                无需使用任何的构造函数,直接使用{}代表一个对象。在{}中可以指定属性和函数
                
                
                

-------->



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript中的方法prototype和call</title>
</head>


<body>
    <script type="text/javascript" language="javascript">
    //prototype ----------------------------------------
        function Person(name){
            //对象方法
            this.name=name;
            this.Introduce=function(){
                alert("my name is "+this.name);    
            }    
        }
        //类方法
        Person.Run=function(){
            alert(" i can run");    
        }
        Person.prototype.IntrodeceChinese=function(){
            alert("我的名字是:"+this.name);    
        }
        
        //测试
        
        var p=new Person("张三");
        p.Introduce();
        Person.Run();
        p.IntrodeceChinese();
        
    </script>
    <script type="text/javascript" language="javascript">
        //javascript中的每个对象都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用。
        
        //可以出现这种情况:A的prototype是B的实例,同时B的prototype也是A的实例。
        
        
        function baseClass(){
            this.showMsg=function(){
                alert("baseClass::showMsg");    
            }    
        }
        
        function extendsClass(){
        }
        
        extendsClass.prototype=new baseClass();
        var instance=new extendsClass();
        
        instance.showMsg();
    </script>
    <script type="text/javascript" language="javascript">
        function baseClass(){
            this.showMsg=function(){
                alert("baseClass::showMsg");    
            }    
        }
        
        function extendsClass(){
                //假如本身也有一个showMsg方法,函数运行时会先去本体的函数中去找,如果找到则运行,找不到则去prototype中寻找函数。或者可以理解为prototype不会克隆同名函数。
                this.showMsg=function(){
                    alert("extendsClass:showMsg");    
                }
        }
        
        extendsClass.prototype=new baseClass();
        var instance=new extendsClass();
        
        instance.showMsg();
    </script>
    <script type="text/javascript" language="javascript">
        //如果我想使用extendClass的一个实例instance调用baseClass的对象方法showMsg怎么办?
        function baseClass(){
            this.showMsg=function(){
                alert("baseClass::showMsg");    
            }    
        }
        
        function extendsClass(){
                this.showMsg=function(){
                    alert("extendsClass:showMsg");    
                }
        }
        extendsClass.prototype=new baseClass();
        var instance=new baseClass();
        
        var baseInstance=new baseClass();
        baseInstance.showMsg.call( instance );//显示baseClass::showMsg
        
        
    </script>
</body>
</html>


这个是引用的:http://www.cnblogs.com/yjf512/archive/2011/06/03/2071914.html 的这位老大的,只是自己测试了下