javascript高级程序设计-第三版-随记

一、逻辑与

        var result = true && false;

        逻辑与操作可以应用于任何类型的操作数,而不仅仅是布尔值。在有一个操作数不是布尔值的情况下,逻辑与操作就不一定返回布尔值;此时,它遵循下列规则:

        1、如果第一个操作数是对象,则返回第二个操作数;

        2、如果第二个操作数是对象,则只有在第一个操作数的求值结果为true 的情况下才会返回该对象;

        3、如果两个操作数都是对象,则返回第二个操作数;

        4、如果有一个操作数是null,则返回null;

        5、如果有一个操作数是NaN,则返回NaN;

        6、如果有一个操作数是undefined,则返回undefined。

二、逻辑或

        var result = true || false;

        与逻辑与操作相似,如果有一个操作数不是布尔值,逻辑或也不一定返回布尔值;此时,它遵循下列规则:

            1、 如果第一个操作数是对象,则返回第一个操作数;

            2、如果第一个操作数的求值结果为false,则返回第二个操作数;

            3、如果两个操作数都是对象,则返回第一个操作数;

            4、如果两个操作数都是null,则返回null;

            5、如果两个操作数都是NaN,则返回NaN;

            6、如果两个操作数都是undefined,则返回undefined。

三、with语句

        with 语句的作用是将代码的作用域设置到一个特定的对象中。with 语句的语法如下:

            with (expression) statement;

        定义with 语句的目的主要是为了简化多次编写同一个对象的工作,如下面的例子所示:

            var qs = location.search.substring(1);

            var hostName = location.hostname;

            var url = location.href;

        上面几行代码都包含location 对象。如果使用with 语句,可以把上面的代码改写成如下所示:

            with(location){

                var qs = search.substring(1);

                var hostName = hostname;

                var url = href;

            }

        注意:

            1、严格模式下不允许使用with 语句,否则将视为语法错误。

            2、由于大量使用with 语句会导致性能下降,同时也会给调试代码造成困难,因此在开发大型应用程序时,不建议使用with 语句。

四、switch

        switch 语句在比较值时使用的是全等操作符,因此不会发生类型转换(例如,字符串"10"不等于数值10)。

五、函数的参数

        ECMAScript 函数的参数与大多数其他语言中函数的参数有所不同。ECMAScript 函数不介意传递进来多少个参数,也不在乎传进来参数是什么数据类型。也就是说,即便你定义的函数只接收两个参数,在调用这个函数时也未必一定要传递两个参数。可以传递一个、三个甚至不传递参数,而解析器永远不会有什么怨言。之所以会这样,原因是ECMAScript 中的参数在内部是用一个数组来表示的。函数接收到的始终都是这个数组,而不关心数组中包含哪些参数(如果有参数的话)。如果这个数组中不包含任何元素,无所谓;如果包含多个元素,也没有问题。实际上,在函数体内可以通过arguments 对象来访问这个参数数组,从而获取传递给函数的每一个参数。

        其实,arguments 对象只是与数组类似(它并不是Array 的实例),因为可以使用方括号语法访问它的每一个元素(即第一个元素是arguments[0],第二个元素是argumetns[1],以此类推),使用length 属性来确定传递进来多少个参数。在前面的例子中,sayHi()函数的第一个参数的名字叫name,而该参数的值也可以通过访问arguments[0]来获取。因此,那个函数也可以像下面这样重写,即不显式地使用命名参数:

        function sayHi() {

            alert("Hello " + arguments[0] + "," + arguments[1]);

        }

        这个重写后的函数中不包含命名的参数。虽然没有使用name 和message 标识符,但函数的功能依旧。这个事实说明了ECMAScript 函数的一个重要特点:命名的参数只提供便利,但不是必需的。另外,在命名参数方面,其他语言可能需要事先创建一个函数签名,而将来的调用必须与该签名一致。但在ECMAScript 中,没有这些条条框框,解析器不会验证命名参数。

        通过访问arguments 对象的length 属性可以获知有多少个参数传递给了函数。下面这个函数会在每次被调用时,输出传入其中的参数个数:

            function howManyArgs() {

                alert(arguments.length);

            }

            howManyArgs("string", 45);          //2

            howManyArgs();                           //0

            howManyArgs(12);                       //1

六、延长作用域链

        虽然执行环境的类型总共只有两种——全局和局部(函数),但还是有其他办法来延长作用域链。这么说是因为有些语句可以在作用域链的前端临时增加一个变量对象,该变量对象会在代码执行后被移除。在两种情况下会发生这种现象。具体来说,就是当执行流进入下列任何一个语句时,作用域链就会得到加长:

        1. try-catch 语句的catch 块;

        2. with 语句。

        这两个语句都会在作用域链的前端添加一个变量对象。对with 语句来说,会将指定的对象添加到作用域链中。对catch 语句来说,会创建一个新的变量对象,其中包含的是被抛出的错误对象的声明。下面看一个例子。

        function buildUrl() {

            var qs = "?debug=true";

            with(location){

                var url = href + qs;

            }

            return url;

        }

        在此,with 语句接收的是location 对象,因此其变量对象中就包含了location 对象的所有属性和方法,而这个变量对象被添加到了作用域链的前端。buildUrl()函数中定义了一个变量qs。当在with 语句中引用变量href 时(实际引用的是location.href),可以在当前执行环境的变量对象中找到。当引用变量qs 时,引用的则是在buildUrl()中定义的那个变量,而该变量位于函数环境的变量对象中。至于with 语句内部,则定义了一个名为url 的变量,因而url 就成了函数执行环境的一部分,所以可以作为函数的值被返回。

七、没有块级作用域

        JavaScript 没有块级作用域经常会导致理解上的困惑。在其他类C 的语言中,由花括号封闭的代码块都有自己的作用域(如果用ECMAScript 的话来讲,就是它们自己的执行环境),因而支持根据条件来定义变量。例如,下面的代码在JavaScript 中并不会得到想象中的结果:

        if (true) {

            var color = "blue";

        }

        alert(color); //"blue"

    这里是在一个if 语句中定义了变量color。如果是在C、C++或Java 中,color 会在if 语句执行完毕后被销毁。但在JavaScript 中,if 语句中的变量声明会将变量添加到当前的执行环境(在这里是全局环境)中。在使用for 语句时尤其要牢记这一差异,例如:

        for (var i=0; i < 10; i++){

            doSomething(i);

        }

        alert(i); //10

    对于有块级作用域的语言来说,for 语句初始化变量的表达式所定义的变量,只会存在于循环的环境之中。而对于JavaScript来说,由for 语句创建的变量i 即使在for 循环执行结束后,也依旧会存在于循环外部的执行环境中。

八、数组操作方法

    ECMAScript 5 为数组定义了5 个迭代方法。每个方法都接收两个参数:要在每一项上运行的函数和(可选的)运行该函数的作用域对象——影响this 的值。传入这些方法中的函数会接收三个参数:数组项的值、该项在数组中的位置和数组对象本身。根据使用的方法不同,这个函数执行后的返回值可能会也可能不会影响方法的返回值。以下是这5 个迭代方法的作用。

        1. every():对数组中的每一项运行给定函数,如果该函数对每一项都返回true,则返回true。    

        2. filter():对数组中的每一项运行给定函数,返回该函数会返回true 的项组成的数组。

        3. forEach():对数组中的每一项运行给定函数。这个方法没有返回值。

        4. map():对数组中的每一项运行给定函数,返回每次函数调用的结果组成的数组。

        5. some():对数组中的每一项运行给定函数,如果该函数对任一项返回true,则返回true。

    以上方法都不会修改数组中的包含的值。在这些方法中,最相似的是every()和some(),它们都用于查询数组中的项是否满足某个条件。对every()来说,传入的函数必须对每一项都返回true,这个方法才返回true;否则,它就返回false。而some()方法则是只要传入的函数对数组中的某一项返回true,就会返回true。

    ECMAScript 5 还新增了两个归并数组的方法:reduce()和reduceRight()。这两个方法都会迭代数组的所有项,然后构建一个最终返回的值。其中,reduce()方法从数组的第一项开始,逐个遍历到最后。而reduceRight()则从数组的最后一项开始,向前遍历到第一项。这两个方法都接收两个参数:一个在每一项上调用的函数和(可选的)作为归并基础的初始值。传给reduce()和reduceRight()的函数接收4 个参数:前一个值、当前值、项的索引和数组对象。这个函数返回的任何值都会作为第一个参数自动传给下一项。第一次迭代发生在数组的第二项上,因此第一个参数是数组的第一项,第二个参数就是数组的第二项。使用reduce()方法可以执行求数组中所有值之和的操作,比如:

                            var values = [1,2,3,4,5];

                            var sum = values.reduce(function(prev, cur, index, array){

                                return prev + cur;

                            });

                            alert(sum); //15

九、Function对象

        在函数内部,有两个特殊的对象:arguments 和this。其中,arguments它是一个类数组对象,包含着传入函数中的所有参数。虽然arguments 的主要用途是保存函数参数,但这个对象还有一个名叫callee 的属性,该属性是一个指针,指向拥有这个arguments 对象的函数。请看下面这个非常经典的阶乘函数。

            function factorial(num){

                if (num <=1) {

                    return 1;

                } else {

                    return num * factorial(num-1)

                }

            }

        定义阶乘函数一般都要用到递归算法;如上面的代码所示,在函数有名字,而且名字以后也不会变的情况下,这样定义没有问题。但问题是这个函数的执行与函数名factorial 紧紧耦合在了一起。为了消除这种紧密耦合的现象,可以像下面这样使用arguments.callee。

                function factorial(num){

                    if (num <=1) {

                        return 1;

                    } else {

                        return num * arguments.callee(num-1)

                    }

                }

        在这个重写后的factorial()函数的函数体内,没有再引用函数名factorial。这样,无论引用函数时使用的是什么名字,都可以保证正常完成递归调用。

        函数内部的另一个特殊对象是this,其行为与Java 和C#中的this 大致类似。换句话说,this引用的是函数据以执行的环境对象——或者也可以说是this 值(当在网页的全局作用域中调用函数时,this 对象引用的就是window)。来看下面的例子。

            window.color = "red";

            var o = { color: "blue" };

            function sayColor(){

                alert(this.color);

            }

            sayColor(); //"red"

            o.sayColor = sayColor;

            o.sayColor(); //"blue"

        上面这个函数sayColor()是在全局作用域中定义的,它引用了this 对象。由于在调用函数之前,this 的值并不确定,因此this 可能会在代码执行过程中引用不同的对象。当在全局作用域中调用sayColor()时,this 引用的是全局对象window;换句话说,对this.color 求值会转换成对window.color 求值,于是结果就返回了"red"。而当把这个函数赋给对象o 并调用o.sayColor()时,this 引用的是对象o,因此对this.color 求值会转换成对o.color 求值,结果就返回了"blue"。

        每个函数都包含两个属性:length 和prototype。其中,length 属性表示函数希望接收的命名参数的个数。prototype 属性是不可枚举的,因此使用for-in 无法发现。详见书本P134。

        每个函数都包含两个非继承而来的方法:apply()和call()。这两个方法的用途都是在特定的作用域中调用函数,实际上等于设置函数体内this 对象的值。首先,apply()方法接收两个参数:一个是在其中运行函数的作用域,另一个是参数数组。其中,第二个参数可以是Array 的实例,也可以是arguments 对象。例如:

        function sum(num1, num2){

            return num1 + num2;

        }

        function callSum1(num1, num2){

            return sum.apply(this, arguments); // 传入arguments 对象

        }

        function callSum2(num1, num2){

            return sum.apply(this, [num1, num2]); // 传入数组

        }

        alert(callSum1(10,10)); //20

        alert(callSum2(10,10)); //20

        在上面这个例子中,callSum1()在执行sum()函数时传入了this 作为this 值(因为是在全局作用域中调用的,所以传入的就是window 对象)和arguments 对象。而callSum2 同样也调用了sum()函数,但它传入的则是this 和一个参数数组。这两个函数都会正常执行并返回正确的结果。

        call()方法与apply()方法的作用相同,它们的区别仅在于接收参数的方式不同。对于call()方法而言,第一个参数是this 值没有变化,变化的是其余参数都直接传递给函数。换句话说,在使用call()方法时,传递给函数的参数必须逐个列举出来,如下面的例子所示。

        function sum(num1, num2){

            return num1 + num2;

        }

        function callSum(num1, num2){

            return sum.call(this, num1, num2);

        }

        alert(callSum(10,10)); //20

    在使用call()方法的情况下,callSum()必须明确地传入每一个参数。结果与使用apply()没有什么不同。至于是使用apply()还是call(),完全取决于你采取哪种给函数传递参数的方式最方便。如果你打算直接传入arguments 对象,或者包含函数中先接收到的也是一个数组,那么使用apply()肯定更方便;否则,选择call()可能更合适。(在不给函数传递参数的情况下,使用哪个方法都无所谓。)事实上,传递参数并非apply()和call()真正的用武之地;它们真正强大的地方是能够扩充函数赖以运行的作用域。下面来看一个例子。

        window.color = "red";

        var o = { color: "blue" };

        function sayColor(){

            alert(this.color);

        }

        sayColor(); //red

        sayColor.call(this); //red

        sayColor.call(window); //red

        sayColor.call(o); //blue

        这个例子是在前面说明this 对象的示例基础上修改而成的。这一次,sayColor()也是作为全局函数定义的,而且当在全局作用域中调用它时,它确实会显示"red"——因为对this.color 的求值会转换成对window.color 的求值。而sayColor.call(this)和sayColor.call(window),则是两种显式地在全局作用域中调用函数的方式,结果当然都会显示"red"。但是,当运行sayColor.call(o)时,函数的执行环境就不一样了,因为此时函数体内的this 对象指向了o,于是结果显示的是"blue"。

        使用call()(或apply())来扩充作用域的最大好处,就是对象不需要与方法有任何耦合关系。在前面例子的第一个版本中,我们是先将sayColor()函数放到了对象o 中,然后再通过o 来调用它的; 而在这里重写的例子中,就不需要先前那个多余的步骤了。

        ECMAScript 5 还定义了一个方法:bind()。这个方法会创建一个函数的实例,其this 值会被绑定到传给bind()函数的值。例如:

            window.color = "red";

            var o = { color: "blue" };

            function sayColor(){

                    alert(this.color);

            }

            var objectSayColor = sayColor.bind(o);

            objectSayColor(); //blue

            在这里,sayColor()调用bind()并传入对象o,创建了objectSayColor()函数。objectSayColor()函数的this 值等于o,因此即使是在全局作用域中调用这个函数,也会看到"blue"。这种技巧的优点请参考第22 章。支持bind()方法的浏览器有IE9+、Firefox 4+、Safari 5.1+、Opera 12+和Chrome。每个函数继承的toLocaleString()和toString()方法始终都返回函数的代码。返回代码的格式则因浏览器而异——有的返回的代码与源代码中的函数代码一样,而有的则返回函数代码的内部表示,即由解析器删除了注释并对某些代码作了改动后的代码。由于存在这些差异,我们无法根据这两个方法返回的结果来实现任何重要功能;不过,这些信息在调试代码时倒是很有用。另外一个继承的valueOf()方法同样也只返回函数代码。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,657评论 6 505
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,889评论 3 394
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,057评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,509评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,562评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,443评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,251评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,129评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,561评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,779评论 3 335
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,902评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,621评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,220评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,838评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,971评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,025评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,843评论 2 354

推荐阅读更多精彩内容

  • 第2章 基本语法 2.1 概述 基本句法和变量 语句 JavaScript程序的执行单位为行(line),也就是一...
    悟名先生阅读 4,149评论 0 13
  • 第3章 基本概念 3.1 语法 3.2 关键字和保留字 3.3 变量 3.4 数据类型 5种简单数据类型:Unde...
    RickCole阅读 5,126评论 0 21
  • 倚靠在火车的座位上,透过窗外,绿地、山川、泉水交替在眼中出现,色彩的更迭让他多了几分眩晕与困倦。当...
    郭壮的笔茗阅读 299评论 2 4
  • 在莫之城,我看到一群孩童在踢一个方形的足球。 足球为何是方形的? 我非常的好奇,于是用蹩脚的俚语问这群孩子。 可球...
    零凝阅读 316评论 2 3