Home > Web Front-end > JS Tutorial > body text

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

亚连
Release: 2018-05-21 09:48:23
Original
1797 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:

'use strict'
var jane = {
  name : ‘Jane',
  display : function(){
    retrun 'Person named ' + 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 'name' of undefined
Copy after login
Copy after login

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

var func2 = jane.display.bind(jane);
func2()
Copy after login

'Penson named Jane'
Copy after login

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

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

Calling sayHiToFriends produces an error:

jane.sayHiToFriends()
Copy after login

TypeError: Cannot read property 'name' of undefined
Copy after login
Copy after login

Solution One: Save this in different variables

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

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

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

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

Related articles:

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!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template