What are the methods of object encapsulation and inheritance for JavaScript? What are the pros and cons respectively?

Source: Internet
Author: User
Tags true true

1. Object Encapsulation Method 1) Raw schema generation object

Directly writes our members to the object and returns with the function. Cons: It's hard to see a pattern coming out of an instance.

functionStu (name, score) {return{name:name, score:score}}varSTU1 = Stu ("Zhang San", 80); varSTU2 = Stu ("John Doe", 90); Console.log (Stu1.name); //Zhang San
1) Generating a constructed mode object

JS helps us to provide a schema that uses constructors to generate objects, so-called "constructors", which are actually a common function, but use the this variable internally. When you use the New keyword to generate an instance of the constructor, the this variable is bound to the instance object.

functionStu (name, score) { This. Name =name, This. score =Score}varSTU1 =NewStu ("Zhang San", 80); varSTU2 =NewStu ("John Doe", 90); Console.log (Stu1.name+ "/" + Stu2.score);//Zhang 390Console.log (Stu1.constructor = = Stu) + "/" + (Stu2.constructor = = Stu));//true TrueConsole.log ((stu1instanceofSTU) + "/" + (STU2instanceofSTU));//true True

It is not difficult to see that the constructor generation object of JS and C # use class to generate objects, all of which are instantiated with the template definition object members through the new keyword.

1) Prototype mode

In JS, each constructor has a prototype property, and all the properties and methods of the object are inherited by the instance of the constructor. Then we add members directly to prototype, which is the equivalent of declaring a static member in C #.

functionStu (name, score) { This. Name =name, This. score =Score} Stu.prototype.type= ' Student '; Stu.prototype.log=function(s) {console.log (s); }        varSTU1 =NewStu ("Zhang San", 80); varSTU2 =NewStu ("John Doe", 90); Console.log (Stu1.type+ "/" + Stu2.type);//Student StudentsStu1.log (' Hello ');//HelloConsole.log (Stu1.log = = Stu2.log);//true
1. Object Inheritance Method 1) constructor binding, call (this)

Invoke the call or apply method directly in the child function to bind the parent object's constructor to the child object.

functionStu (name, score) {grade.apply ( This, arguments); //Grade.call (this, arguments); This. Name =name, This. score =Score}functionGrade () { This. Code = "Junior";  This. Ask =function() {Console.log ("Good for everyone."); }        }        varSTU1 =NewStu ("Zhang San", 80); varSTU2 =NewStu ("John Doe", 90); Console.log (Stu1.code); //Junior HighStu1.ask ();//Hello, everyone.

Here, apply does two things, give the first parameter this to the grade constructor (the caller), and then execute the code in the grade. It is equivalent to executing the member in grade with this definition in Stu again.

1) through prototype, prototype inheritance
functionStu (name, score) { This. Name =name, This. score =Score}functionGrade () { This. Code = "Junior"; } Stu.prototype=NewGrade (); Stu.prototype.constructor= Stu;//prevent the inheritance chain from being disturbed by manually resetting the claimsvarSTU1 =NewStu ("Zhang San", 80); varSTU2 =NewStu ("John Doe", 90); Console.log (Stu.prototype.constructor); //their own constructorsConsole.log (Stu1.code);//Junior High

As I said earlier, prototype is equivalent to a static member in C #, so we have inherited all the members of the parent class into their own static members.

There is a drawback to inheritance through prototype: All inherited members are static, so how do you inherit object members?

1) Copy Inheritance

Copies all the properties and methods of the parent object into the child object, implementing inheritance.

functionStu (name, score) { This. Name =name, This. score =Score}functionGrade () {} Grade.prototype.code= "Junior High School"; }        //function EncapsulationfunctionExtend (C, P) {varp =P.prototype; varc =C.prototype;  for(varIinchp) {C[i]=P[i];        }} extend (Stu, Grade); varSTU1 =NewStu ("Zhang San", 80); varSTU2 =NewStu ("John Doe", 90); Stu1.code= ' High School '; Console.log (Stu1.code); //High SchoolConsole.log (Stu2.code);//Junior HighConsole.log (Stu.prototype.constructor); Console.log (Grade.prototype.constructor)

What are the methods of object encapsulation and inheritance for JavaScript? What are the pros and cons respectively?

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.