使用原型方法访问构造函数中的变量

Question

为什么我不能使用原型方法.nextSlide访问构造函数中的变量HTML？

function test(root){

    var HTML = getAllHTML();

    function getAllHTML(){

        var boss, expoHTML;
        var boss = document.querySelector(root);

        expoHTML = {

            slides: boss.querySelectorAll(".slide"),
            prev: boss.querySelector(".control.prev"),
            next: boss.querySelector(".control.next"),
            current: boss.querySelector(".slide-current"),
            total: boss.querySelector(".slide-total")

        }

        return expoHTML;

    }


}


EXPOjs.prototype.nextSlide = function(){

    alert(HTML.current)

}


var newTEST = new test(".ieps");
newTEST.nextSlide();

Answer 1

这是一个“范围”问题； Javascript中的每个变量都有一个范围，这意味着：“谁可以看到此变量”？

在您的情况下，在功能HTML中定义了test()。这意味着它将可见：

• 在功能test()内
• 在任何定义的功能内内部 test()

就是这样。在test()之外，HTML将为空。

现在，我可以看到您正在使用test（）作为构造函数。这样，您将进入对象创建和Javacript的美好世界。深吸一口气：D

执行此操作时：

function Person( age ){
  this.age = age;
}

然后您做：

var pavlo = new Person( 23 );

基本上“新”具有以下作用：

• 创建一个空对象
• 运行函数，以便this指向新创建的对象
• 将新创建的对象分配给pavlo

这种骗术意味着您可以做到

var pavlo = new Person( 23);
console.log( pavlo.age );

然后有原型函数。如果您定义这样的函数：

Person.prototype.setAge = function( newAge){
   this.age = newAge();
}

Person's prototype对象中定义的任何函数（或与此相关的任何变量）也将可由使用该构造函数创建的任何对象访问。另外，this变量将是进行该调用的对象。

所以，如果您有：

function Person( age ){
  this.age = age;
}

Person.prototype.setAge = function( newAge){

   `this` at this point is the object "calling"
   this.age = newAge();
}

var pavlo = new Person( 23 );
console.log( pavlo.age );

// pavlo is making the call. So, within `setAge()`, `this` will be `pavlo`
pavlo.setAge( 26 );

因此，为您提供解决方案：

function test(root){
  this.HTML = getAllHTML();
  // etc.
}

然后您的警报应该是：

test.prototype.nextSlide = function(){
  alert(this.HTML.current);
}

请注意，在Javascript中，您应该具有以大写字母开头的构造函数（请参阅：Test而不是test）。

如果您不希望从外部访问HTML，通常会说您通常在变量名称前加下划线（称为_HTML。]

还有are种其他方式，如果您绝对必须使该变量对开发人员隐藏。但是，这并不十分简单，而且-大多数开发人员都会说-绝对不值得付出努力。

[一些不错的读物（但是，我必须说，当我开始使用JS时，我已经读过它们，而在那时，它们使我烦恼了：D）]

• [http://javascript.crockford.com/private.html（你知道克罗克福德，对吗？：D）
• http://phrogz.net/JS/classes/OOPinJS.html（仅当您<>理解上一篇文章时，请阅读它）
更新：这是关于此问题的另一篇

精彩

文章：https://blog.jcoglan.com/2012/01/19/the-cost-of-privacy享受！

Answer 2

您正在尝试访问Test中的属性，但是test不属于Expojs。然后，您尝试扩展prototype的Expojs，这是一个坏主意，因为为您无法控制的代码创建新成员永远不是一个好主意。