为什么我不能用“this”访问js函数中的变量

Question

我正在学习javascript。下面有两个代码块。 你可以看到第一个工作正常，但第二个没有。它们之间的不同之处在于我使用this.count来访问counter2中定义的count变量

function counter1(start){ 
    var count = start; 
    var increase = function(){
        count++;
    }; 
    var getValue = function(){
       return count;
    };
    return { 
            inc : increase, 
            get :getValue }
}

var c1 = new counter1(5);
c1.inc(); //is able to increase 1
console.log(c1.ge());//can return 6

function counter2(start){ 
    var count = start; 
    var increase = function(){
         this.count++;
    }; 
    var getValue = function(){
         return this.count;
    };
    return { 
    inc : increase , 
    get :getValue }
}

var c2 = new counter2(5);
c2.inc(); //can NOT access this.count
console.log(c2.ge());//return NaN

我对counter2中的“this”有点困惑，你可以看到，当我调试代码时，“this”是counter2，但只是没有访问计数变量

那么你能帮我理解为什么counter2中的'this'无法访问count变量吗？ 以及为什么我可以在 counter1 的增加函数中访问count变量，即使我没有使用“this”。这会使代码变得“更糟”（不太容易访问）吗？

由于

Answer 1

使用＆＃34; new＆＃34;调用构造函数时关键字，上下文变量＆＃34;这个＆＃34;指向自身并从构造函数的末尾隐式返回。当您明确返回新对象inc并获取函数时，您将不再返回＆＃34;这个＆＃34;那是用构造函数创建的。为了能够使用＆＃34;这个＆＃34;，你需要公开inc和get函数＆＃34;这个＆＃34;在构造函数中：

function counter2(start) {
    //ensure counter2 function was called with "new" keyword
    if (!(this instanceof counter2)) {
        return new counter2(start);
    }

    this.count = start; 
    this.inc = function(){
         this.count++;
    };

    this.get = function() {
         return this.count;
    };

    //When called with "new" this is implicitly returned, your constructed object.
    //return this;
}

var c2 = new counter2(5);
c2.inc();

正如其他人所指出的，暴露＆＃34;计数＆＃34;在显式返回的对象中，您还可以通过＆＃34; this.count＆＃34;因为count现在是你要返回的对象的一部分。在这种情况下，＆＃34;这个＆＃34;将指向对象本身（需要定义一个计数）。

function counter2(start) {
    var count = start; 

    var increase = function(){
         this.count++;
    };

    var getValue = function() {
         return this.count;
    };

    return {
        count: count,
        inc: increase,
        get: getValue
    }
}

var c2 = new counter2(5);
c2.inc();

Answer 2

首先，我想你应该先了解一下构造函数模式和“继承”。在javascript。

构造函数模式

当您调用new counter2(5)时，counter2函数会尝试创建一个在函数内部被称为this的新对象，因此您可以向其添加函数，这样您就可以访问变量，例如count。

如果您只是学习javascript，那么如果您尝试不在var内使用counter2并使用this关键字并让您的功能看起来像以下内容：

功能计数器（开始）{     this.count = start;

this.increase = function () {
    this.count++;
}

this.get = function () {
    return this.count;
}

}

这是Javascript中构造函数模式的基础知识。

正如我所说，函数内部this指的是正在创建的对象，这只会因为您使用new关键字而发生。这可能是一个复杂的主题，但可以更改函数内部设置的this，这就是我将Function#bind作为一些阅读链接的原因。

一开始可能会有很多东西，但是有一些基本的读物可以帮助你入门：

读

（构造函数模式）[http://www.samselikoff.com/blog/2013/11/14/some-Javascript-constructor-patterns/]

（继承和原型链）[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Inheritance_and_the_prototype_chain]

（Function.prototype.bind）[https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Function/bind]

祝你好运!!