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=[&#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!

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 AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

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

Programming languages ​​are used to give instructions to computers in a language they can understand. Computer languages ​​are divided into three types as follows: Machine Language Symbolic Language High Level Language Machine Language A computer is a machine. Since its memory can only store 1s and 0s, instructions must be given to the computer in the form of a stream of 1s and 0s, that is, binary code. These are easy for machines to understand. Programs written in binary code that can be directly entered into a computer for execution are called machine languages. Advantages of machine language include: Very fast execution. It is difficult to write and read programs in machine language. Machine instructions are difficult to remember. Symbolic language is also called assembly language. The assembler contains "mnemonics". A "mnemonic" is information that is easily remembered in abbreviated form. Advantages of symbolic language

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

As a modern programming language, Go language plays an important role in development. The Go language provides some built-in time functions and structures to make time processing more convenient. In this article, we will introduce some commonly used time processing methods in the Go language. time.Now() We can use the time.Now() function to get the current time: now:=time.Now()fmt.Println(now) output: 2019-06-131

Let's talk about why Vue2 can access properties in various options through this Let's talk about why Vue2 can access properties in various options through this Dec 08, 2022 pm 08:22 PM

This article will help you interpret the vue source code and introduce why you can use this to access properties in various options in Vue2. I hope it will be helpful to everyone!

An article that understands this point and catches up with 70% of front-end people An article that understands this point and catches up with 70% of front-end people Sep 06, 2022 pm 05:03 PM

A colleague got stuck due to a bug pointed by this. Vue2’s this pointing problem caused an arrow function to be used, resulting in the inability to get the corresponding props. He didn't know it when I introduced it to him, and then I deliberately looked at the front-end communication group. So far, at least 70% of front-end programmers still don't understand it. Today I will share with you this link. If everything is wrong If you haven’t learned it yet, please give me a big mouth.

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

Chrome will automatically record the URLs that have been entered in the address bar, and will automatically "associate query content" in the future. But many times we don't need some URLs, how to delete them? The editor often encounters this problem. Addresses that have been entered before will be blocked in front of commonly used addresses, resulting in the need to select several times to enter the desired website. I have looked for how to delete it at least three times because... I forget it every time. In the address bar shortcuts of Chrome's official help Chrome keyboard shortcuts, the delete shortcut key is clarified: ▍Windows deletes the address bar association content. Press the down arrow key to highlight the corresponding content, and then press the Shift+Delete key ▍macOS deletes the address Bar association content click down

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

The link vs. import debate: What’s the difference? In development and programming, we often need to interact with other files or modules. In order to achieve this interaction, linking and importing are two commonly used methods. However, many people may not know the difference between link and import and when to use them. This article will introduce the difference between link and import in detail and provide code examples. First, let's understand the concept of link. Link

How to delete win10 input method How to delete win10 input method Detailed introduction How to delete win10 input method How to delete win10 input method Detailed introduction Jul 07, 2023 pm 05:33 PM

The win10 input method has made great progress compared with previous system versions, and has many very useful functions. It is also very smooth to use overall and has the function of memory typing. However, some users already have their own input methods that are good to use. Now, if you want to delete the built-in win10 input method, how do you delete the win10 input method? Today I will tell you the details about how to delete the win10 input method. How to delete the input method in win10 1. Press [Win+i] to open the settings interface, and click on the "Time and Language" option. 2. Click "Region and Language" and click the "Options" button under "Chinese" on the right. 3. Click the "Microsoft Pinyin Alphabet" option and the "Delete" button will appear.

How does jQuery differ from CSS3 animation features? Compare the pros and cons How does jQuery differ from CSS3 animation features? Compare the pros and cons Sep 08, 2023 am 10:00 AM

How does jQuery differ from CSS3 animation features? Comparison of advantages and disadvantages Introduction: Today, web design has paid more and more attention to user experience. As one of the important means to enhance user experience, animation effects play an important role in web design. In the process of realizing animation effects, developers are faced with the problem of choosing whether to use jQuery or CSS3 animation. This article will conduct a comparative analysis between the two, discuss their advantages and disadvantages, and provide readers with relevant code examples. 1. jQuery animation: jQuery is a powerful

See all articles