7

我之前正在阅读如何“创建 JavaScript 库”，我遇到了这些让我想扯掉头发的代码。

这是让我的大脑陷入困境的代码：

if (window === this) {
    return new _(id);
}

_(id) 只是包含此代码的函数名称。如果您需要自己查看，这里是其余的代码。

function _(id) {

// About object is returned if there is no 'id' parameter
var about = {
    Version: 0.5,
    Author: "Michael Jasper",
    Created: "Fall 2010",
    Updated: "23 November 2011"
};

if (id) {

    // Avoid clobbering the window scope:
    // return a new _ object if we're in the wrong scope
    if (window === this) {
        return new _(id);
    }

    // We're in the correct object scope:
    // Init our element object and return the object
    this.e = document.getElementById(id);
    return this;
  } else {
    // No 'id' parameter was given, return the 'about' object
    return about;
  }
};

我以前从未见过“返回新功能”，但我很想了解它的功能。

另一段代码：

_.prototype = {
  hide: function () {
          this.e.style.display = 'none';
          return this;
  }

  show: function () {
           this.e.style.display = 'inherit';
           return this;
  }
};

我知道这段代码向 _ 对象添加了新方法，但为什么他们“返回这个”？我试过没有，它工作得很好。

最后一件事，文章的链接是http://www.mikedoesweb.com/2012/creating-your-own-javascript-library/

4

2 回答 2

16

第一段代码本质上是试图检测“构造函数”函数是如何被调用的......

在 javascript 中，您可以通过两种方式使用函数创建对象：

function _(id) {
    this.someProperty = "stuff";
    //Do more stuff to "this"
    return this;
}

//in this scenario, the "this" object will be the window object
var myObject = _(id);
console.log(window.someProperty); //outputs "stuff";
console.log(myObject.someProperty); //outputs "stuff";

//in this scenario, the "this" object is what get's actually returned...
var myObject = new _(id);
console.log(window.someProperty); //outputs "undefined"
console.log(myObject.someProperty); //outputs "stuff"

因此，检查

if (window === this) {
    return new _(id);
}

只是为了确保您不会在没有new关键字的情况下意外调用构造函数。这会很糟糕，因为您将分配给对象的任何属性都会立即分配给window命名空间......这会很糟糕。

至于您的第二个问题，作者return this;在每个方法的末尾使用 a 作为流畅的界面设计模式

这允许方便且美观的对象操作。一个常见的例子是 jQuery，您可以在其中将方法链接到一个对象...

$(".some-css-selector").click(function() { 
    ... do something to the selected objects during the "click" event
}).keyup(function() {
    ... do something to the same objects during the "keyup" event
});

编辑：针对以下 W3Geek 的评论提供更多附加信息：

来自 Douglas Crockford 的书“Javascript: The Good Parts”（如果您正在学习 JS，这完全是一本好书……只有 70 页，但每一页都值得一读）。

Javascript 的new操作符创建一个继承自操作数原型成员的新对象，然后调用操作数，将新对象绑定到this. 这使操作数（最好是构造函数）有机会在将新对象返回给请求者之前对其进行自定义。

如果您忘记使用 `new 运算符，您将获得一个普通的函数调用，并且 this 绑定到全局对象而不是新对象。这意味着您的函数在尝试初始化新成员时将破坏全局变量。这是一件非常糟糕的事情。

...

构造函数是设计为与new前缀一起使用的函数。new前缀基于函数的原型创建一个新对象，并将该对象绑定到函数隐含参数this。如果您忽略使用new前缀，则不会创建新对象，this并将绑定到全局对象。这是一个严重的错误。

于 2012-06-15T04:38:10.767 回答
6

return this使您能够链接方法调用。您可以做一些非常酷且有用的事情，例如，_.show().hide(). :)

于 2012-06-15T04:24:56.543 回答