Question

我在github上发现了一个有趣的项目，它在浏览器中处理pdf rendering。

我尝试阅读代码，因为我对这个主题感兴趣，但我意识到我的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函数是first-class objects，这意味着它们可以像任何其他对象一样工作，并且可以分配变量。此函数的范围限定为匿名函数。所以试图让constructor出局其功能范围的一面，不起作用。例如

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

    // SNIP
})();

typeof(constructor) // <= undefined

到目前为止，如果你要执行目前的snippits，那么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);
        });
}

这里发生了两件有趣的事情。首先，它设置了constructor之外的“静态”属性，然后在构造函数的原型上创建一个新函数。此函数称为"is" + typeName。所以我们应该生成一堆名为stuff的实例方法：“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

无论如何，我希望这有助于解释一些正在使用的概念。应该是最重要的收获是function可用于控制范围，并且该功能是一流的功能，并且可以被传递像变量。您还可以使用点表示法（obj.property）或括号表示法引用对象的属性（obj["property"]）。

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

Answer 2

Douglas Crockford's book JavaScript: The Good Parts是一个欣赏JavaScript强大功能的好地方，同时引导您远离丑陋（或彻头彻尾的危险）部分。 His website还有一系列有关该语言的有趣文章。我推荐两者。

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

我可以参考一些链接

Can I name a javascript function and execute it immediately?

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（http://ejohn.org/blog/）的博客对中级到高级概念很有用。查看其他人的代码（就像你正在做的那样）也会有所帮助。在一天结束时，虽然没有什么比实际尝试概念更好，因此可信赖的Firebug控制台仍然是最好的。

Javascript中的高级构造

5 个答案: