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

Source: Internet
Author: User

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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.