• Javascript基础知识


    一、变量类型

    1. 特点:没有数据类型。

    C#、Java是强类型化的语言,需要编译,而Javascript是弱类型语言,不需要编译。

    声明Javascript变量使用关键字var,”基本类型”有number、string、boolean和函数,他们是Javascript中所有对象的基石。

    <script type="text/javascript">
    
    var variable;
    
    alert(typeof(variable)); // 指向一个未定义的对象
    
    variable = 1; // 指向一个数字
    
    alert(typeof(variable));
    
    variable = true; // 指向一个bool值
    
    alert(typeof(variable));
    
    variable = "This is some string"; // 指向一个字符串类型
    
    alert(typeof(variable));
    
    </script>

    2. Null类型和undefined类型

    使用Javascript时,undefined和null之间的微妙差别很容易给代码带来问题。

    一个方法就是通过双感叹号(!!)来利用Javascript的类型强制转换。不用显示地检查变量是undefined或null,而只是用两次!!非操作符即可:

    If(!!something)
    {
        // some thing
    }
    <script type="text/javascript">
    
    var album;
    
    if (album == null) {
    
    alert("album is null");
    
    }
    
    if ((album != true) && (album != false)) {
    
    alert("album is not true or false");
    
    }
    
    if (!album) {
    
    alert("but !album is true");
    
    }
    
    if (5 == "5") {
    
    alert("number 5 equals string 5");
    
    }
    
    if ((0 == false) && (1 == true) && (!0) && (1)) {
    
    alert("0 is false and 1 is true");
    
    }
    
    if (("true" != 1) && ("false" != false)) {
    
    alert("but 1 is not 'true' and false is not 'false'");
    
    }
    
    if (typeof(album) == "undefined") {
    
    alert("the album type is undefined");
    
    }
    
    // 以上值全部都是true
    
    // 1.因为还没给album变量指向任何值,所以当它和null比较时,它们是相等的
    
    // 2.这个变量既不是true也不是false
    
    // 3.把变量按照bool值处理,javascript默认按false处理(!操作符强制把变量按bool值处理)
    
    // 4.当数字和字符串比较时,数字5被强制转换为字符串,类似于.ToString()方法
    
    // 5.在Javascript中,bool值true和false是分别按1和0处理的。
    
    // 0是false,所有非0的值都是true;但是字符串不能转换成等同的布尔值
    
    // 6.因为album变量没有指向任何值,所以它的类型是undefined
    
    </script>

    二、变量作用域

    Javascript中允许在使用变量之前不加声明(实际上是被隐式地声明了)。

    未加var关键字声明的变量会被自动指定为全局的作用域;(带来的问题:有的变量名会被重用;并且在不要求显式地声明变量的情况下外部作用域可能会被修改)

    加了var关键字声明的变量为局部变量。

    三、使用原型

    Javascript不像其他面向对象语言那样支持继承,但是可以使用函数来建模数据类型。

    <script type="text/javascript">
    
    // 创建一个类
    
    function Album(title, artist) {
    
    // 类成员
    
    this._title = title;
    
    this._artist = artist;
    
    }
    
    // 给类添加数据
    
    var album1 = new Album("领悟", "李宗盛");
    
    var album2 = new Album("征服", "那英");
    
    // 方法
    
    function listing() {
    
    return this._artist + ": " + this._title;
    
    }
    
    // 使用原型给album类型添加Listing属性(实际是函数)
    
    Album.prototype.Listing = listing;
    
    alert(album1.Listing());
    
    alert(album2.Listing());
    
    </script>

    Prototype对象代表着对象类型自己,可以把它看成一个类型定义。对象的任何实例都继承了所有的原型信息。已经创建的所有此类型对象,都会立即拥有基类的更新功能。当然了,可以在此对象定义中添加一个函数,这样将来创建的所有对象实例都可以使用此函数,而不用直接修改原型。

    这种方式的缺点就是每个实例都必须按这种方式得到新函数的一个副本。使用对象的原型可以扩展对象的功能,这是在C#中建立静态方法和属性的自然方式。修改Javascript的原型就像修改.NET的基类,而不需要派生类知道进行了这个修改。

    Javascript的prototype对象甚至允许修改其内置类型(如string)。向此脚本引擎提供的内部对象添加新功能时,就会对这个动态语言的强劲功能和灵活性有一定的了解。我们不用创建此类型的一个子类,并修改所有的代码来使用这个新派生类的新功能。

    <script type="text/javascript">
    
    var sample = "I Love Javascript";
    
    function ReverseString() {
    
    var returnVal = "";
    
    var str1 = sample.split(' ');
    
    for (var i = str1.length - 1; i >= 0 ; i--) {
    
    returnVal += str1[i] + " ";
    
    }
    
    return returnVal;
    
    }
    
    // 给String原型添加一个反转字符串的方法
    
    String.prototype.ReverseString = ReverseString;
    
    var result = sample.ReverseString();
    
    document.write(sample + "<br />");
    
    document.write(result + "<br />");
    
    </script>

    四、关于闭包

    闭包指的是定义一个内部函数的方式,这种函数可以利用外部函数的环境状态,使该状态在外部是可见的,因此可以在外部函数返回执行这个内部函数。闭包的形为取决于创建此闭包时已经存在的状态和作用域。Javascript中的作用域行为和C#中的作用域是一样的,只有一点不同,Javascript会把未声明的(未使用var关键字)的变量指定为全局作用域。

    如果要搜索闭包的信息,会找到一些很难理解、非常复杂的解释。要解释闭包,具体的示例要比正式的定义要好。

    <script type="text/javascript">
    
    function CreateFunction(num) {
    
    var NewFunction = function () {
    
    document.write(num + " 的平方 = " + num * num + "<br />");
    
    }
    
    return NewFunction();
    
    }
    
    var functions = new Array();
    
    for (var i = 0; i < 10; i++) {
    
    functions[i] = CreateFunction(i);
    
    }
    
    for (var j = 0; j < 10; j++) {
    
    functions[j]();
    
    }
    
    </script>

    五、垃圾机制

    Javascript是一个可以进行垃圾收集的语言。对象超出作用域,且不再有对它的引用时,系统就可以释放此变量,并且回收它占用的内存和资源。

    六、处理异常

    Javascript支持类似C#的异常处理方式。代码可以抛出异常。如果把代码放到try代码块中,相应的catch块就可以处理异常。之后,finally代码块来处理必要的垃圾回收和全局恢复工作。

    <script type="text/javascript">
    
    try {
    
    var now = new Date().getTime();
    
    if ((now % 2 === 0)) {
    
    throw "even ticks";
    
    }
    
    else {
    
    throw "odd ticks";
    
    }
    
    }
    
    catch (ex) {
    
    if (ex === "even ticks") {
    
    document.write("发生了一个偶数异常 <br />");
    
    }
    
    else if (ex === "odd ticks") {
    
    document.write("发生了一个奇数异常 <br />");
    
    }
    
    else {
    
    alert(ex);
    
    document.write("奇迹发生了!!");
    
    }
    
    }
    
    finally {
    
    document.write("all done");
    
    }
    
    </script>

    七、获取字符串的一部分

    <script type="text/javascript">
    var aString = "0123456789";
    document.write(aString.substr(2) + "<br />");
    document.write(aString.substring(2) + "<br />");
    document.write(aString.substr(2, 5) + "<br />");
    document.write(aString.substring(2, 5) + "<br />");
    // .substr(start,count)
    // .substring(start,end)
    </script>

    八、更好的使用Javascript

    1. 减少脚本:压缩脚本大小,服务器开启压缩功能

    2. 脚本压缩:通过替换变量名来减小脚本的尺寸、

    3. 使用缓存变量
    在编译语言中,编译器可以做一些工作,使代码执行更快。可以把函数中反复引用的变量的指针存储在寄存器中,以快速。方便地在整个函数中访问这个变量。在Javascript中,变量的解析是后期绑定的。每次使用变量时,就会在此作用域链中搜索这个对象,这可能花费时间。最好不要构建字符串,再在DOM元素中存储它们,而是在局部变量中构建字符串,然后统一为DOM元素赋值。

    当循环一个数组时,要改善性能,可以初始化一个保存此数组长度的变量,而不是每次访问数组的length属性

    for(var i=0; var l=someArray.length; i<l;i++)
    
    for(var i=0; i<someArray.length; i++)

    it’s not over…

  • 相关阅读:
    07组合,模版
    06享元、责任链
    05观察,命令
    04代理,迭代器
    03单例,策略
    02工厂,创建者
    01基础
    css随记02布局
    css随记01编辑技巧,背景与边框
    nodejs随记03
  • 原文地址:https://www.cnblogs.com/fanyong/p/2747250.html
Copyright © 2020-2023  润新知