The "class" of JavaScript

1. Basic create "class" mode

var Class = function () {var Klass = function () {this.init.apply (this, arguments);}; Klass.prototype.init = function () {};return klass;}; var person = new Class (); Person.prototype.init = function () {//Initialize the instance based on person}; Person.find = function (id) {/*...*/}; Person.prototype.breath = function () {/*...*/}; Person.fn = Person.prototype; Person.fn.run = function () {/*...*/};//usage var person = new Person ();p erson.find (1);p Erson.breath ();p erson.run ();

2. Resolving static properties and instance properties of a class

var Class = function () {var Klass = function () {this.init.apply (this, arguments);}; Klass.prototype.init = function () {};//defines the alias of the prototype Klass.fn = klass.prototype;//defines the alias of the class klass.fn.parent = klass;//adds to the class Add attribute klass.extend = function (obj) {var extended = Obj.extended;for (var i in obj) {klass[i] = obj[i];} if (extended) extended (Klass);};/ /Add attribute to instance Klass.include = function (obj) {var included = Obj.included;for (var i in obj) {klass.fn[i] = obj[i];} if (included) included (Klass);}; return Klass;}; var person = new Class ();//Add static property Person.extend ({find:function (ID) {/* * ... */},exists:function (ID) {/*/}});//Tim Add Instance Property Person.include ({save:function (ID) {/* * ... */},destroy:function (ID) {/*/}}); var person = new person ();p ers On.save ();

Share common properties between classes

var ormmodule = {Save:function () {//shared function}};var person = new Class (), var Asset = new Class (); Person.include (Ormmodule); Asset.include (Ormmodule);

JavaScript is a prototype-based programming language that is used to differentiate between classes and instances, where a concept is mentioned: Prototype objects (prototypical object). A prototype is a "template" object whose properties are used to initialize a new object. Any object can share properties as a prototype object for another object.

When reading a property of an object, JavaScript first looks for the property in the local object, and if it is not found, JavaScript begins to look in the object's prototype, and if it is not found, it will continue to find the prototype until Object.prototype. If this property is found, this value is returned, otherwise undefined is returned.

In order for subclasses to inherit the properties of the parent class, you first need to define a constructor. You then need to assign a new instance of the parent class to the constructor's prototype.

var Animal = function () {}; Animal.prototype.breath = function () {Console.log (' breath ');}; var dog = function () {};//dog Inherits Animaldog.prototype = new Animal ();D og.prototype.wag = function () {Console.log (' wag tail ') );}; var dog = new Dog ();d og.wag ();d Og.breath (); Inherited properties

3. Add inheritance to create a new class by passing in an optional parent class

var Class = function (parent) {var Klass = function () {this.init.apply (this, arguments);};/ /Change Klass prototype  only instances of attributes are inherited, not class properties if (parent) {var subclass = function () {};subclass.prototype = Parent.prototype;kla Ss.prototype = new Subclass;}; Klass.prototype.init = function () {};//defines the alias of the prototype Klass.fn = klass.prototype;//defines the alias of the class klass.fn.parent = Klass;klass . _super = klass.__proto__;//Add property to Class Klass.extend = function (obj) {var extended = Obj.extended;for (var i in obj) {klass[i] = Obj[i];} if (extended) extended (Klass);};/ /Add attribute to instance Klass.include = function (obj) {var included = Obj.included;for (var i in obj) {klass.fn[i] = obj[i];} if (included) included (Klass);}; return Klass;}; var Animal = new Class (); Animal.include ({breath:function () {console.log (' breath ');}}); var cat = new Class (Animal), var tommy = new Cat (); Tommy.breath ();

Apply () function has two parameters: the 1th parameter is the context object, and the 2nd parameter is an array of parameters. If the context object is null, the global object is used instead.

　　Pager The behavior of the () function is similar to the Apply () function, except that it is not used in the same way. The 1th parameter of call () is the context object, followed by the actual parameter sequence passed in.

Functionname.apply (This, [1, 2, 3]); Functionname.call (this, 1, 2, 3);

use Apply () and call () to change the context object

In order to access the original context object, the value of this can be stored in a local variable. var clicky = {wasclicked:function () {},addlisteners:function () {var self = this;$ ('. Clicky '). Click (function () { Self.wasclicked ();});}; Clicky.addlisteners ();//You can use apply to make this code cleaner, by wrapping the callback in another anonymous function to keep the original context var proxy = function (func, thisobject) { return function () {return func.apply (thisobject, arguments);};}; var clicky = {wasclicked:function () {},addlisteners:function () {var self = this;$ ('. Clicky '). Click (Proxy ( This.wasclicked, this));}; Clicky.addlisteners ();

4. Control the scope of the class add the proxy function in both the class and the instance

var Class = function (parent) {var Klass = function () {this.init.apply (this,arguments);} Inherit if (parent) {var subclass = function () {};subclass.prototype = Parent.prototype;klass.prototype = new subclass ();} Klass.prototype.init = function () {};klass.fn = Klass.prototype;klass.fn.parent = Klass;klass._super = klass.__proto__ ;//Class static Property Klass.extend = function (obj) {var extended = Obj.extended;for (var i in obj) {klass[i] = obj[i];} if (extended) extended (Klass);} Class Instance Property Klass.include = function (obj) {var included = Obj.included;for (var i in obj) {klass.fn[i] = obj[i];} if (included) included (Klass);} Class Scope Klass.proxy = function (func) {var = this;return (function () {return func.apply (self, arguments);} Klass.fn.proxy = Klass.proxy;return Klass;} var Button = new Class (); Button.include ({init:function (element) {this.element = JQuery (element);//proxy for this click function This.element.click ( This.proxy (This.click));},click:function () {}});

Class for JavaScript