Object-oriented in 13-js

Several common ways to create objects

1. Creating an object using object literals or objects

2. Factory mode Creation Object

3. Constructor pattern Creation Object

4. prototype schema creation Object

1. Creating an object using object literals or objects

The most basic way to create objects in JS:

var ="Easy", "student";

In this way, a student object is created, has 2 attributes, and is name age assigned a value of "easy" and respectively 20 .

If you suspect this method has a bad encapsulation feeling. To create an object in an object literal manner.

var sutdent = {  "Easy",  +};

It seems to be perfect. But right away we will find a very sharp question: when we want to create the same kind of student1,student2,...,studentn, we have to repeat the above code n times ....

var sutdent1 = {  "easy1",  =  {"  easy2",  "= {  "Easyn  ",  ";

Got a question? Can it be like a factory floor where a lathe is constantly producing objects? We look at "Factory mode".

2. Factory mode Creation Object

JS does not have the concept of class, then we might as well use a function to encapsulate the above object creation process to facilitate repeated calls, and can give a specific interface to initialize the object

function Createstudent (name, age) {  = new Object ();   = name;   = Age ;   return  = createstudent ("easy1",= createstudent ("  Easy2","= createstudent ("easyn", 20);

This allows us to continuously "produce" objects through the Createstudent function. It seems that there is peace of mind, but greedy humans have a nature that is not content with the status quo: we not only want the production of "products" to be as constant as the factory floor, we also want to know what kind of product is produced.

For example, we also define the Createfruit () function of the "produce" fruit object:

function Createfruit (name, color) {  = new Object ();   = name;   = color;   return  = createstudent ("easy1",= Createfruit ("  Apple"Green");

For the above code created objects V1, v2, we use the instanceof operator to detect, they are all object type. Of course we are not satisfied with this, we want V1 to be student type, and V2 is the fruit type. To achieve this goal, we can create objects with a custom constructor method

3. Constructor pattern Creation Object

When we create native objects like object above, we use their constructors:

var obj = new Object ();

The constructor was also used when creating the native array array type object:

var arr = new Array (ten);  Constructs an array object with an initial length of 10

Before you make a custom constructor create an object, let's start by 构造函数 understanding 普通函数 what the difference is.

1. In fact, there is no special syntax for creating constructors, and the only difference between them and ordinary functions is the invocation method. For any function that is called with the new operator, it is a constructor and is not called with the new operator, so it is a normal function.

2, according to the Convention, we agreed that the constructor name begins with an uppercase letter, the normal function starts with a lowercase letter, which facilitates the explicit distinction between the two. For example, the new Array () above, new Object ().

3. When the constructor is called using the new operator, it goes through (1) Creating a new object, (2) assigning the constructor scope to the new object (which points to the new object), (3) Executing the constructor code, (4) Returning the new object, and 4 stages.

OK, after understanding 构造函数 the 普通函数 difference, we use the constructor to 工厂模式 rewrite the function and add a method property:

function Student (name, age) {  = name;   = Age ;   = function () {    alert (this.name)  };} function Fruit (name, color) {  = name;   = color;   = function () {    alert (this.name)  };}

This allows us to create student and fruit objects separately:

var v1 = new Student ("Easy",= new Fruit ("Apple" ) "Green");

Then we can use the instanceof operator to detect the above object type to distinguish between student and fruit:

Alert (v1 instanceof Student);  Truealert (v2 instanceof Student);   Falsealert (v1 instanceof Fruit);   Falsealert (v2 instanceof Fruit);   Truealert (v1 instanceof Object);   true any object inherits from Objectalert (V2 instanceof object);   True any object is inherited from Object

This solves the 工厂模式 embarrassment of being unable to distinguish between object types. Is it perfect to use construction methods to create objects? Using the constructor function usually in JS we create the object.

We will find that the student and fruit objects have the same method, which is undoubtedly the memory consumption when we make the call.

We can do this again when we execute the function, by moving the object method outside the constructor:

function Student (name, age) {  = name;   = Age ;   = Alertname;} function Alertname () {  = new Student ("easy1",= new Student ( " Easy2 ", 20);

When Stu1.alertname () is called, the This object is bound to STU1.

We define the Alertname () function as a global function so that the Alertname property in the object is set to a pointer to that global function. This global function is shared by STU1 and STU2, which solves the problem of memory wasting.

However, it is not a good solution to solve the problem of sharing internal objects through the way of global functions. If there are many global functions defined in this way, we want to encapsulate the custom objects almost impossible to achieve. A better solution is to use the prototype object pattern.

4. prototype schema creation Object

Prototype chain even prototype inheritance, is the most difficult part of the whole JS is also the most bad part of the understanding, here because of our course positioning reasons, if the students interested in JS, you can go to the relevant JS prototype some knowledge points. More helpful to your future front-end JS interview.

function Student () {    'easy';     = ( ) = function ()    {== new Student (); Stu1.alertname ()  ;  easystu2.alertname ();    = = stu2.alertname);  True both share the same function

Object-oriented in 13-js