javascript - 了解 JavaScript OOP

Question

好的，这真的是我第一次用 javaScript 上我的第一堂课，我已经学习了好几个月使用 JQuery，所以我教它并不难。在这段代码中，我会问很多问题..

好的，这是我的第一个 javascript 类的代码

window.myclass = function(){
    this.n1 = 0;
    this.n2 = 0;
    this.ans = 0;
    this.hehe = 0;

    this.defaultNumbersAdd = function(){

       this.hehe =setInterval(function(){
          //just an example of inert function...
          //the truth is i can't grab the this.n1 and this.n2...
          this.ans = this.n1 + this.n2;
       },100);
       clearTimeout(this.hehe);
    };

    this.returnAns = function(){
       return this.ans;
    };

    this.getAnswer = function(){
        this.defaultNumbersAdd(); //i want to reuse this function but I can't access it
        return this.returnAns(); //and also this one
    };

    this.modifynumbers = function(n1,n2){
        this.n1 = n1;
        this.n2 = n2;
    };
};

var myclassins = new window.myclass();
alert(myclassins.getAnswer);

现在我的问题是

1）如何获取要在我的函数中使用的类变量（this.vars）

2）我如何在另一个函数中使用其他函数

注意：对不起，如果我的解释有点模糊......

score 4 · Accepted Answer

直接位于 window.myclass 对象内部的this指针指向该对象本身，您使用它来定义该对象的本质属性，例如 n1 和 n2。

但是，在对象中定义的函数中，this指针指向的是函数，而不是对象。***然而，在 setTimeouts 和 setIntervals 中，“this”关键字指的是窗口对象或全局范围。（例如，请参阅底部的更新。）

因此，您可以使用用于实例化类的全局范围内的变量名称直接访问属性，

    this.returnAns = function(){
       return myclassins.ans;
    };

但是，上述方法将您的类与实例化时赋予对象的名称相关联，并且仅对单个对象有用。

更好的解决方案是在对象中定义一个变量并使用它引用“this”指针：

window.myclass = function(){
    this.n1 = 0;
    this.n2 = 0;
    this.ans = 0;
    this.hehe = 0;
    var _self = this;   // reference to "this"

    this.defaultNumbersAdd = function(){

       myclass.hehe =setInterval(function(){
          //just an example of inert function...
              //the truth is i can't grab the this.n1 and this.n2...
          _self.ans = _self.n1 + _self.n2;
          console.log(_self.ans);
       },100);
       clearTimeout(_self.hehe);
    };

    this.returnAns = function(){
       return _self.ans;
    };

    this.getAnswer = function(){
        this.defaultNumbersAdd(); //i want to reuse this function but I can't access it
        return _self.returnAns(); //and also this one
    };

    this.modifynumbers = function(n1,n2){
        _self.n1 = n1;
        _self.n2 = n2;
    };
};

最后，另一种技术是使用闭包定义函数，将“this”指针传递给返回另一个函数的函数，如下所示：

    this.modifynumbers = (function(__this) {
        return function(n1,n2){
            __this.n1 = n1;
            __this.n2 = n2;
        }
    })(this);

当然，最简单的方法是使用var self; 然而，在 JavaScript 中有几种不同的方式来完成一项任务，这些技术在不同的场景中可以证明是很方便的。

更新：

@apsillers 指出，当在 setTimeout 和 setInterval 函数调用的回调中引用时，“this”关键字指向窗口对象。这是一个例子：

// top level scope
var global = "globalvalue";

window.demo = function() {
    this.somevar = "somevalue";        

    this.someFunct = function() {
        console.info("somevar = " + this.somevar);  // prints "somevalue"
        console.info("global = " + this.global);   // prints undefined! this points to "demo"!

        setTimeout( function() {
            console.info("timeout - somevar = " + this.somevar);  // undefined! references the "window" context
            console.info("timeout - global = " + this.global);   // prints "globalvalue"
        },1000);
    };
};
var dem = new demo();

dem.somevar;   // accessible from outside the object. prints "somevalue"
dem.someFunct();

someFunct() 的输出：

# inside method of object
somevar = somevalue
global = undefined

# inside timeout
timeout - somevar = undefined
timeout - global = globalvalue

如您所见，在 setTimeout 内部，“this”明确指向窗口或全局范围！（注意：您实际上可以获取那个小代码片段并在您的 Chrome 或 Firebug 调试器中运行它。）

score 3 · Accepted Answer

您可以使用本文中描述的模块模式。使用它的好处是您可以拥有私有变量，并且只公开那些您想公开的变量。

var Myclass = (function(){

    var

    // Private
    n1 = 0,
    n2 = 0,
    ans = 0,
    hehe = 0,

    defaultNumbersAdd = function(){
       hehe = setInterval(function(){
          this.ans = this.n1 + this.n2;
       },100);
       clearTimeout(hehe);
    },

    returnAns = function(){
       return ans;
    },

    getAnswer = function(){
        this.defaultNumbersAdd();
        return returnAns()    
    },

    modifynumbers = function(n1 ,n2){
        n1 = n1;
        n2 = n2;
    };

    // Public
    return {
      defaultNumbersAdd: defaultNumbersAdd,
      getAnswer: getAnswer,
      modifynumbers: modifynumbers
    };
}());

// Then you can use the object as it already exists
myclass.method();

score 2 · Accepted Answer

我认为您对“this”关键字感到困惑。

'this' 指的是当前对象上下文。使用 setInterval 可以将函数传递到另一个上下文中，这this意味着其他内容。因此，您可以分配this给传递当前正在引用的对象的变量，也可以在内部defaultNumbers.add将属性分配给 var：

this.defaultNumbersAdd = function(){
   var ans = this.ans,
   n1 = this.n1,
   n2 = this.n2;

   this.hehe =setInterval(function(){
      //just an example of inert function...
      //the truth is i can't grab the this.n1 and this.n2...
      ans = n1 + n2;
   },100);
   clearTimeout(this.hehe);
};

score 1 · Accepted Answer

我通常为此声明一个新变量：

window.myclass = function(){
....
....

var self = this
....
....
}

现在你可以打电话给自己了。..... 无论你想要什么

score 1 · Accepted Answer

第 1 点：如果您想要一个对象的所有成员变量，请使用for(.. in ..)：

// output all keys and values
for(key in myclassins) {
    console.log(key, myclassins[key]);
}

请注意，函数是 JavaScript 中的一等变量，因此如果您只想枚举的非函数成员变量myclassins，请执行以下操作：

// output all keys and values that are not functions
for(key in myclassins) {
    if(!myclassins[key] instanceof Function) {
        console.log(key, myclassins[key]);
    }
}

第 2 点：在 JavaScript 中，this变量称为函数的上下文。上下文可能会改变——setInterval例如，当您调用时，它会导致匿名函数使用上下文this == window而不是当前对象的上下文运行。如果要引用当前对象的上下文，请将其存储在构造函数开头的另一个变量中，例如var self = this;，然后在要引用该对象时self在匿名函数中引用。setInterval

这是因为 JavaScript 支持闭包，这意味着当您定义一个函数时，该新函数可以访问当前存在于当前作用域中的所有变量，包括 (在这种情况下) self。

备注：

JavaScript 是基于原型的，而不是基于类的。这可能是一个难以理解的区别，并且与您的确切代码没有任何关系。但是，如果您说“JavaScript 类”，您可能会发现有人纠正您。
传统的将类型名称首字母大写 CamelCase，例如，instancefooBar是类型FullTimeEmployee（不是fullTimeEmployee或fulltimeemployee）。

javascript - 了解 JavaScript OOP

5 回答 5

更新：

Related

Reference