Javascript 中的高级构造

Question

我在 github 上发现了一个有趣的项目，该项目处理 pdf 渲染浏览器。

我尝试阅读代码，因为我对这个主题感兴趣，但我意识到我的 javascript 知识很差（不足）。

有这样的结构：

var Obj = (function() {
    function constructor(type, value) {
    this.type = type;
    this.value = value;
    }

    constructor.prototype = {
    };

    var types = [
    "Bool", "Int", "Real", "String", "Name", "Null",
    "Array", "Dict", "Stream", "Ref",
    "Cmd", "Error", "EOF", "None"
    ];

    for (var i = 0; i < types.length; ++i) {
    var typeName = types[i];
    constructor[typeName] = i;
    constructor.prototype["is" + typeName] =
    (function (value) {
     return this.type == i &&
     (typeof value == "undefined" || value == this.value);
     });
    }

    constructor.prototype.lookup = function(key) {
      function lookup(key) {
        if (!(this.value.contains(key)))
          return Obj.nullObj;
        return this.value.get(key);
      }
    }

    Object.freeze(constructor.trueObj = new constructor(constructor.Bool, true));
    Object.freeze(constructor.falseObj = new constructor(constructor.Bool, false));
    Object.freeze(constructor.nullObj = new constructor(constructor.Null));
    Object.freeze(constructor.errorObj = new constructor(constructor.Error));
    Object.freeze(constructor.prototype);
    Object.freeze(constructor);

    return constructor;
})();

您可以在上面的链接中看到更多。

您能否建议我一些学习资源，以便能够轻松理解项目中的代码，甚至更好地为项目做出贡献？

Answer 1

从外到内工作，这里的第一个大概念是匿名函数。

var Obj = (function() { /* do work */})();

简单来说，我们正在创建一个匿名函数，然后立即执行它，
并将匿名函数的返回值分配给名为 Obj 的变量。

为什么有人想要这样做？

在本例中，它用于创建私有范围。 javascript中的局部变量是
作用域为定义它们的函数。例如：

function test() {
    var a = 10;
}

// a is not defined here.

在最后一个例子中，a实际上只存在于函数的作用域内
定义了它。 Javascript 在这方面有点棘手，因为省略了 var
关键字，可以定义全局变量。

所以在你给出的例子中，他们使用这个匿名函数来构建一个
一些将被使用但最终会被抛出的变量的作用域
函数执行完毕后立即消失。

接下来：

var Obj = (function() {
    function constructor(type, value) {
        this.type = type;
        this.value = value;
    }

    // SNIP
})();

这将创建一个名为 constructor 的新函数。需要注意的是 javascript 函数
是一流对象，这意味着它们的工作方式与任何其他对象非常相似，并且可以被指派
到一个变量。该函数的作用域为匿名函数。所以试图让 constructor 出来
超出了其功能范围，不起作用。例如

var Obj = (function() {
    function constructor(type, value) {
        this.type = type;
        this.value = value;
    }

    // SNIP
})();

typeof(constructor) // <= undefined

，到目前为止，如果您要执行到目前为止的代码片段，那么 Obj 将是未定义的。现在
让我们跳到最后，看看返回结果。

var Obj = (function() {
    function constructor(type, value) {
        this.type = type;
        this.value = value;
    }

    // SNIP

    return constructor;
})();

因此，当调用匿名函数时，它会返回构造函数。这个函数得到
传回的值被分配给Obj。这将构造函数交回，超出了本地范围
函数，并赋值给变量。然后您就可以调用它

var Obj = (function() {
    function constructor(type, value) {
        this.type = type;
        this.value = value;
    }

    // SNIP

    return constructor;
})();

var o1 = new Obj("t", "v");
o1.type // <= "t"
o1.value // <= "v"

接下来我们有一个有趣的行

var Obj = (function() {
    function constructor(type, value) {
    this.type = type;
    this.value = value;
    }

    constructor.prototype = { };

    // SNIP

    return constructor;
})();       

这将构造函数的原型设置为空对象。解释原型的细节是
这篇文章的一部分范围，但过于简单的是原型定义了实例方法
可用于由构造函数创建的对象。之间共享一个“原型”
并将用于定义可用于构造的对象的方法
调用new Obj()。

接下来，我们有一个本地定义的数组，

var types = [
    "Bool", "Int", "Real", "String", "Name", "Null",
    "Array", "Dict", "Stream", "Ref",
    "Cmd", "Error", "EOF", "None"
];

请记住，因为我们位于函数内部，所以该变量绑定在外部匿名函数的作用域内。

接下来我们循环遍历该数组，并设置一些东西。

for (var i = 0; i < types.length; ++i) {
    var typeName = types[i];
    constructor[typeName] = i;
    constructor.prototype["is" + typeName] =
        (function (value) {
            return this.type == i &&
            (typeof value == "undefined" || value == this.value);
        });
}

这里发生了两件有趣的事情。首先，它在构造函数中设置一个“静态”属性，然后
在构造函数的原型上创建一个新函数。该函数称为“is”+ typeName。所以我们应该
生成一堆名为“isBool”、“isInt”、“isReal”等的实例方法。

constructor.prototype.lookup = function(key) {
  function lookup(key) {
    if (!(this.value.contains(key)))
      return Obj.nullObj;
    return this.value.get(key);
  }
}

接下来，我们定义另一个名为 lookup 的实例方法并执行一些工作。

最后，我们从构造函数中创建一些静态属性，并冻结它们（这样它们就不能被更改或扩展）

一旦一切都说完了，Obj 应该指向一个构造函数，我们应该能够这样说：

var myType = new Obj("MyType",undefined);
myType.isBool(undefined) //instance method
Obj.Bool  // static property

无论如何，我希望这有助于解释一些正在使用的概念。最重要的收获应该是
函数可以用来控制范围，并且函数是一级函数，并且可以传递
就像变量一样。您还可以使用点符号 (obj.property) 或方括号符号引用对象的属性
(obj["属性"])。

还有很多东西需要学习，所有的书籍建议都在这个线程中。如果没有提到我
还会推荐 Haverbeke 的 Eloquent JavaSript。

Answer 2

Douglas Crockford 的书 JavaScript: The Good Parts 是这是一个了解 JavaScript 强大功能的好地方，同时引导您远离丑陋（或完全危险）的部分。 他的网站还收集了有关该语言的有趣文章。我推荐两者。

Answer 3

也许其中一些链接会对您有所帮助：

https://developer.mozilla.org/en /Core_JavaScript_1.5_Guide/Details_of_the_Object_Model,
https://developer.mozilla.org/en/Introduction_to_Object-Oriented_JavaScript,
https://developer.mozilla.org/en/Core_JavaScript_1.5_Guide/Working_with_Objects ,
https://developer.mozilla.org/en/JavaScript/Guide/Inheritance_Revisited ,

Answer 4

我可以参考一些链接

我可以命名吗一个 JavaScript 函数并立即执行它？

http:// devlicio.us/blogs/sergio_pereira/archive/2009/02/09/javascript-5-ways-to-call-a-function.aspx

我希望你可以和他们一起学习

Answer 5

我找到了 Douglas Crockford(http://www.crockford.com/)、John Resig(< a href="http://ejohn.org/blog/" rel="nofollow">http://ejohn.org/blog/) 对于中级到高级概念很有用。查看其他人的代码（就像您正在做的一样）也会有所帮助。归根结底，没有什么比实际尝试这个概念更好的了，为此值得信赖的 Firebug 控制台仍然是最好的。