Javascript OOP 和类问题

Question

我想将我的代码重新安排为 OOP，但我无法在此处找出我的错误，特别是因为根据不同的教程和示例，它们看起来是正确的。我想我误解了 JS 的一些东西，对象实例化和调用堆栈。

我将提供一些我不理解的示例。

我在这里想要的是对一个数组做一些操作，然后把它交给另一个类。

https://jsfiddle.net/8g22nj8y/1/

<script>
$(document).ready(function() {
    var p = new Parser();
    p.init();
    p.getArray();
    p.getArray2();
    p.get3();
}</script>

function Parser() {

var myArray = [];
this.myArray2 = [];
thisReference = this;
  this.myArray3=[];

return {
    init: function () {
        alert("huhu");
        this.parse2();
        parse();
    },
    getArray: function () {
        alert(thisReference.myArray2.length);

    },
    getArray2: function () {
        alert(myArray);
    }
}

function parse() {
    var arr = [1, 2, 3];
    myArray.push(arr);
    myArray2.push(arr);

 for(var i =0;i<10;i++){
       a=[];
        a.push(i);
        thisReference.myArray3.push(a);
    }

}}Parser.prototype.parse2 = function () {
var arr = [1, 2, 3];
myArray.push(arr);
this.myArray2.push(arr);};

独立于我如何运行它，它总是说 this.parse2() 不是一个函数。当我只使用 parse() 时，它说 myArray2 是未定义的，尽管它显然在那里——就像“类变量”一样。如果我将 parse() 中的 myArray2 更改为 thisReference.myArray2，它就会工作。

为什么？我认为一个内部函数——显然是 parse() 能够获取外部函数中的所有变量——在本例中是 Parser()。当我现在使用 myArray3 时，无论是与 thisReference 还是与 this 一起使用。 “它没有定义”。如果我用 thisReference 调用 parse2 它工作，但是然后“myArray 未定义”，是的，它是一个局部变量，但它在同一个类中，如果我调用 parse() 我可以毫无问题地使用它.

此外:

简化:https://jsfiddle.net/Lzaudhxw/1/

    function Syntax(){
   var mine = new Lex();
   myRef=this;
   }
   Class1.prototype.foo=function(){
       myRef.mine.setFunc(5);
       myRef.mine.publicFunc();}


function Lex(){
   this.x, this.h=1;
    return{
       publicFunc: function(param){
         this.h;
         this.x;
        },
        setFunc: function(x){
         this.x=x;
      }
}

最初我将 h 设置为 1。如果我现在实例化 Syntax 并从中调用，Lex 的 publicFunc 都是未定义的。但是，如果我从 Syntax 运行 foo() 并再次调用 publicFunc，x 将设置为该值并且 h 未定义。为什么不能像这样预定义一个变量(在本例中为 h)然后使用它？

编辑 Jan 的回答:

我在许多教程和一些产品代码中读到，您应该将“this”存储到一个变量中。为什么 myRef 应该指向语法对象以外的任何对象？ :O为什么 myRef 不是 Syntax 的变量？必须是 this.myRef 吗？啊对了，var 表示本地，所以我的只能在构造函数中访问？!

我不想初始化“x”，只是定义它。啊，用 return{} 我正在创建一个新的类/对象，那么很明显 this.不指向上面的变量。但是引入一个 myRef=this 就可以了，对吧？

...那么，使用原型(prototype)而不是内部函数来添加函数更明智？

Answer 1

是的，您弄错了一大堆 JS 概念。我建议你阅读文档。尝试添加一些解释。

function Syntax(){
    // Since you're returning a new  object from "Lex" straight away, there's 
    // little point of using "new" here
    var mine = new Lex();
    // Why store "this" here? "this" will be accessible from your prototype 
    // methods pointing to your object instance... Provided you use "new Syntax()",
    // Otherwise "myRef" will (probably) point to the global object.
    myRef=this;
}

// Where's "Class1"? You don't have a Class1 function anywhere. You probably mean "Syntax"
Class1.prototype.foo=function() {
    // "myRef" is not a property of "Syntax", so it wouldn't be accessible here.
    // Furthermore, "mine" is declared as a variable above, so it wouldn't be 
    // accessible in this manner even if "myRef" pointed to "this" (which it doesn't).
    myRef.mine.setFunc(5);
    myRef.mine.publicFunc();
}

function Lex(){
    // This is a correct property declaration of h. You're not setting the 
    // value of x here though, just calling it. Javascript allows "trying" 
    // to call ANY property of ANY object without giving neither a compilation
    // nor runtime error, so calling the undefined "this.x" here is valid.
    // It just won't do anything.
    this.x, this.h=1;
    // Here you return a new object straight off, so the below "this" will point  
    // to the object below, not the "Lex" object defined above. So your above
    // defined "this.h" will not be used, it's a property of a different object.
    return {
        publicFunc: function(param){
            this.h;
            this.x;
        },
        setFunc: function(x){
            this.x=x;
        }
    }
 // You're missing a closing bracket here.

如果使用正确的 Javascript 语法，您可能正在尝试做的事情看起来像这样

function Syntax(){
    this.mine = Lex();
}
Syntax.prototype.foo=function() {
    this.mine.setFunc(5);
    this.mine.publicFunc();
}

function Lex() {
    return {
        h:1,
        publicFunc: function(){
            console.log(this.h);
            console.log(this.x);
        },
        setFunc: function(x){
            this.x=x;
        }
    }
}

var s = new Syntax();
s.foo();

但是在大​​多数情况下，从 Lex 返回一个对象是非常不切实际的。所以你真正真正想做的可能是

function Syntax(){
    this.mine = new Lex();
}
Syntax.prototype.foo = function() {
    this.mine.setFunc(5);
    this.mine.publicFunc();
}

function Lex() {
    this.h = 1;
}
Lex.prototype = {
    publicFunc: function(){
        console.log(this.h);
        console.log(this.x);
    },
    setFunc: function(x){
        this.x=x;
    }
};

var s = new Syntax();
s.foo();