《JavaScript 模式》读书笔记(4)— 函数3

  这篇,我们来学习下自定义函数以及即时函数的内容。

 

四、自定义函数

  函数可以动态定义,也可以分配给变量。如果创建了一个新函数,并且将其分配给保存了另外函数的同一个变量,那么就以一个新函数覆盖了旧函数。在某种程度上,回收了旧函数指针以指向一个新函数。而这一切发生在旧函数体的内部。在这种情况下,该函数以一个新的实现覆盖并重新定义了自身。

var scareMe = function() {
    alert("Boo!");
    scareMe = function() {
        alert("Double Boo!");
    };
};

// 使用自定义函数
scareMe();
scareMe();
scareMe();

  当您的函数有一些初始化准备工作要做,并且仅需要执行一次,那么这种模式就非常有用。因为并没有理由去执行本可以避免的重复工作,即该函数的一些部分可能并不再需要。在这种情况下,自定义函数(self-defining function)可以更新自身的实现。

  这里多说下,个人觉得,这里的自定义,并非单纯的指开发者创建的非内置函数,而是指自己定义自己的函数,也就是self-defining。所以,这里要尤其注意一下。

  使用此模式可以显著地帮助您提升应用程序的性能,这是由于重新定义的函数仅执行了更少的工作。

  这种函数的另一个名称是“惰性函数定义”(lazy function definition),因为该函数直到第一次使用时才被正确的定义,并且其具有后向惰性执行了更少的工作。

  该模式的其中一个缺点在于,当它重定义自身时已经添加到原始函数的任何属性都会丢失。此外,如果该函数使用了不同的名称,比如分配给不同的变量或者以对象的方法来使用,那么重定义部分将永远不会发生,并且将会执行原始函数体。

  下面的例子,我们将上面的scareMe()函数以第一类对象的使用方式来使用:

  1. 添加一个新的属性
  2. 函数对象被分配给一个新的变量。
  3. 该函数也以一个方法的形式使用。
var scareMe = function() {
    alert("Boo!");
    scareMe = function() {
        alert("Double Boo!");
    };
};

// 1、添加一个新的属性
scareMe.property = "propertly";
// 2、赋值给另一个不同名称的变量
var prank = scareMe;
// 3、作为一个方法使用
var spooky = {
    boo:scareMe
};

// calling with a new name
prank(); //输出“Boo!”
prank(); //输出“Boo!”
console.log(prank.property); // 输出“properly”

// 作为一个方法来调用
spooky.boo(); //输出“Boo!”
spooky.boo(); //输出“Boo!”
console.log(spooky.boo.property); //输出“properly”

// 使用自定义函数
scareMe(); //输出“Double Boo!”
scareMe(); //输出“Double Boo!”
console.log(scareMe.property); //输出undefined

  正如上面代码所示,当将该函数分配给一个新的变量时,如预期的那样,函数的自定义(self-definition)并没有发生。每次当调用prank()时,它都通知"Boo!"消息,同时它还覆盖了全局scareMe()函数,但是prank()自身保持了旧函数的可见,其中还包括属性。当该函数以spooky对象当boo()方法使用时,也发生了同样的情况。所有这些调用不断的重写全局scareMe()指针,以至于当它最终被调用时,他才第一次具有更新函数主体并通知“Double boo”消息的权利。此外,它也不能访问scareMe.property属性。

  再多说两句,个人理解:

// 我们先来看,为什么上面的代码访问不到property属性。
// 我们把代码简化一下:
var scareMe = function() {
    alert("Boo!");
    scareMe = function() {
        alert("Double Boo!");
    };
};
scareMe.property = "propertly";

console.log(scareMe.property); //输出“propertly”
scareMe(); //输出“Boo!”
console.log(scareMe.property); //输出“undefined”
scareMe(); //输出“Double Boo!”
console.log(scareMe.property); //输出undefined

  这是为什么呢?在第一次执行scareMe()方法后,就找不到property属性了。因为第一次执行后,绑定的是外层变量的指针,此时在绑定属性的时候,是绑定在这个指针上的。而当函数执行了一次后,内部的scareMe()函数,替换了原来的函数指针。它已经不是曾经的它了!所以property属性是绑定在外层的,那当然再就找不到了被。

  那么,由于它被覆盖了。并且,以后不会再有新的东西覆盖掉这个“新函数指针”,所以,以后每次执行都不会执行旧的内容。所以,以后每次的执行都会打印"Double Boo!"。那么,我们再看代码:

// 我们先来看,为什么上面的代码访问不到property属性。
// 我们把代码简化一下:
var scareMe = function() {
    alert("Boo!");
    scareMe = function() {
        alert("Double Boo!");
        scareMe = function () {
            alert("Third Boo!");
        }
    };
};
scareMe.property = "propertly";

console.log(scareMe.property); //输出“propertly”
scareMe(); //输出“Boo!”
console.log(scareMe.property); //输出“undefined”
scareMe(); //输出“Double Boo!”
console.log(scareMe.property); //输出undefined
scareMe(); //输出“Third Boo!”
scareMe(); //输出“Third Boo!”
scareMe(); //输出“Third Boo!”

  我们来看这段代码,我自以为是的又加了一层,于是,我希望不用我说,你也已经懂了。

  最后,再说一下,为什么赋值给一个其它名字的变量以及用对象的方法来使用的时候,重定义永远没有发生。个人理解,因为你每次在执行的时候,赋值的动作是有的,但是并没有把我覆盖,所以,每次都是重定义,每次都无法执行新的内部逻辑。所以,在最开始的那个例子里,当你第一次调用scareMe()的时候,就走了Double Boo!语句。因为前面prank()或者spooky.boo()的每一次执行,都重新定义了scareMe()。希望我说的,你理解了。

 

五、即时函数

  即时函数模式(Immediate Function pattern)是一种可以支持在定义函数后立即执行该函数的语法。

(function() {
    alert('watch out!');
}());

  这种模式本质上只是一个函数表达式(无论是命名还是匿名的),该函数会在创建后立刻执行。在ECMAScript标准中并没有定义术语“即时函数(immediate function)”,但是这种模式非常简洁。

  该模式由一下几部分组成:

  • 可以使用函数表达式定义一个函数(函数声明是不可以的)。
  • 在末尾添加一组括号,这将导致该函数立即执行。
  • 将整个函数包装在括号中(只有不将该函数分配给变量才需要这样做)。
(function() {
    alert('watch out!');
})();

  这样的语法也可以,但是JSLint偏好第一种。

  这种模式是非常有用的,因为它为初始化代码提供了一个作用域沙箱。比如:当页面加载时,代码必须初始化执行一些设置任务,比如附加事件处理程序、创建对象等诸如此类的任务。所有这些工作仅需要执行一次,因此没有理由去创建一个可复用的命名函数。但是代码也还需要一些临时变量,而在初始化阶段完成后就不再需要这些变量。然而,以全局变量形式创建所有哪些变量是一个差劲的方法。这就是为什么需要一个即时函数的原因,用以将所有代码包装到它的局部作用域中,且不会将任何变量泄露到全局作用域中;

(function () {
    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
        today = new Date(),
        msg = 'Today is' + days[today.getDay()] + ', ' + today.getDate();
    alert(msg);
}());

  如果上面的代码没有包装在即时函数中,那么days、today和msg等变量将会成为全局变量,并遗留在初始化代码中。

 

即时函数的参数

  也可以将参数传递到即时函数中:

(function (who,when) {
    console.log("I met " + who + " on " + when);
}("Zaking",new Date()));

  一般情况下,全局对象是以参数方式传递给即时函数的,以便于在不使用window指定全局作用域限定的情况下可以在函数内部访问该对象,这样将使得代码在浏览器环境之外时具有更好的操作性。

(function (global) {
    // 通过global访问全局变量
}(this));

  请注意,一般来说,不应该传递过多的参数到即时函数中,因为这样将迅速成为一种阅读负担,导致在理解代码运行流程时需要不断地滚动到该函数的顶部和底部。

 

即时函数的返回值

  正如任何其他函数一样,即时函数可以返回值,并且这些返回值也可以分配给变量:

var result = (function() {
    return 2 + 2;
}());

  另一种方式也可以达到效果,即忽略包装函数的括号,因为将即时函数的返回值分配给一个变量时并不需要这些括号:

var result = function() {
    return 2 + 2;
}();

  这个语法虽然比较简单,但是看起来可能有点令人误解。在没有注意到该函数尾部的括号时,一些阅读代码的人可能会认为result变量指向一个函数。实际上,result指向由即时函数返回的值。

  另一种语法也可以得到同样的结果:

var result = (function() {
    return 2 + 2;
})();

  实际上,即时函数不仅可以返回原始值,还可以返回任意类型的值,包括另外一个函数。因此,可以使用即时函数的作用域以存储一些私有数据,而这特定于返回的内部函数。

var getResult = (function() {
    var res = 2 + 2;
    return function () {
        return res;
    }
}());

  上面这段代码,即时函数返回的值是一个函数,它将分配给变量getResult,并且将简单的返回res值,该值被预计算并存储在即时函数的闭包中。

  当定义对象属性时也可以使用即时函数。想象一下,如果需要定义一个在对象生存期内永远都不会改变的属性,但是在定义它之前需要执行一些工作以找出正确的值。此时,可以使用一个即时函数包装这些工作,并且即时函数的返回值将会成为属性值。

var o = {
    message:(function () {
        var who = "me",
            what = "call";
            return what + " " + who;
    }()),
    getMsg:function () {
        return this.message;
    }
};
console.log(o.getMsg())
console.log(o.message)

  这个例子中,message是一个字符串属性,而不是一个函数,但是它需要一个在脚本加载时执行的函数来帮助定义该o.message属性。

 

优点和用法

  即时函数模式得到了广泛的使用。它可以帮助包装许多想要执行的工作,且不会在后台留下任何全局变量。定义的所有这些变量将会是用于自调用函数的局部变量,并且不用担心全局空间被临时变量所污染。

  还可以使用即时函数模式来定义模块(当然ES6中以及由模块的概念了,但是这样的方法仍旧有学习的地方):

// 文件module1.js中定义的模块module1
(function() {
    //模块1的所有代码
}());

  使用这种方式,可以编写其他模块。然后,将该代码发布到在线站点时,可以决定哪些功能准备应用于黄金时间,并且使用构建脚本将对应文件合并。

 

  这篇文章就到这里了。后面还有...

posted @ 2020-03-27 21:17  Zaking  阅读(187)  评论(0编辑  收藏  举报