我在 JavaScript 中以正确的方式使用“this”吗？答案

【问题标题】：im i using "this" the right way in JavaScript?我在 JavaScript 中以正确的方式使用“this”吗？
【发布时间】：2013-01-22 17:59:30
【问题描述】：

这是我的代码

ImageCarousel = (function() {
var currentIndex, imageManager, imagesVO, jsonPath, values;

currentIndex = null;

jsonPath = "json/images.json";

imagesVO = [];

values = null;

imageManager = null;

function ImageCarousel() {
  this.loadJson();
}

ImageCarousel.prototype.loadJson = function() {
  var _this = this;
  return $.ajax(jsonPath, {
    success: function(data, status, xhr) {
      console.log("yea " + data);
      _this.currentIndex = 0;
      _this.imagesVO = data.images;
      _this.imageManager = new ImageManager(data.images);
      _this.imagesCount = _this.imagesVO.length;
      _this.switchToImage(_this.currentIndex);
      $('#next').click(function() {
        _this.currentIndex = _this.incrementIndexByOne(_this.currentIndex);
        return _this.switchToImage(_this.currentIndex);
      });
      return $('#prev').click(function() {
        _this.currentIndex = _this.decrementIndexByOne(_this.currentIndex);
        return _this.switchToImage(_this.currentIndex);
      });
    },
    error: function(xhr, status, err) {
      return $('#imageHolder').html("problem loading the json file, </br>make sure you are running this on your local server");
    },
    complete: function(xhr, status) {}
  });
};

我是否正确使用“this”来引用 ImageCarousel 类中的变量？它会公开这些属性吗？如果是这样，我如何将它们保密？

【问题讨论】：

你想如何使用this？有几种使用this 的方法，其中许多方法很糟糕。您可以通过不公开它们来创建私有属性。如果您将它们添加到 this，您已经暴露了它们。
你不是说用var代替_this吗？

标签： javascript jquery oop

【解决方案1】：

不，您没有正确使用this。您尝试引用的那些属性都是私有的，因为没有外部代码可以通过调用 ImageCarousel 的某些属性来真正访问它们。

如果您出于某种原因确实想要公开这些变量，请不要使用var 声明它们。相反，请执行this.currentIndex = null 或this.jsonPath = "json/images.json" 之类的操作。当您这样做时，您实际上是在使这些属性可公开访问。任何外部代码都可以通过调用ImageCarousel.currentIndex、ImageCarousel.jsonPath 等来访问这些属性。

【讨论】：

我不明白。如果我使用函数 ImageCarousel() { imageHolderDiv = $('#imageHolder'); loadJson(); //我得到 Uncaught ReferenceError: loadJson is not defined }

【解决方案2】：

这有一些问题。这是带有更正的代码：

var ImageCarousel = function () {
    var currentIndex, imageManager, imagesVO, jsonPath, values;

    currentIndex = null;

    jsonPath = "json/images.json";

    imagesVO = [];

    values = null;

    imageManager = null;

    var _this = this;

    this.loadJson = function () {
        return $.ajax(jsonPath, {
            success: function (data, status, xhr) {
                console.log("yea " + data);
                currentIndex = 0;
                imagesVO = data.images;
                imageManager = new ImageManager(data.images);
                imagesCount = imagesVO.length;
                switchToImage(currentIndex);
                $('#next').click(function () {
                    currentIndex = _this.incrementIndexByOne(currentIndex);
                    return _this.switchToImage(_this.currentIndex);
                });
                return $('#prev').click(function () {
                    currentIndex = _this.decrementIndexByOne(currentIndex);
                    return _this.switchToImage(currentIndex);
                });
            },
            error: function (xhr, status, err) {
                return $('#imageHolder').html("problem loading the json file, </br>make sure you are running this on your local server");
            },
            complete: function (xhr, status) {}
        });
    };
    this.loadJson();    
};

var someCarousel = new ImageCarousel(); // Example usage.

实际上，ImageCarousel 被声明了两次。一次使用ImageCarousel = (function() {，一次使用function ImageCarousel()...。我选择了前者。

如果我理解正确，您希望 currentIndex、imageManager、imagesVO、jsonPath 和值是私有的。对于那些，只需在你的功能块内做一个 var ，它们将是该 new'd 对象的每个实例的私有。您可以在 ImageCarousel 函数中安全地使用它们，不用担心（也没有 _this）。

我将_this 留在了您在loadJson 内部调用的方法上，因为（无法在此处看到它们的定义）我假设它们是公共方法。如果它们是私有的，只需在包装函数中声明它们，它们就只能在其中访问。如果您希望它们公开，请使用 this[functionName]，就像我对 loadJson 所做的那样。

所以我的代码更改的影响是：

currentIndex 等是私有的。
loadJson 是公开的。

编辑关于使用prototype 的更多内容。 prototype 用于“静态”函数 - 意思是，ImageCarousel 对象的每个实例都不存在该函数。如果你使用它，你将在函数声明之外使用它。否则，每次您 new 和 ImageCarousel 时，都会不必要地重新定义 loadJson。这是一个不错的小演示应用程序，可以更清楚地说明我的意思：http://jsfiddle.net/d2BbA/

【讨论】：