javascript factory way to define objects
- 2020-05-09 18:07:00
- OfStack
Each function object has an length property that represents the number of arguments the function expects to receive.
<html>
<head>
<script type="text/javascript">
var add =function(num1,num2,num3){
alert(num1+num2+num3);
}
alert(add.length);
</script>
</head>
<body>
</body>
</html>
About the object-oriented creation of js,
Goal:
Build an order object.
Contains three properties: date, amount, and submitter
Contains 1 method: display string: "XX submitted an order of XXXX yuan in XXXX-XX-XX"
1. Factory mode
<script type=text/javascript>
/*
The factory way : Returns an object by using a method , You don't need to pass it to use it new Generate a new object .
*/
function createOrder()// You can also build factory methods with parameters , Initializes object data based on the parameters passed in .
{
var order = new Object();
order.Date = "1990-1-1";
order.Price = "3200";
order.Name = "Vince Keny";
order.Show = function()// will show Method in the factory , Is created separately for each instance 1 a Show methods . Waste of resources is the drawback of this model .
{
alert(this.Name + " in " + this.Date + " Submitted the limit as " + this.Price + " Order of the yuan .")
}
return order;
}
// Use factory mode to return the object :
var order = createOrder();
// You can also use it this way , Transform the factory model into " pseudoconstructor ", Because it's used in the factory new, So when you create an object new The operator will be violated .
var order2 = new createOrder();
order.Show();
order2.Show();
</script>
2 constructor mode
/*
Constructor mode , Method declaration and factory method 1 sample , The same problem exists , You can also extract it . The difference is the use of declaring properties this
And you need to use new The operator generates the instance .
*/
function Order()
{
this.Date = "1990-1-1";
this.Price = "3200";
this.Name = "Vince Keny";
this.Show = function()
{
alert(this.Name + " in " + this.Date + " Submitted the limit as " + this.Price + " Order of the yuan .")
}
}
var order = new Order();
order.Show();
3 prototype mode
/*
Prototype mode : use prototype
*/
function Order()
{}
Order.prototype.Date = "1990-1-1";
Order.prototype.Price = "3200";
Order.prototype.Name = "Vince Keny";
Order.prototype.Show = function()
{
alert(this.Name + " in " + this.Date + " Submitted the limit as " + this.Price + " Order of the yuan .")
}
var order = new Order();
order.Show();
Hybrid constructor/prototype mode
/*
Hybrid constructor / The prototype way : Property fields are initialized using constructors , Use the prototype construction method .
*/
function Order()
{
this.Date = "1990-1-1";
this.Price = "3200";
this.Name = "Vince Keny";
}
Order.prototype.Show = function().
{
alert(this.Name + " in " + this.Date + " Submitted the limit as " + this.Price + " Order of the yuan .")
}
var order = new Order();
order.Show();
5. Dynamic mixing mode
/*
Dynamic mixing mode : The difference from the hybrid approach is the location of the declaration method . Put method life inside the constructor , More object-oriented .
*/
function Order()
{
this.Date = "1990-1-1";
this.Price = "3200";
this.Name = "Vince Keny";
if(typeof Order._initialized == "undefined")
{
Order.prototype.Show = function().
{
alert(this.Name + " in " + this.Date + " Submitted the limit as " + this.Price + " Order of the yuan .")
};
Order._initialized = true;
}
}
function Car(sColor,iDoors){
var oTempCar = new Object;
oTempCar.color = sColor;
oTempCar.doors = iDooes;
oTempCar.showColor = function (){
alert(this.color)
};
return oTempCar;
}
var oCar1 = new Car("red",4);
var oCar2 = new Car("blue",3);
oCar1.showColor(); //outputs "red"
oCar2.showColor(); //outputs "blue"