资讯专栏INFORMATION COLUMN

JavaScript高级程序设计-摘要笔记-5

JerryWangSAP / 930人阅读

摘要:函数表达式和闭包函数声明的一个重要特征是函数声明提升如递归递归函数是在一个函数通过名字调用自身的情况下构成的。注意中已经是块级作用域了,所以这些东西感觉实际用途没有那么大,但是对理解闭包对作用域链中的属性的引用,这一点还是有作用的。

函数表达式和闭包 1. 函数声明的一个重要特征是函数声明提升

如:

</>复制代码

  1. sayHi()
  2. function sayHi () {
  3. console.log("hi")
  4. }
2. 递归

递归函数是在一个函数通过名字调用自身的情况下构成的。
如:

</>复制代码

  1. function factorial (num) {
  2. if (num <= 1) {
  3. return 1
  4. } else {
  5. return num * factorial(num - 1) // 这里存在强耦合,不太好
  6. }
  7. }

比如下面的代码会导致它出错

</>复制代码

  1. var anotherFactorial = factorial
  2. factorial = null
  3. anotherFactorial(3) // 出错:factorial is not a function
  4. arguments.callee 是一个指向正在执行函数的指针,可以做如下改善:
  5. function factorial (num) {
  6. if (num <= 1) {
  7. return 1
  8. } else {
  9. return num * arguments.callee(num - 1)
  10. }
  11. }

严格模式下使用 arguments.callee 会出错。可以做以下改善

</>复制代码

  1. var factorial = (function f (num) {
  2. if (num <= 1) {
  3. return 1
  4. } else {
  5. return num * f(num - 1)
  6. }
  7. })

我的理解:这里的 f 只在函数内部有效,所以不会受到外界影响,外部得不到这个变量。

</>复制代码

  1. (function test () {
  2. console.log("this is test")
  3. })
  4. test() // 报错。

用小括号括起来的函数声明在外部是得不到的,test()只有函数内部可以用

3. 闭包

闭包指有权访问另一个函数作用域中的变量的函数。
创建闭包的常用方式,就是在一个函数内部创建另一个函数。
如:

</>复制代码

  1. function createComparisonFunction (propertyName) {
  2. return function(obj1, obj2) {
  3. var value1 = obj1[propertyName]
  4. var value2 = obj2[propertyName]
  5. return value1 - value2
  6. }
  7. }
  8. var obj = [{age: 13}, {age: 29}, {age: 18}, {age: 37}, {age: 5}, {age: 14}]
  9. var compare = createComparisonFunction("age")
  10. var obj2 = obj.sort(function (a, b) {
  11. compare(a, b)
  12. })

这个例子中,内部函数访问了外部函数的变量 propertyName,而且即使被返回了在其它地方调用,仍然可以访问。
是因为内部函数的作用域链中包含了 createComparisonFunction 的作用域链。

由于闭包会携带包含它的函数的作用域,因此会比其它函数占用更多的内存。

4. 闭包与变量

闭包作用域链的配置机制有一个副作用,闭包只能取得包含函数中任何变量的最后一个值,因为闭包保存的是整个变量对象,不是某个特殊的变量。
如:

</>复制代码

  1. function createFunction () {
  2. var result = []
  3. for (var i = 0; i < 10; i++) {
  4. result[i] = function () {
  5. return i
  6. }
  7. }
  8. return result
  9. }
  10. // 返回数组中每个函数的执行结果都是10

改善版:

</>复制代码

  1. function createFunction () {
  2. var result = []
  3. for (var i = 0; i < 10; i++) {
  4. result[i] = (function (num) {
  5. return function () {
  6. return num
  7. }
  8. }(i))
  9. }
  10. return result
  11. }

这样就按预期来返回值了,这里通过立即执行函数把变量 i 的当前值作为参数传递到了内部闭包函数里,由于函数的基本类型参数是按值传递,
所以每个内部闭包函数保存的值都是当前 i 值。

5. 关于闭包的this对象

</>复制代码

  1. var name = "window";
  2. (function () {
  3. this.name = "fn"
  4. console.log(this.name) // "fn"
  5. var obj = {
  6. name: "obj",
  7. getFunc: function () {
  8. return function () {
  9. console.log(this.name)
  10. }
  11. }
  12. }
  13. obj.getFunc()() // "fn"
  14. }())

闭包函数的this指向它被调用时的作用域对象。
每个函数被调用时都会自动取得两个特殊的变量:this 和 arguments。在调用这两个变量时,只会搜索到其活动对象为止。
this 的改变,如:

</>复制代码

  1. var name = "the Window"
  2. var obj = {
  3. name: "obj",
  4. getName: function () {
  5. console.log(this.name)
  6. }
  7. }
  8. obj.getName(); // "obj"
  9. (obj.getName)(); // "obj"
  10. (obj.getName = obj.getName)(); // "the Window"
  11. var obj2 = {
  12. name: "obj2"
  13. }
  14. (obj2.getName = obj.getName)(); // "the Window"
  15. // 这里我的理解是相当于一个立即执行函数,这个立即执行函数是在window环境下被执行的,所以返回window下的变量值。
  16. obj2.getName = obj.getName
  17. obj2.getName() // "obj2"
6. 通过构造函数创建私有变量和特权方法

如:

</>复制代码

  1. function Person (name) {
  2. this.getName = function () {
  3. return name
  4. }
  5. this.setName = function (value) {
  6. name = value
  7. }
  8. }
  9. var ming = new Person("ming")
  10. ming.name // undefined
  11. ming.getName() // "ming"
  12. ming.setName("ming2")
  13. ming.getName() // "ming2"

说明:getName() setName() 在构造函数外部使用,只有这两个方法有权访问私有变量name,没有其它办法,因为它们作为闭包能够通过作用域链访问name
这种方法创建私有变量和特权方法有构造函数所共有的缺点——函数没有复用。

7. 静态私有变量

</>复制代码

  1. (function () {
  2. var name = ""
  3. Person = function (value) {
  4. name = value
  5. }
  6. Person.prototype.getName = function () {
  7. return name
  8. }
  9. Person.prototype.setName = function (value) {
  10. name = value
  11. }
  12. }())
  13. var ming = new Person("ming")
  14. ming.getName() // "ming"
  15. ming.setName("ming2")
  16. ming.getName() // "ming2"
  17. var li = new Person("li")
  18. li.getName() // "li"
  19. ming.getName() // "li" // 说明所有实例都是对作用域链中的 name 的引用

说明:这里立即执行函数里Person使用函数表达式来定义,而且没有使用 var , 是为了形成全局变量。

</>复制代码

  1. 或者先在全局定义一下 Person也可以。
  2. var Person = function () {}

注意:es6 中已经是块级作用域了,所以这些东西感觉实际用途没有那么大,但是对理解闭包对作用域链中的属性的引用,这一点还是有作用的。

8. 模块模式

指为单例创建私有变量和特权方法。所谓单例,指的是只有一个实例的对象。
如:

</>复制代码

  1. var application = function () {
  2. var components = []
  3. components.push(new BaseComponent()) // BaseComponent 指初始化组建
  4. return {
  5. getComponentCount: function () {
  6. return components.length
  7. },
  8. registerComponent: function (component) {
  9. if (typeof component === "object") {
  10. components.push(component)
  11. }
  12. }
  13. }
  14. }()

增强版,适合那种单例必须是某种类型的实例:

</>复制代码

  1. var application = function () {
  2. var components = []
  3. components.push(new BaseComponent())
  4. var app = new Base()
  5. app.getComponentCount = function () {
  6. return components.length
  7. }
  8. app.registerComponent = function (component) {
  9. if (typeof component === "object") {
  10. components.push(component)
  11. }
  12. }
  13. return app
  14. }()

</>复制代码

  1. // 函数表达式和闭包部分结束

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/86521.html

相关文章

  • JavaScript高级程序设计摘要笔记-1

    摘要:说明此摘要笔记系列是我最近看高级程序设计第版随手所记。摘要笔记本身没有系统性,没有全面性可言,写在这里供有一定基础的前端开发者参考交流。对每一项运行给定函数,返回该函数会返回的项组成的数组。是的反操作是的反操作第一部分结束。 说明: 此摘要笔记系列是我最近看《JavaScript高级程序设计(第3版)》随手所记。 里面分条列举了一些我认为重要的、需要记下的、对我有帮助的点,是按照我看...

    chavesgu 评论0 收藏0
  • JavaScript高级程序设计摘要笔记-3

    摘要:如果重设构造函数的原型对象,那么,会切断新的原型对象和任何之前已经存在的构造函数实例之间的联系,它们引用的仍然是最初的原型。说明返回的对象与构造函数或者与构造函数的原型属性没有关系。 说明: 此摘要笔记系列是我最近看《JavaScript高级程序设计(第3版)》随手所记。里面分条列举了一些我认为重要的、需要记下的、对我有帮助的点,是按照我看的顺序来的。摘要笔记本身没有系统性,没有全面性...

    AndroidTraveler 评论0 收藏0
  • JavaScript高级程序设计摘要笔记-2

    摘要:说明此摘要笔记系列是我最近看高级程序设计第版随手所记。其中,描述符对象的属性必须是设置其中一个或多个值,可以修改对应的特性值。如支持的浏览器,可以取得指定属性的描述符。 说明: 此摘要笔记系列是我最近看《JavaScript高级程序设计(第3版)》随手所记。里面分条列举了一些我认为重要的、需要记下的、对我有帮助的点,是按照我看的顺序来的。摘要笔记本身没有系统性,没有全面性可言,写在这里...

    roland_reed 评论0 收藏0
  • JavaScript高级程序设计摘要笔记-6

    摘要:关于对象定义了全局对象。支持的浏览器有除了接受要序列化的对象外,还可以接受另外两个参数。如果是数值,则表示每个级别缩进的空格数,最大,超过的值自动转换成。字符串长度超过,结果中将只出现前个字符。会在结果字符串中插入换行符提高可读性。 关于JSON 1. JSON 对象 es5 定义了全局对象 JSON。支持的浏览器有 IE8+ 、Firefox 3.5+ 、Safari 4+、Chro...

    Batkid 评论0 收藏0
  • JavaScript高级程序设计摘要笔记-4

    摘要:思路是,使用原型链对原型属性和方法进行继承,借用构造函数实现对实例属性的继承。注意使用寄生式继承来为对象添加函数,会由于不能做到函数复用而降低效率,这一点与构造函数模式类似。无论什么情况下都会调用两次超类型的构造函数。 说明: 此摘要笔记系列是我最近看《JavaScript高级程序设计(第3版)》随手所记。里面分条列举了一些我认为重要的、需要记下的、对我有帮助的点,是按照我看的顺序来的...

    zr_hebo 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<