Example tutorial on this and object prototype in javaScript

this and object prototype

this is a very special keyword that is automatically defined in the scope of all functions

// foo.count is 0, the literal interpretation is wrong

function foo(num) {

console .log("foo:"+ num);

this.count++;

}

foo.count = 0;

var i;

for(i=0;i<10;i++){

if(i>5){

foo(i)

}

}

console.log(foo.count) //0

　　　

// Use lexical scope to solve the problem

function foo(num) {

console.log("foo:"+ num);

data.count++;

}

var data = {

count:0

};

var i;

for(i=0;i<10;i++){

if(i>5){

foo(i)

}

}

console.log(data.count ); // 4

// Use foo identifier instead of this to reference the function Object , avoids the problem of this and completely depends on the variable foo Lexical scope.

function foo(num) {

console.log("foo:"+ num);

foo.count++;

}

foo.count = 0

var i;

for(i=0;i<10;i++){

if(i>5 }

## //

Force

this

points to

foo

function object function foo(num) { console.log("foo:"+num); this.count++ } foo.count = 0;

var i;

for(i=0; i<10; i++){

if(i>5){

           foo.call(foo,i);

                                                      

}

console.log(foo.count) //4

this is bound at runtime, not at writing time. The context depends on various conditions when the function is called. The binding sum of this has nothing to do with the position of the function declaration. It only depends on the way the function is called . . this

Comprehensive analysis

Call stack and calling location

function baz(){

//

The current call stack is:

baz//

Therefore, the current call position is the global scope

console.log("baz");

bar(); // <--The calling position of bar

}

function bar(){

//

The current call stack is:

baz-> bar//

Therefore, The current calling position is

bazconsole.log("bar);

foo(); // <-- The call of foo

Position

}

function foo(){

//

The current call stack is:

baz-> bar->foo//

Therefore, the current calling position is

barconsole.log( "foo");

}

baz(); // <-- The calling location of baz

Only when running in non-

strict mode , the default binding can be bound to the global object ##Only the top or last one in the object attribute reference chain. A layer of gray affects the calling position

function foo() {

console.log(this.a);

}

var. obj2 = {

a: 42,

foo:foo

};

var obj1 = {

a:2,

obj2: obj2

};

obj1.obj2.foo(); // 42

Typical application scenarios of hard binding Just create a wrapper function, pass in all the functions and return all the values ​​received

function foo(something){

console.log(this.a,something). );

return this.a + something;

};

var obj = {

a:2

};

var bar = function() {

return foo.apply(obj,arguments);

};

var b = bar(3) ; // 2 3

console.log(b) // 5

Another way is to create a

i

Auxiliary functions that can be reusedfunction foo(something){

console.log(this.a, something);

return this.a + something;

}

//

Simple auxiliary binding function

function bind(fn,obj){

return function(){

return fn.apply(obj,arguments);

};

}

var obj = {

a:2

}

var bar = bind(foo,obj);

var b = bar(3); // 2 3

console.log(b) // 5

ES5 provides built-in methods Function.prototype.bind, bind(..) will return a A hardcoded new function that will

set the parameters to this's context and call the original function.

function foo(something){

console.log(this.a, something);

return this.a + something;

}

var obj = {

a:2

}

var bar = foo.bind(obj);

var b = bar(3); // 3 5

console.log(b) // 5

API Context of the call

function foo(el){

console.log(el,this.id);

}

var obj = {

id: "awesome'

}

// Put when calling foo(..) this is bound to obj

[1,2,3].forEach(foo,obj);

// 1 awesome 2 awesome 3 awesome

newMethods that can affect the binding behavior of this function foo. (a){

this.a = a;

}

var bar = new foo(2);

console.log(bar. a); // 2

Determine whether

this

1. function is called in

new ( new Binding)? If so this is bound to the newly created object. #var bar = new foo();2.Whether the function passes

call, apply (

Display binding

) Or hard binding call? If so, specify the object when binding this##. #va bar = foo.call(obj2)3.Whether the function is called in a context object(Implicit binding

)

? If so, in which context

this is bound. var bar = obj1.foo()4.If neither, use the default binding. If in strict mode, it is bound to undefined, otherwise it is bound to the global object.

var bar = foo();

soft bindingfunction foo(){console. log("name:" + this.name);

}

var obj = {name: "obj"},obj2 = {name: "obj2" },

obj3 = {name: "obj3"},

obj3 = {name: "obj3"};

var foo0BJ = foo.softBind(obj);

foo0BJ(); // name:obj

obj2.foo = foo.softBind(obj);

obj2.foo(); // name:obj3 <--Look!

setTimeout(obj2.foo,10);

// name:obj <--- Soft binding applied

The above is the detailed content of Example tutorial on this and object prototype in javaScript. For more information, please follow other related articles on the PHP Chinese website!