JS Object-Oriented definition object

JS Object-oriented look at a lot, but there is no real understanding, always stay in a certain stage, this time take a serious look.

There are two types of object-oriented: Defining a class or object, inheriting a mechanism, all through the four stages of Factory mode, constructor, prototype chain, hybrid method, and the same principle, but the implementation details are a little different.

Defining classes or Objects Tutorial: http://www.w3school.com.cn/js/pro_js_object_defining.asp

Idea: Factory mode--constructor--prototype chain--a hybrid approach that takes into consideration the specific wording and deficiencies of each stage

Factory mode (four stages): primitive----------------------the method;

Original:

var Ocar = new Object;ocar.color = "Blue"; ocar.doors = 4;ocar.mpg = 25;ocar.showcolor = function () {  alert (this.color) ;};

Cons: If you create multiple objects, write the same code many times

Factory: Put the common code in a function; Within a function, create an object, return an object

function Createcar () {  var otempcar = new Object;  Otempcar.color = "Blue";  Otempcar.doors = 4;  Otempcar.mpg = +;  Otempcar.showcolor = function () {    alert (this.color);  };  return Otempcar;} var oCar1 = Createcar (); var oCar2 = Createcar ();

Cons: Generated objects, property methods are exactly the same

Arguments: Pass different parameters to the attribute; The generated object has the same property name and different attribute values;

function Createcar (scolor,idoors,impg) {  var otempcar = new Object;  Otempcar.color = Scolor;  Otempcar.doors = idoors;  Otempcar.mpg = Impg;  Otempcar.showcolor = function () {    alert (this.color);  };  return Otempcar;} var oCar1 = Createcar ("Red", 4,23), var oCar2 = Createcar ("Blue", 3,25); Ocar1.showcolor ();//Output "red" ocar2.showcolor ();// Output "Blue"

Cons: Generated objects, have their own methods, waste content

Shared method: Define your own method outside of the factory function, and then point to

function Showcolor () {  alert (this.color);} function Createcar (scolor,idoors,impg) {  var otempcar = new Object;  Otempcar.color = Scolor;  Otempcar.doors = idoors;  Otempcar.mpg = Impg;  Otempcar.showcolor = Showcolor;  return Otempcar;} var oCar1 = Createcar ("Red", 4,23), var oCar2 = Createcar ("Blue", 3,25); Ocar1.showcolor ();//Output "red" ocar2.showcolor ();// Output "Blue"

Cons: Methods that don't look like objects semantically

Constructors: Four stages of the factory pattern, which can be resolved by constructors together; The first letter of the method name is capitalized; no object is created, executed with this;new; no return;

function Car (scolor,idoors,impg) {  this.color = Scolor;  This.doors = idoors;  This.mpg = Impg;  This.showcolor = function () {    alert (this.color);  };} var oCar1 = new Car ("Red", 4,23), var oCar2 = new Car ("Blue", 3,25);

The problem with shared methods is the same as in Factory mode.

Prototype chain: Use an empty constructor to set the class name. All properties and methods are then directly assigned to the prototype property.

function Car () {}car.prototype.color = "blue"; Car.prototype.doors = 4; Car.prototype.mpg = 25; Car.prototype.drivers = new Array ("Mike", "John"); Car.prototype.showColor = function () {  alert (this.color);}; var oCar1 = new car (), var oCar2 = new Car (), OCar1.drivers.push ("Bill"), alert (ocar1.drivers);//Output "Mike,john,bill" alert ( ocar2.drivers);//Output "Mike,john,bill"

Disadvantages:

1, the constructor does not have parameters, this problem, perhaps the prototype chain is the definition of it.

2. If the attribute (driver) points to an object, multiple instances are pointing to the same object, and there is a problem.

Purpose: The property cannot be shared (if it needs to be shared, written on prototype), the method needs to be shared;

　　

Blending mode:

function Car (scolor,idoors,impg) {  this.color = Scolor;  This.doors = idoors;  This.mpg = Impg;  This.drivers = new Array ("Mike", "John"); Car.prototype.showColor = function () {  alert (this.color);}; var oCar1 = new Car ("Red", 4,23), var oCar2 = new Car ("Blue", 3,25); OCar1.drivers.push ("Bill"); alert (ocar1.drivers);//Output " Mike,john,bill "alert (ocar2.drivers);//Output" Mike,john "

Now: The property is created in the constructor, and the method is created on the prototype chain.

　　

　　

JS Object-Oriented definition object