Home > Computer Tutorials > Computer Knowledge > How does JavaScript define a hide-like method that can be called with a click

How does JavaScript define a hide-like method that can be called with a click

PHPz
Release: 2024-01-13 12:12:05
forward
988 people have browsed it

How does javascript define the kind of clicked method that is similar to when called by hide

Prototype method. . . . prototype

For example, define a function for the array Array

Array.prototype.in_array = function ($string) { for (var i = 0; i

{

for (i = 0; i

return true;

}

}

return false;

}

You can do it when you call it

var a = new Array('a');

a.in_array('a');

Check if it exists

In example string

String.prototype.trim = function()

{

return this.replace(/^\s*|\s*$/g, '');

}

You can do it when you call it

var a = ' abcdefg ';

a.trime();

This will remove the spaces on both sides

The same goes for custom functions. First create a function and add methods to it using prototype.

What are the methods for defining objects in JavaScript

Several ways to define Javascript objects

1. Factory method: First create the object, and then add methods and properties to the object. After closure, avoid using the new operator to create objects. Although this approach has some drawbacks, such as when defining a method inside a factory function, a new function will be created every time it is called.

function factory(name, person, address, time){

var tmp=new Object;

tmp.name=name;

tmp.person=person;

tmp.address=address;

tmp.workTime=function(){

alert("The time we start working is " time);

}

return tmp;

}

var factory1 = factory("drugs", 100, "Huashan Rd", 10);

var factory2 = factory("TCMdrugs", 100, "hongqiao Rd", 11);

factory1.workTime();

factory2.workTime();//Here, factory1 and factory2 have different methods

Although this problem can be improved in the following way, it lacks good encapsulation

function factory(name, person, address, time){

var tmp=new Object;

tmp.name=name;

tmp.person=person;

tmp.address=address;

tmp.workTime=workTime();

return tmp;

}

function workTime(){

alert("The time we start working is" this.time);

}

2. The constructor method refers to using the this keyword inside the constructor to create an object, and it needs to be instantiated through the new operator when using it. However, this method has the same problem as the factory method, that is, each time the constructor is called, a new function object will be created, resulting in repeated creation of the function.

function construct(name, person, address, time) { //Write your code logic here }

this.name=name;

this.person=person;

this.address=address;

this.workTime=function(){

alert("The time we start working is" this.time);

};

}

3. Prototype method: Use the prototype attribute to implement attributes and methods. You can check the object type through instanceof, which solves the problem of repeatedly creating functions. However, it should be noted that properties cannot be initialized by passing parameters.

function Car(){

}

Car.prototype.color = "red";

Car.prototype.doors = 4;

Car.prototype.mpg = 23;

Car.prototype.showColor = function() {

alert(this.color);

};

var car1 = new Car();

var car2 = new Car();

But if you encounter the following situation, something goes wrong again

Car.prototype.drivers = ["mike", "sue"];

car1.drivers.push("matt");

alert(car1.drivers); //Output "mike,sue,matt"

alert(car2.drivers); // Output "mike, sue, matt"

drivers are pointers to Array objects, and both instances of Car refer to the same array.

4. Mixed constructor/prototype method: solution to prototype method

function Car(sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; }

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = ["mike", "sue"];

}

Car.prototype.showColor = function () { // your code }

alert(this.color);

};

var car1 = new Car("red", 4, 23);

var car2 = new Car("blue", 3, 25);

car1.drivers.push("matt");

alert(car1.drivers);

alert(car2.drivers);

5. Dynamic prototype method: This is a very recommended method. It avoids the problems in the previous methods and provides a more friendly coding style.

function Car(sColor, iDoors, iMpg) { this.color = sColor; this.doors = iDoors; this.mpg = iMpg; }

this.color = sColor;

this.doors = iDoors;

this.mpg = iMpg;

this.drivers = ["mike", "sue"];

If (typeof Car.initialized == "undefined"){

Car.prototype.showColor = function () { // your code }

alert(this.color);

};

Car.initialized = true;

}

}

var car1 = new Car("red", 4, 23);

var car2 = new Car("blue", 3, 25);

car1.drivers.push("matt");

alert(car1.drivers);

alert(car2.drivers);

6. Mixed factory method: It is somewhat similar to the factory method, but uses the new keyword for instantiation. Although it has the same disadvantages as the factory method, it is not recommended.

The above is the detailed content of How does JavaScript define a hide-like method that can be called with a click. For more information, please follow other related articles on the PHP Chinese website!

source:docexcel.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template