Home > Web Front-end > JS Tutorial > Detailed explanation of different ways of function calling and the pointing of this

Detailed explanation of different ways of function calling and the pointing of this

小云云
Release: 2018-02-06 09:22:02
Original
1998 people have browsed it

1. Function calling method

1. As a function, it is a direct and easy-to-understand method (i.e. function calling mode).

2. As a method, the method is connected to the object and called by the object. This form is object-oriented programming.

3. As a constructor, a new object is created during the construction process.

4. Via the apply or call method of the function.

This article mainly brings you a brief discussion of the different ways of function calling and the direction of this. The editor thinks it is quite good, so I will share it with you now and give it as a reference for everyone. Let’s follow the editor to take a look, I hope it can help everyone.

2. Function parameters

1. Incoming parameters

(1) There are more incoming variables than function definition variables.

(2) There are more variables passed in when defining variables in the function, and the extra variables are undefined

2. When the function is called, the two parameters argument and this are passed in implicitly (i.e. argument and this are quietly passed into the function and act in the scope of the function).

(1)argument: The set of variables passed into the function when the function is called (with the argument.length attribute)

eg: argument[0] refers to the first parameter passed into the function

(2) this is associated with an object.

Depending on the calling method, the point of this is also different. Therefore this is the invocation context.

3. Pointing to this

1. Function calling mode (this->window)

This function does not belong to the attributes of any object.

function fn1(){
 //some code
}
fn1();
或着:
var fn2=function(){
 //some code
}
fn2();
使用这种方式调用函数,函数的上下文是全局上下文(global context即window)。this->window。
Copy after login

2. Method calling mode (this->The object to which the method belongs)

This function is a property of an object. When this function is called, this function is regarded as this object a method.

var obj={
 //some code;
};
obj.getname=function(){
 //some name
}
obj.getname();
函数的上下文是这个对象(例子中的 obj)。this->obj
Copy after login

3. Constructor calling mode (this->new object created)

When the function is called as a constructor, it has the following characteristics:

A new object is created;

This new object is passed to the constructor as the this parameter, which means that this new object is the context of the constructor function;

If there is no explicit return statement, this new object will be returned implicitly (that is, it will be returned quietly) and become the value of this constructor.

function Fn(){
 this.a=function(){
   return this;
 }
}
var n=new Fn();
console.log(n.a());//Fn{a:f}
console.log(n);//fn{a:f}
//此例中,构造了一个构造函数Fn((),利用new关键字调用时一个空的对象被创建出来,并传递到函数中作为this存在。this-Fn(新的)
//这个构造器同时创建了a属性,并将此属性作为一个方法赋予给它创建出新对象的实例。
Copy after login

4.apply() gets the call() method (this-> can be any object we specify)

(1) apply(), two parameters. First parameter: the object used as the function context. Second parameter: a parameter array.

(2) call(), two parameters. First parameter: the object used as the function context. The second parameter: argument list.

call() and apply() are mostly used for function callbacks.

function circle(list,calback){
 for(var i=0;i<list.length;i++){
   calback.call(list[i],i);
 }
}
var list=[&#39;a&#39;,&#39;b&#39;,&#39;c&#39;];
circle(list,function(index){
 console.log(index);//0,1,2(即传进来的i值)
 console.log(this);//a,b,c(call的第一个参数)
});
//this->call()传递进来的第一个参数。
Copy after login

Related recommendations:

mysqli executes multiple statements in batches and executes multiple statements with one function call

WeChat Detailed explanation of data data operations and function calls in mini program Page

How to solve the problem of undefined function when js parent function calls child function

The above is the detailed content of Detailed explanation of different ways of function calling and the pointing of this. 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