zoukankan      html  css  js  c++  java
  • javascript创建自定义对象和prototype

    <!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 的这位老大的,只是自己测试了下
  • 相关阅读:
    通过注册表找网站绝对路径
    西普学院Crypto之用户名和密码
    西普学院Crypto之一段奇怪的代码
    西普学院Crypto之先有鸡还是先有蛋
    西普学院Crypto之摩擦摩擦
    西普学院Crypto之凯撒是罗马共和国杰出的军事统帅
    各类文件的文件头标志[转]
    收藏的几个脑图
    同源策略详解及绕过[转]
    Python学习#1
  • 原文地址:https://www.cnblogs.com/wucaifang/p/3371115.html
Copyright © 2011-2022 走看看