A brief discussion on application method in JS

Source: Internet
Author: User

As for the inheritance of objects, the general practice is to use the Copy method: Object.extend
See Protpotype.js's implementation method:

Object.extend = function (destination, source) ... {
For (property in source) ... {
Destination[property] = Source[property];
}
return destination;
}
In addition, there is a less common method: Function.apply.
The Apply method can hijack (<<ajax in action>> the use of "hijacking" the language, very vivid AH) Another object method,
Inherits the properties of another object.
The sample code is as follows:
Apply Demo Code

<script>
function person (name,age) ... {//Define a class, human
This.name=name//Name
This.age=age//Age
This.sayhello=function () ... {Alert ("Hello")}
}
function Print () ... {//Display the properties of the class
This.funcname= "Print"
This.show=function () ... {
var msg=[]
for (var key in this) ... {
if (typeof (This[key])! = "function") msg.push ([Key, ":", This[key]].join (""))
}
Alert (Msg.join (""))
}
}
function Student (name,age,grade,school) ... {//Student class
Person.apply (this,arguments)
Print.apply (this,arguments)
This.grade=grade//Grade
This.school=school//School
}
var p1=new person ("Jake", 10)
P1.sayhello ()
var s1=new Student ("Tom", 13, 6, "Tsinghua Primary School")
S1.show ()
S1.sayhello ()
Alert (S1.funcname)
</script>
The student class would not have had any method, but after person.apply (this,arguments), he had the SayHello method and all the attributes of the person class. The show () method is automatically obtained after print.apply (this,arguments).

In this paper, as a tip, only the use of apply (in terms of object inheritance and function hijacking) to do a small demonstration, other more in-depth application to
By the people slowly to understand.

The second------use the parameter array of apply to improve

Let's talk about Function.apply () tips on improving program performance.

Let's start with the Math.max () function, the Math.max can be followed by any parameter, and finally the maximum value in all parameters is returned.

Like what
Alert (Math.max (5,8))//8
Alert (Math.max (5,7,9,3,1,6))//9

But in many cases, we need to find the largest element in the array.
var arr=[5,7,9,1]
Alert (Math.max (ARR))//This is not possible. It must be written like this.

function Getmax (arr) {
var arrlen=arr.length;
for (Var i=0,ret=arr[0];i<arrlen;i++) {
Ret=math.max (Ret,arr[i]);
}
return ret;
}
It's troublesome and inefficient to write. If you use apply, look at the code:
function GetMax2 (arr) {
Return Math.max.apply (Null,arr)
}
The two pieces of code achieve the same goal, but GETMAX2 is elegant, efficient, and much simpler.

See Performance test:
Getmax Performance Test

<script>
var myarr=new Array ()

function Fillrnd (Arrlen) {//fill in Arrlen 1-10 random number to array
for (Var i=0,arr=[];i<arrlen;i++) {
Arr[i]=math.ceil (Math.random () *10)
}
Return arr
}

function Getmax (arr) {
var arrlen=arr.length;
for (Var i=0,ret=arr[0];i<arrlen;i++) {
Ret=math.max (Ret,arr[i]);
}
return ret;
}

function GetMax2 (arr) {
Return Math.max.apply (Null,arr)
}


Myarr=fillrnd (20*10000)//Generate 200,000 random numbers to fill in the array

var t1=new Date ()
var Max1=getmax (Myarr)
var t2=new Date ()
var max2=getmax2 (Myarr)
var t3=new Date ()

if (MAX1!==MAX2) alert ("Error")
alert ([T3-T2,T2-T1])//On my machine 96,464. Different machines, results may vary

</script>


Compared with 200,000 data, getMax2 time is 96ms and Getmax time is 464. 5 times times the difference between the two


Another example is the push method of the array.
var arr1=[1,3,4];
var arr2=[3,4,5];
If we want to expand the arr2 and then add one to the arr1, and finally let arr1=[1,3,4,3,4,5]
Arr1.push (ARR2) is obviously not going to work. Because doing so will get [1,3,4, [3,4,5]]

We can only use a loop to go to one push (or Arr1.concat (ARR2), but the Concat method does not change arr1 itself)
var arrlen=arr2.length
for (Var i=0;i<arrlen;i++) {
Arr1.push (Arr2[i])
}

It's been so easy since I got the Apply

Array.prototype.push.apply (ARR1,ARR2)

A brief discussion on application method in JS

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.