文章目录
一、ECMAScript-箭头函数
es5中的函数定义
// es5中定义函数
// 方式一
function sum(x, y) {
return x + y
}
// 方式二
var sum = function sum(x, y) {
return x + y
}
console.log(sum(4, 5))
// 这两种定义方式的区别
// 1. 方式一:定义的函数,无论你在函数前调用,还是函数后调用,都不会存在问题,因为存在函数预编译
// 2. 方式二:定义的函数,只是把函数赋值一个变量,在js中存在变量提升,如果在定义之前调用,会提示未定义,只能在函数后调用。
箭头函数定义:
// 箭头函数
let sum = (x, y) => {
return x + y
}
console.log(sum(4, 5))
// 简写
let sum = (x, y) => x + y
console.log(sum(4, 5))
let x = x => x
// 等同于
let x = function(x) {
return x
}
1. this指向定义时所在的对象,而不是调用时所在的对象
let oBtn = document.querySelector('#btn')
oBtn.addEventListener('click', function(){
console.log(this) // <button id="btn">确定</button>
setTimeout(function(){
console.log(this) // Window {window: Window, self: Window, document: document, name: "", location: Location, …} 调用的window对象
},
1000)
// this怎么指向当前的对象,es5中有三种方式可以实现,bind,call,apply
// 这边使用bind 因为call,apply都是立即执行
setTimeout(function(){
console.log(this) // <button id="btn">确定</button>
}.bind(this),
1000)
// 箭头函数
// 箭头函数里没有this,是继承外层函数的this,这边父层函数this指向是<button id="btn">确定</button>
setTimeout(() => {
console.log(this) // <button id="btn">确定</button>
},
1000)
})
2. 不可以当作构造函数,不可以使用new 关键字调用,没有new.target,没有原型,没有super
// es5中定义一个类
function People(name, age){
console.log(this) // People {}
this.name = name
this.age = age
}
var p1 = new People('zhangsan','18')
console.log(p1) // People {name: "zhangsan", age: "18"}
// 箭头函数定义不可以当作构造函数
let People = (name, age) => {
this.name = name
this.age = age
}
let p2 = new People('zhangsan','18') // 编译报错:People is not a constructor
console.log(p2)
3. 不可以使用arguments对象
// 正常函数
let foo = function(){
console.log(arguments)
}
foo(1, 2, 3)
// 箭头函数
let foo = () => {
console.log(arguments)
}
foo(1, 2, 3) // 编译报错:arguments is not defined
// rest方式
let foo = (...args) => {
console.log(args) // [1, 2, 3]
}
foo(1, 2, 3)
4. 自动执行函数
// es5中自动执行函数
(function(){
console.log(2)
})()
// 或者
(function(){
console.log(3)
}())
// 箭头函数
(()=>{
console.log(4)
})()
// 报错
(()=>{
console.log(5)
}()) // 编译报错:Unexpected token, expected ","