Home > Web Front-end > JS Tutorial > Detailed explanation of usage examples of this in JS

Detailed explanation of usage examples of this in JS

php中世界最好的语言
Release: 2018-05-31 11:46:14
Original
1612 people have browsed it

This time I will bring you a detailed explanation of the use of this pointer in JS. What are the precautions when using this pointer in JS. The following is a practical case, let's take a look.

In specific practical applications, the point of this cannot be determined when the function is defined, but is determined when the function is executed. It can be roughly divided into the following three types according to the execution environment:

1. When the function is called as a normal function, this points to the global object

2. When the function is called as a method of the object, this points to the object

3. When the function is used as a constructor When the caller is called, this points to the newly created object

Example 1:

window.name = 'myname';
function getName() {
  console.log(this.name);
}
getName(); //输出myname
Copy after login

Example 2:

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
Copy after login

Example 3:

function Boy(name) {
  this.name = name;
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob
Copy after login

For Example 3, there is another special case, that is, when the constructor returns an object through "return", the value of this operation The final result is this object, not a newly created object, so this is of no use in this case.

Example four:

function Boy(name) {
  this.name = name;
  return { //返回一个对象
    name: 'Jack'
  }
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Jack
Copy after login

Example five:

function Boy(name) {
  this.name = name;
  return 1; //返回非对象
}
var boy1 = new Boy('Bob');
console.log(boy1.name); //输出Bob
Copy after login

The role of call and apply

apply accepts two parameters. The first parameter specifies the pointer of this in the function body. The second parameter is an array or array-like used to pass the number of the called function. parameter list.

Example 1:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.apply(boy1,['sing','swimming']); //输出Bob like sing and swimming
Copy after login
call The number of parameters passed in is not fixed. The same as apply, the first parameter is also used to specify this in the function body. Pointing to, starting from the second parameter, each parameter is passed into the called function in turn.

Example 2:

function getInfo() {
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}
var boy1 = {
  name: 'Bob',
  age: 12
}
getInfo.call(boy1,'sing','shopping'); //输出Bob like sing and shopping
Copy after login
In addition, most advanced browsers also implement the bind method. The difference between it and call and apply is that bind only changes this inside the function. points to it, but it won't be executed immediately, you need to call it explicitly.

Example 3: Simulate the browser's bind method

Function.prototype.bind = function(obj){
  var self = this;
  return function(){
    return self.apply(obj,arguments);
  }
};
var obj = {
  name: 'Bob',
  age: 12
};
var func = function(){
  console.log(this.name+' like '+arguments[0]+' and '+arguments[1]);
}.bind(obj);
func('sing','shopping');
Copy after login

The missing this

is in In some cases, the pointing of this will be lost. In this case, we need to use call, apply and bind to change the pointing of this.

Example 1: When the "getName" method is called as a property of the "boy" object, this points to the "boy" object. When another variable

references the "getName" method, because it It is called as an ordinary function, so this points to the global object window

var boy = {
  name: 'Bob',
  getName: function() {
    console.log(this.name);
  }
}
boy.getName(); //输出Bob
var getBoyName = boy.getName;
getBoyName(); //输出undefined
Copy after login
Example 2: Even if the function is defined inside the function, if it is called as an ordinary object, this also points to the window object

var boy1 = {
  name: 'Bob',
  age: 12,
  getInfo: function() {
    console.log(this.name);
    function getAge() {
      console.log(this.age);
    }
    getAge();
  }
}
boy1.getInfo(); //Bob
        //undefined
Copy after login
I believe After reading the case in this article, you have mastered the method. For more exciting information, please pay attention to other related articles on the PHP Chinese website!

Recommended reading:

vue-element makes music player function (with code)

How to use VueJs components Father-son communication (with code)

The above is the detailed content of Detailed explanation of usage examples of this in JS. For more information, please follow other related articles on the PHP Chinese website!

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