The application and pointing problem of this in JS

Source: Internet
Author: User

 the application and pointing problem of this

This is a keyword in the JavaScript language. It represents an internal object that is automatically generated when the function is run, and can only be used inside the function. The value of this will change as the function is used in different situations. But there is a general principle that this is referring to the object that called the function.

The use of this information:

1, as a normal function call, this is the most common use of functions, is a global call, so this is the World object.

2. As a call to an object method, the function can also act as a method call to an object, at which point this is the ancestor object.

3, as a constructor call, the so-called constructor, is through this function to generate a new object (instance). At this point, this refers to the new object (instance).

Introduction to apply, call, bind (method of function)

window .onload = function () {

         var oDiv = document Span style= "; Font-family:consolas;color:rgb (255,0,0); Font-size:16px;background:rgb (255,255,0); Background:rgb ( 255,255,0) ">.getelementbyid (' box ');

Odiv.onclick = function () {

setinterval (function() {

this.innerhtml = ' 2222222222 '; This:window

            }. bind (This) , +);

}

     }

Apply, call, bind all are used to change the function of the This object point, the first parameter is this to point to the object, that is to specify the context, starting from the second argument, is the function of its own parameters;

Bind is to return the corresponding function, which is convenient to call later; apply, call is called immediately.

we all know that the anonymous function of the timer cannot write this, it will point to window

but with the bind method, we can arbitrarily set the point of this

Obj.showName.call (obj2,200, ' female ');//call will showname This the point changes to Obj2

    //obj.showname.apply (obj2,[200, ' female " Span style= "Font-family:consolas"),//apply will showname obj2

Call and apply difference: The last argument is different,call: direct parameter,apply: The argument is placed in the array

1, change This point,

2, inheritance function call

/* window.onload = function () {

var aLi = document.getelementsbytagname (' li '); class Array

var arr=array.prototype.slice.apply (aLi); class array to the real array , slice intercept

Arr.push (' 123 ');

Alert (arr);

}*/

Bind

Obj.showName.bind (OBJ2 ') ($, ' female );//bind Returns a function that adds () to execute

objects, namespaces

namespace namespace (called package in some languages) is a common concept in static languages. It helps us to better organize our code and avoid naming conflicts. That is, all related functions and variables are packaged by creating a simple object literal. This simple object literal simulates the role of a namespace.


The application and pointing problem of this 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.