Two object-oriented methods of JavaScript-prototype and Closure)

Two common methods are JS inheritance and object-oriented writing.

1. Prototype inheritance

Use prototype to bind an object.

During inheritance, use call in the subclass to inherit the constructor of the parent class, and use new to declare the method that inherits the parent class.

var DemoParent = function (param1,param2) {this.attr1 = param1;this.attr2 = param2;};DemoParent.prototype.paFunc = function () {return 'attr1 is ' + this.attr1 + '; attr2 is ' + this.attr2;};var Demo = function (param) {this.newAttr = param;DemoParent.call(this,'Hello',param);};Demo.prototype = new DemoParent;Demo.prototype.cFunc = function() {return 'newAttr is ' + this.newAttr;};var exDemo = new Demo('world');var result = "exDemo.newAttr: " + exDemo.newAttr + "\n";result = result + "exDemo.cFunc(): " + exDemo.cFunc() + "\n\n";result = result + "exDemo.attr1: " + exDemo.attr1 + "\n";result = result + "exDemo.attr2:" + exDemo.attr2 + "\n";result = result + "exDemo.paFunc(): " + exDemo.paFunc();alert(result);

Result:

When this method is used, the internal properties of the object are not private, and there is no privacy and security.

alert(exDemo.cFunc());exDemo.newAttr = 'I change it';alert(exDemo.cFunc());

Ii. Closure inheritance

Another method is to use a closure (closure ).

This method is basically the packaging of functions, simulating the inheritance and transmission features of classes and objects, and can only be said to be similar to objects.

Wrap that in the parent function that contains its content. When called in the function to be inherited, the dependent closure stores local variables and transmits the content and methods through return.

var demoParent = function (param1,param2) {var that = {attr2: param2,paFunc: function (){return 'param1 is ' + param1 + '; attr2 is ' + that.attr2;}};return that;};var demo = function (param) {var that = demoParent('Hello',param);that.cFunc = function () {return 'param is ' + param;};return that;}var exDemo = demo('world');var result = "exDemo.param: " + exDemo.param + "\n";result = result + "exDemo.cFunc(): " + exDemo.cFunc() + "\n\n";result = result + "exDemo.param1: " + exDemo.param1 + "\n ";result = result + "exDemo.param2: " + exDemo.param2 + "\n";result = result + "exDemo.attr2:" + exDemo.attr2 + "\n";result = result + "exDemo.paFunc(): " + exDemo.paFunc();alert(result);

Result:

For more information, see:

The Property (param1, param2) inherited by the "parent" function without value assignment is undefined and cannot be accessed (that is, it cannot be modified ), but can be accessed by the set internal functions (pafunc ());

Attributes inherited and assigned by the "parent" function (attr2 = param2) can be returned (because they are passed );

The parameters of the function are the same (exdemo. Param: Undefined. Here we can understand the scope of the function body, but can be accessed through internal functions because the closure is returned ).

The same is true for modifications. Only the passed public variables can be modified (attr2, which overwrites the original value ). Private content is stored in the closure, and cannot be directly modified. Therefore, this method can provide real private protection for the content.