Examples to explain how to solve this pointing error in JavaScript (picture and text tutorial)-JS Tutorial-php.cn

Examples to explain how to solve this pointing error in JavaScript (picture and text tutorial)

亚连

Release： 2018-05-21 09:48:23

Original

1749 people have browsed it

The handling of this pointer in JavaScript is a common headache for everyone. Here we give an example to explain the solution to the this pointer error in JavaScript. Friends in need can refer to

to see the following object definition:

&#39;use strict&#39;
var jane = {
  name ： ‘Jane&#39;,
  display : function(){
    retrun &#39;Person named &#39; + this.name;
  }
};

Copy after login

This way you can call it normally

jane.display();

Copy after login

The following call will go wrong:

var func = jane.display;
func()

Copy after login

TypeError: Cannot read property &#39;name&#39; of undefined

Copy after login

Because this pointer has changed, the correct way is as follows:

var func2 = jane.display.bind(jane);
func2()

Copy after login

&#39;Penson named Jane&#39;

Copy after login

All functions have their special this variable, such as the following forEach

var jane = {
  name : &#39;Jane&#39;,
  friends: [&#39;Tarzan&#39;, &#39;Cheeta&#39;],
  sayHiToFriends: function(){
    &#39;use strict&#39;;
    this.friends.forEach(function(friend) {
      // &#39;this&#39; is undefined here
      console.log(this.name + &#39; says hi to &#39;+ friend);
    });
  }
}

Copy after login

Calling sayHiToFriends produces an error:

jane.sayHiToFriends()

Copy after login

TypeError: Cannot read property &#39;name&#39; of undefined

Copy after login

Solution One: Save this in different variables

var jane = {
  name : &#39;Jane&#39;,
  friends: [&#39;Tarzan&#39;, &#39;Cheeta&#39;],
  sayHiToFriends: function(){
    &#39;use strict&#39;;
    var that = this;
    this.friends.forEach(function(friend) {
      console.log(that.name + &#39; says hi to &#39;+ friend);
    });
  }
}

Copy after login

Solution two:Use the second parameter of forEach, It can assign a value to this

var jane = {
  name : &#39;Jane&#39;,
  friends: [&#39;Tarzan&#39;, &#39;Cheeta&#39;],
  sayHiToFriends: function(){
    &#39;use strict&#39;;
    this.friends.forEach(function(friend) {
      console.log(this.name + &#39; says hi to &#39;+ friend);
    }, this);
  }
}

Copy after login

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Seven ways to create objects in JavaScript (summary, must read)

javascript implementation in Java Map object function (detailed answer, code attached)

JavaScript constructor and new operator (key point, must read)

The above is the detailed content of Examples to explain how to solve this pointing error in JavaScript (picture and text tutorial). For more information, please follow other related articles on the PHP Chinese website!