Object-oriented programming

The project manager assigned a task to verify the function of the form. The content was not much, only the user name, email, password, etc.

function checkName(){// Verify the name
}
function checkEmail(){// Verify the mailbox
}
function checkPassword(){// Verify password
}
Copy the code

This is a process-oriented approach, but in this way, you will find that many global variables are added to the page for no reason, and it is not easy to reuse. Once someone else uses the previously provided methods, you can't easily change them, which is bad for team code maintenance. So now you're going to adopt the programming style of our team -- object-oriented programming

“So how can I avoid it?”

var CheckObject = function(){this.checkName = function(){// Verify the name}this.checkEmail = function(){// Verify the mailbox}this.checkPassword = function(){// Verify password}}var a = new CheckObject();
a.checkEmail();
Copy the code

“Of course, you see, we put all the methods inside the function, defined by this, so every time we create a new object with the new keyword, the new object will copy the properties on the class’s this. So these new objects have their own way of doing things, but sometimes that’s a luxury we have to deal with.”

var CheckObject = function(){}; CheckObject.prototype = {checkName : function(){// Verify the name},checkEmail : function(){// Verify the mailbox},checkPassword : function(){// Verify password}}Copy the code

“Object-oriented programming is abstracting your requirements into an object and analyzing its characteristics (properties) and actions (methods). This object is called a class. For example, when you graduate from university, you will not take any of the luggage you bring to the company, but put them in a suitcase, so that both carrying and management will be more convenient. Unfortunately, JavaScript as an interpreted, weakly typed language doesn’t have the encapsulation of a class in a classic strongly typed language, which is implemented by mimicking features, but it gives us a lot of flexibility and gives us a lot more freedom to write code.”

“How are properties and methods added through this different from those added in Prototype?”

“The properties and methods added by this are added to the current object, but JavaScript is a prototype-based language, so every time an object is created (and of course functions are objects in JavaScript), Each object has a prototype to refer to its inherited properties and methods. Methods inherited from Prototype are not the object’s own, so when using these methods, you need to find them through prototype level by level. So every time we create a new object from a class, the properties and methods referred to by this will be created accordingly. The properties and methods inherited from Prototype will be accessed by each object in Prototype. So every time we create a new object from a class these properties and methods are not created again.

What does the constructor mean?

Constructor is a property. When a function or object is created, a prototype object is created for it. A constructor property is created in the prototype object just as this is created in the function. Then the constructor property points to the function or object that owns the entire prototype object, as in this case Book Prototype.”

“How does that work in JavaScript?”

An object created with the new keyword is essentially a continuous assignment to the new object this and points Prototype to the object that the class’s prototype points to. Property methods defined outside the constructor of the class are not added to the newly created object. So if you want to use isChinese in a newly created object, you need to use the Book class instead of this, such as book.isChinese. Properties defined in the prototype of the class can be used directly in the new object. This is because the prototype of the new object and the prototype of the class point to the same object.”

Private properties and private methods, privileged methods, object public properties and object common methods, constructors
var Book = function(id.name.price){// Private attributes
　　var num = 1;// Private methods
　　function checkId(){};// Privileged methods
　　this.getName = function(){};this.getPrice = function(){};this.setName = function(){};this.setPrice = function(){};// Object public attributes
　　this. Id = id;// Object public method
　　this.copy = function(){};/ / the constructor
　　this.setName (name);this.setprice (price); };Copy the code

// Class static public properties (objects cannot be accessed)
Book.isChinese = true;// Class static public methods (objects cannot be accessed)
Book.resetTime = function(){console.log ('new Tiem')}; Book.prototype = {// Public attributes
　　isJSBook : false.// Public method
　　display : function(){}}Copy the code

// Use closures
varThe Book = (function() {// Static private variables
　var bookNum = 0;Static private methods
　function checkBook(name){}// Return the constructor
　return function(newId.newName.newPrice){// Private variables
　　varThe name, price;// Private methods
　　function checkID(id){}// Privileged methods
　　this.getName = function(){};this.getPrice = function(){};this.setName = function(){};this.setPrice = function(){};// Public attributes
　　this. Id = newId;// Public method
　　this.copy = function(){}; bookNum++if(bookNum & gt;100)throw new Error(" We only publish100Book." );/ / the constructor
　　this.setName (name);this.setprice (price); }}) (); Book.prototype = {// Static public attributes
　　isJSBook : false.Static public methods
　　display : function(){}};Copy the code

  var HashMap = (function () {
        function HashMap(obj) {
            this.data = {};
            var isArr = isArray(obj);
            this.data = {};
            var thisMap = this;
            (obj instanceof HashMap)
                ? obj.each(visit)
                : (obj && each(obj, visit));
            function visit(value, key) {
                isArr ? thisMap.set(value, key) : thisMap.set(key, value);
            }
        }
        HashMap.prototype.get = function (key) {
            return this.data.hasOwnProperty(key) ? this.data[key] : null;
        };
        HashMap.prototype.set = function (key, value) {
            return (this.data[key] = value);
        };
        HashMap.prototype.each = function (cb, context) {
            for (var key in this.data) {
                if (this.data.hasOwnProperty(key)) {
                    cb.call(context, this.data[key], key); }}}; HashMap.prototype.keys =function () {
            return keys(this.data);
        };
        HashMap.prototype.removeKey = function (key) {
            delete this.data[key];
        };
        returnHashMap; } ());function createHashMap(obj) {
        return new HashMap(obj);
    }
Copy the code

Object-oriented programming