Pre-binding, late binding, and problems in JS

The JavaScript function determines his context during execution, which means that this is assigned at this time.

But you're always in this situation.

function process () {

this.name = "Hello";

Document.onclick = function () {

alert (this.name);

}

}

var p = new process ();

-------------------------------------

After this program executes, you "click" On the page, you expect to appear "Hello", the actual result is undefined;

1 questions come, this.name how can not define it, carefully look at the discovery, click, execute the function then what is the context, this is the document, but the document does not have a name attribute, nature is not defined.

2 What is the result you expect? "Hello" pops up.

How to solve it?

(1) Since the execution of the function this assignment, we do not use this is not finished

function process () {

var = this;

this.name = "Hello";

Document.onclick = function () {

alert (self.name);

}

(2) also want to use this ES5 in the use of a bind method, you can achieve this

Document.onclick = function () {

alert (this.name);

}.bind (this);

But here's the problem, the BIND function can only be declared for the function of expression, and for declaration without this function

And not all browsers support this approach.

Cross-browser approach

Function.prototype.bind = Function.prototype.bind | | function (TH) {

var func = this;

return function () {

Func.apply (Th,[].slice.call (arguments));

}

}

(3) There is also a way that we can use a tool function that specifically imports this this, keeping this context consistent

function Fixthis (func,th) {

return function () {

return func.apply (TH);

}

}

The above click can be written

Document.onclick = Fixthis (function () {

alert (this.name);

},this);

----------------------------------------

Early binding there is a problem when you encounter an inheritance situation

function Prebind (func,th) {

return function () {

Func.apply (Th,[].slice.call (arguments));

}

}

function Animal () {

This.type = function () {

Alert ("Animal");

}

Document.onclick = Prebind (this.type,this);

}

function Cat () {

Animal.call (this);//Inherit Animal

This.type = function () {

Alert ("Cat");

}

}

Perform

New Cat ();

The result you expect is, after clicking, the "cat" appears but the actual result is "Animal", where is the problem?

The problem is here Document.onclick = Prebind (this.type,this); This function is registered in the Animal,

When inheriting, that is, executing the prebind () function, which returns a closure, the method body of the popup content that the closure environment hold is "Animal" that

How to solve this, the early binding of the content to replace, the following, late binding, execution, according to the specific environment to decide that function is called.

function Postbind (str,th) {

return function () {

Return th[str].apply (Th,[].slice.call (arguments));

}

}

Pre-binding, late binding, and problems in JS