Detailed explanation of function classification and examples of this pointing in Javascript
Three ways to define functions in JSLet me explain it with an example.
<script>
//method1
function fn() {
console.log('fn created ');
}
//method2
var fn2 = function () {
console.log('fn2 created');
}
//method3
var fn3 = new Function('test', 'console.log(test);');
fn3('fn3 test');
console.dir(fn3);
console.log(fn3 instanceof Object);
</script>Running the above example proves that functions are also objects. You can use new + constructor to create an instance. The third method has low execution efficiency. Function prototype chain
From the results, we can see that the __proto__ of the Function prototype object points to Object.
Classification and calling methods of functions in JSLet me explain it with an example.
<script>
//Function classification and calling method //Method 1 Ordinary standard function, this points to window
function fn() {
console.log('fn1' + this);
}
fn(); //Essentially window.fn(); Global functions are members of window //Method 2 Object method this points to the caller o
var o = {
sayHi: function () {
console.log('fn2'+this);
}
}
o.sayHi();
//Mode 3 The constructor this points to the newly created object, here it points to star1
function Star(username){
this.username = username;
}
var star1 = new Star('ldh');
//Method 4: Bind event function this to the function caller btn
var fn = function (){
console.log('btn was clicked' + this);
}
btn.onclick = fn;
//Click the button to call the function //Method 5 Timer function The timer is actually a member of window, so this is window
setInterval(function(){},1000);
//The timer is called at the set time interval //Method 6: Execute the function immediately. this is window. Same as method 1 (function(){console.log('function executed')})();
//No need to call execute immediately</script>
Through the above examples, the author basically summarizes the usage of functions that he understands. By comparing method 4 and method 6,
Change the three functions that this points toThis pointing is a very important issue in JS. In the above function classification, we have already made a systematic analysis. The following focuses on the three functions that change the this pointer. call Change the parent class instance to a subclass instance to implement attribute inheritance
<script>
//call function
function Father(username, age) {
this.username = username;
this.age = age;
}
function Son(username, age, gender) {
Father.call(this, username, age); //Inherit the properties of the parent class this.gender = gender;
}
</script>
apply The difference between apply and call is that the parameter is an array (pseudo array). Inside apply, the array is split into elements Mainly use the Math object, Math.max.apply(Math, [4324, 45, 342, 23])
<script>
//apply function
var o = {
username: 'testuser'
};
function fn(arr) {
console.log(arr);
for (let i = 0; i < arr.length; i++) {
console.log(arr[i]);
}
console.log(this);
}
fn.apply(o, [23, 43]);
console.log(Math.max(43, 45, 243, 342));
console.log(Math.max.apply(Math, [4324, 45, 342, 23]));
</script>
bind Only change the reference of this without calling the function Use to change the this of the bound event, case
<body>
<button>click me</button>
<button>click me</button>
<button>click me</button>
<script>
//bind function
//Case: Implement multiple buttons to send verification codes and then send them again 3 seconds later var btns = document.querySelectorAll('button');
for (let i = 0; i < btns.length; i++) {
btns[i].onclick = function () {
this.disabled = true;
setTimeout(function () {
this.disabled = false; //Change this to point to btn, execute after 3000ms}.bind(this), 3000);
}
}
</script>
</body>
SummarizeThis is the end of this article about function classification and this pointing in Javascript. For more relevant JS function classification and this pointing content, please search for previous articles on 123WORDPRESS.COM or continue to browse the following related articles. I hope everyone will support 123WORDPRESS.COM in the future! You may also be interested in:
|
<<: A bug fix for Tomcat's automatic shutdown
>>: Tutorial on disabling and enabling triggers in MySQL [Recommended]
Recommend
MySQL database table and database partitioning strategy
First, let's talk about why we need to divide...
In-depth study of how to use positioning in CSS (summary)
Introduction to Positioning in CSS position attri...
Tutorial on using prepare, execute and deallocate statements in MySQL
Preface MySQL officially refers to prepare, execu...
Detailed explanation of writing multiple conditions of CSS: not
The :not pseudo-class selector can filter element...
JavaScript knowledge: Constructors are also functions
Table of contents 1. Definition and call of const...
Detailed tutorial of using stimulsoft.reports.js with vue-cli
vue-cli uses stimulsoft.reports.js (nanny-level t...
Detailed explanation of MySQL master-slave replication read-write separation construction
MySQL master-slave setup MySQL master-slave repli...
RHCE installs Apache and accesses IP with a browser
1. at is configured to write "This is a at t...
HTML Tutorial: Unordered List
<br />Original text: http://andymao.com/andy...
In-depth analysis of MySQL 8.0 redo log
Table of contents Preface Generation of redo log ...
Introduction to Jenkins and how to deploy Jenkins with Docker
1. Related concepts 1.1 Jenkins Concepts: Jenkins...
WeChat applet implements a simple dice game
This article shares the specific code of the WeCh...
Install MySQL 5.7 on Ubuntu 18.04
This article is compiled with reference to the My...
HTML left and right layout example code
CSS: Copy code The code is as follows: html,body{ ...
mysql gets yesterday's date, today's date, tomorrow's date, and the time of the previous hour and the next hour
1. Current date select DATE_SUB(curdate(),INTERVA...