在类范围内定义javascript的变量

Question

guys i know it is dummy question but i tried alot and never reached .. i want to define the variables of Javascript file inside the scope of the class not to be overridden by any outside source .. here is my code

 var pageSize = 5; var startIndex = 0; var endIndex = startIndex + pageSize; var page = 1; var textField; var check = 0; // i want all of the above variables to be defined inside the scope of the class not outside function bindContext(fn, context) { return function() { fn.apply(context, arguments); } } function GridLibraryDep(data) { this.data = data; this.columns = $.map(this.data[0], function(item, key) { return key; }); document.getElementById("from").innerHTML = 1; document.getElementById("to").innerHTML = pageSize; document.getElementById("total").innerHTML = data.length; $("#first").click(bindContext(this.first, this)); $("#last").click(bindContext(this.last, this)); } GridLibraryDep.prototype = { first : function() { var size = this.data.length; page = 1; // document.getElementById("lbl").innerHTML = page; endIndex = page * pageSize; startIndex = endIndex - pageSize; this.deleteTable(); document.getElementById("from").innerHTML = 1; document.getElementById("to").innerHTML = endIndex; document.getElementById("total").innerHTML = size; this.display(); }, last : function() { var size = this.data.length; endIndex = size; startIndex = Math.floor(size / pageSize) * pageSize; page = Math.ceil(size / pageSize); this.deleteTable(); // document.getElementById("lbl").innerHTML = page; document.getElementById("from").innerHTML = startIndex + 1; document.getElementById("to").innerHTML = endIndex; document.getElementById("total").innerHTML = size; this.display(); }}; 

Answer 1

This is a common way to create a prototype Class - https://jsfiddle.net/aaronfranco/fysbbdp7/10/

var MyClass = MyClass || {};

(function () {
    "use strict";

    //============================================================
    // Constructor - MUST BE AT TOP OF FILE
    //------------------------------------------------------------
    MyClass = function () {
        this.created = true;
    };

    //============================================================
    // Member Functions & Variables
    //------------------------------------------------------------
    MyClass.prototype = {
        pageSize:5,
        startIndex:0,
        endIndex:0,
        page:1,
        textField:null,
        check:0,
        init: function(){
            this.endIndex = this.startIndex + this.pageSize;
        },
        first : function() {
          // function here
          console.log(this.endIndex);
        },

        last : function() {
          // function here
          //alert(this.pageIndex);
          console.log(this.pageSize)
        },
        iterater: function(int) {
          console.log(this.pageSize);
          this.pageSize += int;
        }
    }
})();

Here is the example usage available in the JSFiddle link above:

var newClass = new MyClass();
newClass.init();
newClass.first();

for(var i=0; i<10; i++){
    newClass.iterater(i);
  newClass.last();
}

Using this "namespaced" technique, you can instantiate this class using

var newClass = new MyClass();
newClass.init();

You could then create protected variables in the class by making them private. There is a good article about some potential ways to create protected variables here.

http://philipwalton.com/articles/implementing-private-and-protected-members-in-javascript/