北京地鐵最短路徑規劃
阿新 • • 發佈：2020-11-03
技術標籤：javascriptjses6
關於ES6箭頭函式用法
- 箭頭函式的省略寫法
- 關於箭頭函式中的this
- 不能作為建構函式例項化物件
- 不能使用arguments物件
- 箭頭函式的使用場景
1、箭頭函式的省略寫法
箭頭函式(放置形參的地方)=>{函式體},箭頭函式沒有名字,
通常將箭頭函式賦值給一個變數,變數名字就是函式名字,通過變數名字呼叫函式就可以了
// 箭頭函式(放置形參的地方)=>{函式體},箭頭函式沒有名字,
// 通常將箭頭函式賦值給一個變數,變數名字就是函式名字,
// 通過變數名字呼叫函式就可以了
const fn = () => {
console. 如果形參只有一個，可以省略小括號，如果函式體中只有一條語句，可以省略花括號，且return必須省略
let arr = [1, 2, 3, 4, 5, 6];
//es5之前
var result = arr.filter(function(item) {
if (item % 2 == 0) {return true}
else { return false}
})
//使用箭頭函式
var result = 2、關於箭頭函式中的this
箭頭函式不繫結this關鍵字，箭頭函式沒有自己的this關鍵字如果在箭頭函式中使用this,this關鍵字將指向箭頭函式 定義位置中的this,指向的是函式定義位置的上下文(windows)this
function getName() {
console.log(this.name);
}
var getName2 = () => {
console. 3、不能作為建構函式例項化物件
var Student = (sname, sage) => {
this.sname = sname;
this.sage = sage
}
let me = new Student('小明', 19);
4、不能使用arguments物件
var fn1 = () => {
console.log(arguments);
}
fn1(1, 2, 3, 4, 5);
5、箭頭函式的使用場景
5.1 適合場景
適合與this無關的回撥，定時器，陣列的方法回撥
<h2 id="content">點我</h2>
<body>
<script>
var item = document.getElementById('content')
item.addEventListener('click', function() {
console.log(this); //輸出<h2 id="content">點我</h2>
setTimeout(function() {
console.log(this); //輸出window物件
this.style.backgroundColor = 'pink'
}, 2000)
//17行提示錯誤，原因在這this在這裡指向window,
//如果要使用，必須保留this,即that=this
//使用箭頭函式沒有問題
// setTimeout(() => {
// this.style.backgroundColor = 'pink'
// console.log(this);
//輸出<h2 id="content">點我</h2>
// }, 2000);
}, true)
</script>
</body>
5.1 不適合場景
不適合與this有關的回撥,DOM元素的事件回撥(如果使用的話就指向外層作用域this的值)，物件的方法