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

Feb 06, 2018 am 09:22 AM
this different Way

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=['a','b','c'];
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!

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

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

What are the different computer languages? What are the different computer languages? Aug 28, 2023 pm 02:25 PM

What are the different computer languages?

What are the methods of time processing in Go language? What are the methods of time processing in Go language? Jun 10, 2023 pm 09:42 PM

What are the methods of time processing in Go language?

How to remove unwanted URLs from Chrome's address bar? How to remove unwanted URLs from Chrome's address bar? Mar 08, 2024 am 09:19 AM

How to remove unwanted URLs from Chrome's address bar?

How to upgrade win7 system from xp system How to upgrade win7 system from xp system Jul 13, 2023 am 08:53 AM

How to upgrade win7 system from xp system

Comparing link and import: What are their differences? Comparing link and import: What are their differences? Jan 06, 2024 pm 08:23 PM

Comparing link and import: What are their differences?

How to set restore point in win7 How to set restore point in win7 Jul 20, 2023 am 10:33 AM

How to set restore point in win7

How to use this method in Java How to use this method in Java Apr 18, 2023 pm 01:58 PM

How to use this method in Java

Insight into the differences between C language and Python Insight into the differences between C language and Python Mar 23, 2024 am 11:03 AM

Insight into the differences between C language and Python

See all articles