当前位置:网站首页>ES6中的函數進階學習
ES6中的函數進階學習
2022-07-07 10:06:00 【小白啥時候能進階成功】
1、函數定義方式
//1.自定義函數(命名函數)
function fn(){
}
//2.函數錶達式(匿名函數)
var fun = function(){
console.log("fun");
}
fun();
//3.利用new Function('參數1','參數2','函數體')
var f = new Function('a','b','console.log(a+b)');
f(1,2);
函數也屬於對象。
2、函數的調用
//1.普通函數
function fn(){
console.log("this is a fun");
}
fn();//或采用fn.call();
//2.對象的方法
var o ={
sayHi :function(){
console.log("this is a object fun");
}
}
o.sayHi();
//3.構造函數
function Star(){
console.log('constructor fun');
}
let ldh = new Star();
//4.綁定事件函數
btn.onclick = function(){
console.log('btn click fun')
};//點擊了按鈕就可以調用這個函數
//5.定時器函數
setInterval(function(){console.log('setInterval fun')},1000);
//6.立即執行函數
(function(){
console.log('lijizhixing ');
})()
3、this的指向問題
//1.普通函數-this指向window
function fn(){
console.log('1fn:'+this);
}
window.fn();
//2.對象的方法-this指向o這個對象
var o ={
sayHi :function(){
console.log(this);
}
}
o.sayHi();
//3.構造函數-this指向ldh這個實例對象
function Star(){
console.log(this);
}
let ldh = new Star();
//4.綁定事件函數-this指向btn這個按鈕
btn.onclick = function(){
console.log(this);
};
//5.定時器函數-this指向window
window.setTimeout(function(){console.log(this);},1000);
//6.立即執行函數-this指向window
(function(){
console.log(this);
})()
總結:
調用方式 | this指向 |
普通函數 | window |
構造函數 | 實例對象(原型對象中的方法也指向實例對象) |
對象方法 | 該方法所屬對象 |
事件綁定 | 綁定事件對象 |
定時器 | window |
立即執行函數 | window |
4、改變函數內部this指向
常用的有call()、apply()、bind()三種方法
1、call方法
var o ={
name:'liming',
fun:function(){console.log('object');}
}
function fn(a,b)
{
console.log(this);
console.log(a+b);
}
fn.call(o,1,2);//call的使用方法
//主要應用-繼承
function Father(uname,age)
{
this.uname = uname;
this.age = age;
}
function Son(uname,age)
{
Father.call(this,uname,age);
console.log('this name:'+this.uname);
}
let son1 = new Son('liming',18);
2、apply方法
var o ={
name:'liming',
fun:function(){console.log('object');}
}
function fn(a,b)
{
console.log(this);
console.log(a+b);
}
fn.apply(o,[2,3]);//apply的用法,後面參數必須為數組
//主要應用案例-利用Math求最大值
var arr =[1,3,5,66,23,123];
let maxNum = Math.max.apply(Math,arr);
let minNum = Math.min.apply(Math,arr);
console.log("maxNum:"+maxNum+',minNum:'+minNum);
3、bind方法(使用最多)
var o ={
name:'liming',
fun:function(){console.log('object');}
}
function fn(a,b)
{
console.log(this);
console.log(a+b);
}
//使用方法一
let newFn = fn.bind(o);//bind的用法,他不調用函數,返回由指定this的原函數的拷貝
newFn(2,3);
//使用方法二
let newFn2 = fn.bind(o,2,3);//bind的用法,他不調用函數,返回由指定this的原函數的拷貝
newFn2();
主要應用案例一
var o ={
name:'liming',
fun:function(){console.log('object');}
}
function fn(a,b)
{
console.log(this);
console.log(a+b);
}
//使用
let newFn = fn.bind(o);//bind的用法,他不調用函數,返回由指定this的原函數的拷貝
newFn(2,3);
//主要應用
btn.onclick = function(){
this.disabled = true;//這裏的this指向按鈕
setTimeout(function(){
this.disabled = false;//這裏的this指向window
}.bind(this),3000);//bind綁定後,上面的this改為了按鈕
//等價於
// let fun =function(){
// this.disabled = false;//這裏的this指向window
// }.bind(this);
// setTimeout(fun,3000);//bind綁定後,上面的this改為了按鈕
}
區別點:
- call和apply會調用函數,並且改變函數內部this指向。
- call和apply傳遞的參數不一樣,call傳遞參數arg1,arg2...,apply必須是數組形式[arg1,arg2...]
- bind不會調用函數,可以改變函數內部的this指向
主要應用場景:
- call經常做繼承
- apply經常和數組有關系。例如借助數學對象實現數組最大值最小值
- bind不調用函數,但是還想改變this指向。例如改變定時器內部的this指向。
边栏推荐
- Wallys/IPQ6010 (IPQ6018 FAMILY) EMBEDDED BOARD WITH ON-BOARD WIFI DUAL BAND DUAL CONCURRENT
- Write it into the SR table in the way of flinksql. It is found that the data to be deleted has not been deleted. Refer to the document https://do
- 用flinksql的方式 写进 sr的表,发现需要删除的数据没有删除,参照文档https://do
- Finally, there is no need to change a line of code! Shardingsphere native driver comes out
- AI moves from perception to intelligent cognition
- The new activity of "the arrival of twelve constellations and goddesses" was launched
- [original] what is the core of programmer team management?
- Internship log - day04
- Deep understanding of UDP, TCP
- Deadlock caused by non clustered index in SQL Server
猜你喜欢
CentOS installs JDK1.8 and mysql5 and 8 (the same command 58 in the second installation mode is common, opening access rights and changing passwords)
CSDN salary increase technology - learn about the use of several common logic controllers of JMeter
[Frida practice] "one line" code teaches you to obtain all Lua scripts in wegame platform
Enterprise practice | construction of banking operation and maintenance index system under complex business relations
AI从感知走向智能认知
使用BigDecimal的坑
China's first electronic audio category "Yamano electronic audio" digital collection is on sale!
Wallys/IPQ6010 (IPQ6018 FAMILY) EMBEDDED BOARD WITH ON-BOARD WIFI DUAL BAND DUAL CONCURRENT
Natapp intranet penetration
[4g/5g/6g topic foundation -147]: Interpretation of the white paper on 6G's overall vision and potential key technologies -2-6g's macro driving force for development
随机推荐
Pytest learning - dayone
20排位赛3
In addition to the objective reasons for overtime, what else is worth thinking about?
Sword finger offer II 107 Distance in matrix
conda离线创建虚拟环境
A wave of open source notebooks is coming
Basic chapter: take you through notes
内存==c语言1
Memory ==c language 1
Can't connect to MySQL server on '(10060) solution summary
ORM模型--关联字段,抽象模型类
字节跳动 Kitex 在森马电商场景的落地实践
Agile course training
Software modeling and analysis
小程序实现页面多级来回切换支持滑动和点击操作
Please ask me a question. I started a synchronization task with SQL client. From Mysql to ADB, the historical data has been synchronized normally
Before joining the chain home, I made a competitive product analysis for myself
Scratch crawler mysql, Django, etc
The combination of over clause and aggregate function in SQL Server
虚数j的物理意义