posts - 165, comments - 198, trackbacks - 0, articles - 1
  BlogJava :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理

javascript 基础总结(面向对象)

Posted on 2009-02-12 11:56 G_G 阅读(1821) 评论(2)  编辑  收藏 所属分类: javascript
javascript 学习
       javascript 大体上可分为3个不同部分组成: 核心(ECMAscript),文本对象(DOM),浏览器对象(BOM)
    1.  核心(ECMAscript): 关键字,语句,运算符,对象
    2. 文本对象(DOM):DOM将把整个页面规划成由节点层级构成的文档.
      1. 解析遵循 W3C html dom 标准
      2.   W3C dom 参考特别关注 DOM Node 说明   
    3. BOM 浏览器对象.  cookie,弹出新浏览器,浏览器设置大小
 
核心(ECMAscript)Global 内置对象;
      方法: parseInt(),isNan(),encodeURI()...等都为此对象方法
      特别注意 eval();动态语言的象征 比如:eval("alert('hi')"); 但这个方法很邪恶(安全方面)
文本对象(DOM)说明:
        
<bookstore>
<book category="cooking">
<title lang="en">Everyday Italian</title>
<author>Giada De Laurentiis</author>
<year>2005</year>
<price>30.00</price>
</book>
</bookstore>

DOM node tree

Node tree

              


     

  1. ECMAscript基础

       $ 变量弱类型 ;     匈牙利类型标示 : var iOuouValue=100; 

       $ 结束行分号有无都可以;     但再 onsubmit="javascript:function();return false;"

       $ 关键字 ; 提别注意

                "constructor" bean.constructor

                     //print bean function(){

                          ....

                      }

                "typeof"   var test=1; alert(typeof testX); //output "undefined"

                "NaN" - not a number ->  isNan("blue"); //output "true"   ->isNan("123"); //output "false" 

       $ 对象; var o = new Object(); var a = {} 

                这里特别说明下 我们普通写的 一个 function 就是一个 object 

              这   var a = {name:"刘凯毅"} 等同与 var a = function(){this.name="刘凯毅"};

                    来个 {name:"test",pass:"123456",addr:"bj"} //这是什么 ?! json

                    当 var str = '{name:"test",pass:"123456",addr:"bj"}'

                    var objectBean = eval(str); //这里就是 对象 objectBea.name 使用了

  域概念:

<SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
  sColor = 'red';
  sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello World!
alert(sColor); //red
</SCRIPT>
<SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
  var sColor = 'red';
  sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello World!
alert(sColor); // 什么都没有
</SCRIPT>

<SCRIPT type=text/javascript>
var sMessage = 'Hello';
function setSomething() {
  var sColor = 'red';
  var sMessage = 'Hello World!';
}
setSomething();
alert(sMessage); //Hello
alert(sColor); // 什么都没有
</SCRIPT>

          

为面向对象做基础:object prototype 类型的对象应用。参考

// 最简单的 继承
Object.prototype.inObj = 1;

function A()
{
    this.inA = 2;
}
 
A.prototype.inAProto = 3;
 
B.prototype = new A;            // Hook up A into B's prototype chain
B.prototype.constructor = B;
function B()
{
    this.inB = 4;
}
 
B.prototype.inBProto = 5;
 
x = new B;
document.write(x.inObj + ', ' + x.inA + ', ' + x.inAProto + ', ' + x.inB + ', ' + x.inBProto);

//1, 2, 3, 4, 5
//增加点信心 http://www.json.org/json.js
Object.prototype.toJSONString = function (filter) {
return JSON.stringify(this, filter);
};
后我们就可以使用 bean.toJSONString()不是吗?

    $ arguments ;

         function getFun(){alert(arguments.length);}   ;

 

                getFun("xx") //output 1

                getFun("xx",23) //output 2



   $ 语句 ;特殊说明下 for 

           for(var i=0i<iCount;i++)   或 for( attr in object ) ;

           如果无聊 你可以 for( sProp in window ){alert(sProp+"你丫点啊!");} //看看 javascript 的反射

              

                

   


面向对象:

  var bean = new Bean();

  

  1.工厂方法

            function getAttr(){

                 alert(this.attr)

            }

            function Bean(tattr){

                var bean = new Object;

                bean.attr = tattr;

                bean.getAttr = getAttr;

                return bean ;

            }

        根本就是山寨版 面向对象

  2.构造

          function Bean(tattr){

              this.attr = tattr ;

              bean.getAttr = function(){

                alert(this.attr);

              }    

          }

   其上 2 总 再Bean 对象创建时,方法会 “重复生成函数”!


  3.原型模式

    function Bean(){}

    Bean.prototype.attr = "";

    Bean.prototype.getAttr=function(){alert(this.attr);}

    

   解决 “重复生成函数” 问题,但新的问题 Bean.prototype.getArray = new Array();


   其 new 对象 bean1 和 bean2 都会共享 new Array 空间(是我们不想看到的)


  4.混合 模型 :)  哈哈

     function Bean(){

        this.attr= "";

        this.getArray=new Array;

    }

    Bean.prototype.getAttr=function(){alert(this.attr);}

 

  5.动态原型 (注意下面开始,就是真正的面向对象!!!)

       function Bean(){

        this.attr= "";
        this.getArray=new Array;

        //classload 加载 时

        if(typeof Bean._initialized == "undefined" ){

            Bean.prototype.getAttr=function(){alert(this.attr);};

            Bean._initialized= true ;

        }

     }

   

/****************************************************************/

对象继承

  1.对象冒充!!(可支持多继承,山寨很强大)

      function classA(sstr){

        this.color = sstr ;

        this.sayColor = function(){

            alert(this.color);

        };

      }

      function classC(){}

       function classB(){

            this.newMethod =ClassA ;

            this.newMethod();

            delete this.newMethod ;


            this.newMethod =ClassC ;

            this.newMethod();

            delete this.newMethod ;

           

            this.arrt = "google";

        }

    

  2.call() apply() 也山寨,

      function classA(sstr){

        this.color = sstr ;

        this.sayColor = function(str){

            alert(str+this.color);

        };

      }

       function classB(){

           // this.newMethod =ClassA ;

           // this.newMethod();

           // delete this.newMethod ;

            classA.call(this,"red");

            //classA.apply(this,new Array("red"))

            this.arrt = "baidu";

       }


3.正统的继承 原型链 (但不支持多继承)
    function classA(){this.oo="test";}
    classA.prototype.color = "red";
    function classB(){}
    classB.prototype = new classA ;
    classB.prototype.sayName = function(){
        alert( this.color );
    }
    
var bb = new classB ;
    bb.sayName();
// output red
    
alert(bb.oo); // output test

    alert( bb instanceof classA); //output true
    alert( bb instanceof classB); //output  true

4.如果你要多继承!!并且还支持 instanceof
        混合方式:
        function classA(){}
        function classB(){}
        function classC(){
            classA.call(this);
            classC.call(this);
        }
        classC.prototype = new classA ;//注意 这
instanceof 只能对 A有用

        






   


评论

# re: javascript 基础总结(面向对象)  回复  更多评论   

2009-02-13 21:02 by 叶澍成
LZ需要好好排版下,呵呵。不然大家很难看啊

# re: javascript 基础总结(面向对象)  回复  更多评论   

2009-02-16 09:24 by Skynet
啊 不好意哦
我这文章本来就出自 google doc 的

如果感觉 看的费劲 就在 (不过排版也是够呛,不过比上面好点)
http://docs.google.com/Doc?id=dkvfctc_26f8krcdct&hl=en

只有注册用户登录后才能发表评论。


网站导航: