This-javascript Object-oriented advanced

# The use of this #

Focus: Who calls on who to point

//es6 new feature, define the arrow function var fn = () =>{...} If there is this, it is cured, basically similar to the bind situation

1, Value: OK when the function is actually called, because each call will have a different context

var per1 = new Person (' Zhangsan ', 18)
Per1.sayhello ()
var per2 = new Person (' lis ', 20)
Per2.sayhello ()
Per1 a call to per1,per2 a call points to Per2

2.* * Who calls to point to who * * Global Call-->window object called--current object

function Person (name,age) {
THIS.name =name;
This.age= age;
This.sayhello = function () {
Console.log (' hello,i m ' +this.name+ ' i m ' + this.age)
}
}

var per1 = new Person (' Zhangsan ', 18)
Per1.sayhello ()
var per2 = new Person (' lis ', 20)
Per2.sayhello ()

Who calls this this, the this is pointing to WHO


3. If the function is an object* * property, which points to the current object
If it is a* * Normal function * *, it is a window property

A.var obj = {
Name: ' Zhangsan ',
Age:10,
Sayhello:function () {
Console.log (THIS.name)
}
}

Obj.sayhello ()//zhangsan


B.var obj = {
Name: ' Zhangsan ',
Age:10,
Sayhello:function () {
function inner () {
Console.log (THIS.name)
}
}
}

Obj.sayhello ()//print out something
Because this one points to the window

4. How to get the properties inside the current object inside the normal function
Method 1: When the parameter 2.this is saved 3.call method, will immediately call 4.bind (this) is not executed immediately
P1.sayname = P1.sayName.bind (p1) (Cure This), the value of the transfer is very useful, between the modules
Cases:
1. When the parameter is passed

var obj = {
Name: ' Zhangsan ',
Age:10,
Sayhello:function () {
function inner (name) {
Console.log (name)
}
Inner (THIS.name)//as parameter passing
}
}

Obj.sayhello ()//zhangsan


2. Save the object's this
var obj = {
Name: ' Zhangsan ',
Age:10,
Sayhello:function () {
var = this//save this, also equivalent to curing
function inner () {
Console.log (That.name)///later called that is the object's this
}
Inner ()
}
}

Obj.sayhello ()//zhangsan


3. Manually modify this by using the call or Apply method
var obj = {
Name: ' Zhangsan ',
Age:10,
Sayhello:function () {
function inner () {
Console.log (THIS.name)
}
Inner.call (this)//inner The This point to the current object
}
}

Obj.sayhello ()//zhangsan
var obj1 = {};
Obj1.sayhello = Obj.sayhello;
obj1.name = ' lis '
Obj1.sayhello ()//lis

4.bind (this) solidify this
var obj = {
Name: ' Zhangsan ',
Age:10,
Sayhello:function () {
function inner () {
Console.log (THIS.name)
}
Inner.bind (This) ()//Add binding, Note: Bind is basically similar to call, but does not execute immediately, and needs to be executed immediately.
}
}

Obj.sayhello ()//zhangsan

var obj1 = {
Name: ' Lis '
}
var obj2 = {
Name: ' Wang5 '
}

Obj1.sayhello = Obj.sayHello.bind (OBJ2)//Call the SayHello method in obj, bind the obj2 name, or bind to other obj, if there is no Name property, return undefined

Obj1.sayhello ()//wang5



5. If a:this.x obj.a--> this points to the window

Notice the difference between this in the attribute and the this in the method.

Cases:
var age = 15;
var obj = {
Name: ' Zhangsan ',
Age:5,
               x:this.age,  //Here's this point to the window, pay attention to understanding a thought, who calls this to point to who
               sayage:function () {
                 console.log (this.age)
               }
          }&NBSP

        Console.log (obj)    //x = 15, point to Window
        obj.sayage ()    //5

This-javascript Object-oriented advanced