xiaotao.2010

浏览: 217655 次
性别:
来自: 成都

最近访客更多访客>>

追逐什么

yhtppp

anguse

cyxinda

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

JS 笔记--基础篇

博客分类：

JavaScript

浅谈JavaScript的语言特性

一片很好的JSer入门和复习查阅的帖子；

-------------------------------------------------------------------------------------------------------------------------------

JS - OO思想

ECMA-262 定义对象为：“无序属性的集合，其属性可以包含基本值、对象或者函数。”

严格来讲，这就相当于说对象是一组没有特定顺序的值。对象的每个属性或方法都有一个名字，而且每个名字都映射到一个值。正因为这样，我们可以把ECMAScript的对象想象成散列表：无非就是一组名值对，其中值可以是数据或函数。

1、特殊事件

<!-- 此为浏览器出发基于 javascript 的引擎，来执行js程序 -->
<a href="javascript:alert('helloWorld!')"> 点我</a>

<!--该为基于事件，基于onclick事件  -->
<a href="1.html" onclick="alert('helloWorld!')"> 点我</a>

2、Js声明变量

  <script type="text/javascript" >
        var i = 100; //此为Js声明的若变量
        ii = 100; // Js中不用“var”声明变量，Js则认为此为全局变量，
                  //除非是你想使用全局变量，否则不建议这样使用，避免Js程序变量冲突
    </script>

3、理解函数传入的参数

<script type="text/javascript" >

    /* ECMAScript函数的参数：函数不介意传递多少个参数进来，哪怕不定义传入参数，函数也能已数组形式接受参数
     * 通过arguments[i] 来获取传入参数。
     */
    function clickMe() {
        alert('ClickMe say : '+arguments[0]+' ; '+arguments[1]);
    }

       
    </script>


 <div>
    <input type="button" name="点我22" value="点我22" onclick="clickMe('你好','你不好')" />
    </div>

例如：

<body>
<script type="text/javascript" > 
function clickMe(a) {
        alert('ClickMe say : ' + a + ' ; ' + arguments[0]);
        
    }
</script>

    <input type="button" name="点我22" value="点我22" onclick="clickMe('你好','你不好')" />

</body>

4、JS中没有重载，遇到相同函数名不同参数时，后面的函数回覆盖前面的函数。

5、with(location)和try...catch(e)

<head runat="server">
<script type="text/javascript" >

    function clickMe() {
        /* 引用类型 */

        /* 使用Object引用类型创建对象 */
        var person = new Object();
        person.name = "cht";
        person.age = 24;

        /* 使用“对象字面量”表示法，创建对象 */
        var person2 = {
            name  : "wjh" ,
            age : 24
        };
        alert(person + " ; /n/r" + person2);
    }

    </script>
</head>

6、引用类型

<head runat="server">
<script type="text/javascript" >
    debugger; //断点调试

     function clickMe() {
        /* 引用类型 */

        /* 使用Object引用类型创建对象 */
        var person = new Object();
        person.name = "cht";
        person.age = 24;

        /* 使用“对象字面量”表示法，创建对象 */
        var person2 = {
            name  : "wjh" ,
            age : 24
        };

        /*   var person = new Object()等于var person = {}*/
        alert(person + " ; /n/r" + person2);
    }

    </script>
</head>

7、Array类型

<head runat="server">
 <script type="text/javascript" >
    debugger; //断点调试

     function clickMe() {
        /* Array 类型 */
        /* Array对象创建*/

        //1、普通
        var person = new Array();

        //2、2B
        var person = new Array(20);

        //3、文艺
        var person = new Array("red","blue","green");

         //4、NB
        var person = ["red","blue","green"];
    </script>
</head>

8、Js特殊对象arguments和this

<head runat="server">
 <script type="text/javascript" >
 

    function clickMe() {
        alert(factorial(10));
    }
    /*
     *JavaScript中两个特殊的对象：arguments和this
     * this : 不解释了
     * arguments ：只当前函数传递的参数，arguments已数组的方式存在；
     * arguments中有个特殊属性 callee，它指向拥有这个arguments函数的指针。
     *
    */
    function factorial(num) {
        if(num <= 1){
            return 1 ;
        } else {
            alert(num);
            return arguments.callee(num - 1); //arguments.callee(num -1)执行当前arguments的函数，传入参数num-1（获取对当前执行的函数的引用）
        }
    }
    </script>
</head>

9、ECMAScript -262面向对象，对象实例化（工厂方法，构造函数、原型模式）,hasOwnProperty(),in的用法

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function clickMe() {
            /* 1、【弃用】实例化工厂方法对象 */
            //debugger;
            /* 2、实例化构造函数对象 */
            var person1 = new Person("tom", 12, "F");
            person1.sayName();

            /* 3、【常用】实例化原型模式对象 */
            var superPerson = new SuperPerson();   
            superPerson.sayName();
            /* PS: 实例拥有自己的属性存储空间，
             * superPerson.name = "11"，屏蔽SuperPerson原型中的name属性，
             * 原型中的SuperPerson.prototype.name = "jenny"，始终保存，
             * if (superPerson.hasOwnProperty("name")){//true 为实例中存在name属性}
             * if ("name" in SuperPerson){//true 为原型中存在name属性}
             */
            
            
           
        }

        /* 构造函数，注意所有使用new的函数都可以叫做构造函数，构造函数的首字母要大写
         * 如下： function Person(name,age,sex)中的Person，P需要大写。
        */
        function Person(name,age,sex) {
            this.name = name;
            this.sex = sex;
            this.age = age;
            this.sayName = function () { //定义函数，常犯错误 this.sayName = new function(){};
                alert(this.name);
            };
        }

        /* 原型模式：创建的每一个函数都有一个prototype（原型）属性，这个属性是一个“对象”，它的“用途”
         * 是包含可以有特定类型的所有实例共享的属性和方法。
         * 按字面意思来理解，那么prototype就是通过调用构造函数而创建的那个对象的原型对象。 
        *
        */
        function SuperPerson() {
        }

        /* 普通写法 */
        SuperPerson.prototype.name = "jenny";
        SuperPerson.prototype.age = 12;
        SuperPerson.prototype.sex = "M";
        SuperPerson.prototype.sayName = function () {
            alert(this.name);
        };

         /*  对象字面量 写法 */
        SuperPerson.prototype = {
            constructor: Person , //将构造器指向Person
            name : "jenny01",
            age : 1201,
            sex : "M01",
            sayName: function () {
                alert(this.name);
            }
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" name="点我 " value="点我 " onclick="clickMe()" />
    </form>
</body>
</html>

（9、补充）

组合使用构造函数模式和原型模式，ECMAScript中最常用的使用方法：

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <script type="text/javascript">
        function clickMe() {
    
            var person1 = new Person("tom1", 12, "F");
            person1.sayFriends();
            var person2 = new Person("tom2", 122, "F2");
            person2.friends.push("3");
            person2.sayFriends();
        }

        /* 组合使用构造函数模式和原型模式，目前ECMAScript中广泛使用*/

        /*
        * 将所有属性写在构造函数模式中，构造函数模式中，它的每个属性和方法都无法得到复用
        */
        function Person(name,age,sex) {
            this.name = name;
            this.sex = sex;
            this.age = age;
            this.friends = ["1111", "2222"];
        }

        /*
        * 将所有方法写在原型模式中，prototype属性来指定哪那些应该共享的属性和方法。
        */
        Person.prototype = {
            constructor: Person,
            sayFriends: function () {
                var friends = "[";
                for (var i in this.friends) {
                    friends = friends + this.friends[i].valueOf() + " , ";
                }
                friends = friends + "]";
                alert(friends);
            }
        };
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <input type="button" name="点我 " value="点我 " onclick="clickMe()" />
    </form>
</body>
</html>

分享到：

JS 笔记--中级篇 | 各种免费的Webservice接口

2013-02-04 15:24
浏览 1022
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS 笔记--基础篇

浅谈JavaScript的语言特性

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

JS 笔记--基础篇

浅谈JavaScript的语言特性

评论

发表评论

相关推荐

一些达成共识的JavaScript编码风格约定(引)

禁用浏览器后退按钮

JS 笔记--BOM

JS 笔记--中级篇

HTML5 本地存储 LocalStorage

js跳转方式

JavaScript动态更改input的disabled属性

JS 验证

ajax 学习笔记

网页制作技术总结：常用Javascript语句

最近访客更多访客>>