箭头函数的使用

箭头函数

是一种定义函数的方式。

1.第一种函数定义方式:
consst aaa=function(){}
2.对象字面量中定义函数
const obj={
bbb:function(){},

bbb(){}
}
3.ES6中箭头函数
const ccc=(参数列表)=>{}

ES6中参数和返回值的问题

1.多个参数
const sum=(num1,num2)=>{
return num1+num2
}
2.一个参数
小括号可以省掉
const power=num=>{
return sum*sum
}
3.无参数形式
const sum=()=>{}

箭头函数中只有一行代码时

const mul =(num1,num2)=>num1*num2
自动将num1*num2的结果作为返回值返回回去
const demo=()=>console.log('hello word')
console.log(demo()); //undefined
无返回值的将返回undefined

箭头函数中this的使用

当我们准备把一个函数作为参数传入另一个函数中,我们习惯用箭头函数。

const obj={
setTimeout(()=>{
conso.log(this);//window
},1000)
const obj={
aaa(){
settimeout(function(){
conso.log(this);//window
})

setTimeout(()=>{
conso.log(this);//obj对象
}
}
}
obj.aaa()
箭头函数中的this引用的就是最近作用域中的this,一层层查找,直到this有定义

this的指向在函数定义的时候是确定不了的,只有函数执行的时候才能确定this到底指向谁,实际上this的最终指向的是那个调用它的对象。
1.如果一个函数中有this,但是它没有被上一级的对象所调用,那么this指向的就是window,这里需要说明的是在js的严格版中this指向的不是window,但是我们这里不探讨严格版的问题(在严格版中的默认的this不再是window,而是undefined。)

function a(){
    var user = "追梦子";
    console.log(this.user); //undefined
    console.log(this); //Window
}
a(); //相当于window.a();
//this最终指向的是调用它的对象,这里的函数a实际是被Window对象所点出来的

2.如果一个函数中有this,这个函数有被上一级的对象所调用,那么this指向的就是上一级的对象。

var o = {
    user:"追梦子",
    fn:function(){
        console.log(this.user); //追梦子
        console.log(this); //{user: "追梦子", fn: ƒ}
    }
}
o.fn(); //this执行时被它的上一级对象o{user: "追梦子", fn: ƒ}调用

3.如果一个函数中有this,这个函数中包含多个对象,尽管这个函数是被最外层的对象所调用,this指向的也只是它上一级的对象。

var o = {
    a:10,
    b:{
        //a:12,
        fn:function(){
            console.log(this.a); //undefind  有两个对象b和o,所以此this.a指向它的上一级
        }
    },
    fn1:function(){
        console.log(this.a);  //10 
    }
}
o.fn1();
o.b.fn();

你可能感兴趣的:(javascript,前端)