JavaScript Learning Notes (ix)--Methods

In the study of Liaoche predecessors of the JavaScript tutorial, encountered some points needing attention, so as a study notes listed, remind yourself to notice!

If you have the need, welcome to visit the previous blog https://www.liaoxuefeng.com/ study.

To bind a function in an object, we call this function a method of this object.

In the previous study, the object is defined as follows:

var xiaoming = {    ' xiaoming ',    1990};

If we bind a function to the xiaoming object, we can do more things. For example, write an Age () method, and return to xiaoming :

var xiaoming = {    ' xiaoming ',    1990,    function  () {         var New Date (). getFullYear ();         return  This . Birth;     // function xiaoming.age () //This year the call is 25, and next year the call becomes 26.

A function bound to an object is called a method, which is no different from a normal function, but we find that it uses the This keyword internally.

Inside a method, this is a special variable that always points to the current object . In the above example, this is the variable xiaoming . So This.birth takes the birth attribute of the xiaoming .

If you take the above code apart and write it:

function Getage () {    varnew  Date (). getFullYear ();     return  This . Birth;} var xiaoming = {    ' xiaoming ',    1990,    age:getage};   //25, normal result getage ();//NaN

We found that a separate call to the function getage () returned NaN .

Note that in JavaScript, if this is called inside the function, This is the following:

• If called as a method of an object, such as xiaoming.age () , this function's this point points to the called object, which is xiaoming , which is what we expected.
• If a function is called separately , such as getage () , this point of the function points to the global object, which is window .

It is also wrong if you use the following method:

var // get Xiaoming's age function first. //NaN

To ensure that this point is correct, it must be called in the form of obj.xxx ().

For a variety of reasons, ECMA decided that in strict mode, the function's this point is pointed to undefined, so in strict mode, you get an error, but not the correct location to which this should point :

' Use strict '; var xiaoming = {    ' xiaoming ',    1990,    function  () {         var New Date (). getFullYear ();         return  This . Birth;    }}; var fn = xiaoming.age;   //uncaught Typeerror:cannot Read Property ' birth ' of undefined

If we reconstruct the method:

' Use strict ';varXiaoming ={name:' Xiao Ming ', Birth:1990, Age:function () {        functionGetagefrombirth () {vary =NewDate (). getFullYear (); returnY- This. Birth; }        returnGetagefrombirth (); }}; xiaoming.age (); //uncaught Typeerror:cannot Read Property ' birth ' of undefined

The result is another error ! The reason is that this pointer only points to xiaoming within the function of the age method, the function defined inside the function, this also points to undefined ! (in non-strict mode, it points back to the Global Object window !) ）

We can first capture this with a that variable:

' Use strict ';varXiaoming ={name:' Xiao Ming ', Birth:1990, Age:function () {        var = this;//capture This from the beginning of the method        functionGetagefrombirth () {vary =NewDate (). getFullYear (); returnY-that.birth;//use that rather than this        }        returnGetagefrombirth (); }}; xiaoming.age (); ///

with var = This, you can safely define other functions within the method, rather than heap all the statements into a single method.

Apply

Although in a separate function call, we use the strict mode to point this to undefined or window , however, there are other ways to control this Pointing to:

To specify which object This function is pointing to, you can use the apply method of the function itself, which receives two parameters, the first parameter is the this variable that needs to be bound, the second parameter is an Array , A parameter that represents the function itself.

Fix getage () call with apply :

function Getage () {    varnew  Date (). getFullYear ();     return  This . Birth;} var xiaoming = {    ' xiaoming ',    1990,    //  25  getage.apply (Xiaoming, []);///, this points to xiaoming, the parameter is empty

Another method similar to apply () is call () , the only difference being:

• apply () package the parameters into an Array and then pass in;

• Call () passes parameters sequentially.

For example, Invoke Math.max (3, 5, 4) , respectively, with apply () and call () to achieve the following:

Math.max.apply (null[3, 5, 4]//  5Math.max.call (null3, 5, 4  //  5

For normal function calls, we usually bind this to null .

Decorative Device

With apply () , we can also dynamically change the behavior of the function.

All JavaScript objects are dynamic, even if built-in functions, we can also re-point to the new function.

Now suppose we want to count the number of times the code has called parseint () , to find out all the calls, and then manually add

count + = 1 , but it's foolish to do so. The best solution is to replace the default parseint () with our own function :

' Use strict '; var count = 0; var //Save original function  function  () {    + =1    ; return oldparseint.apply (null//Call the original function//test:parseint (' Ten ');p arseint (' ;p arseint (' + '); Console.log (//   3

JavaScript Learning Notes (ix)--Methods