当前位置:首页 > H5 > 正文内容

js箭头函数,es6箭头函数

高老师7年前 (2019-07-09)H53183


基本结构:箭头函数左边是参数,右边是返回值


//创建func函数

let func = num => num;

//上面的func函数等价于

let oldFunc = function (num) {
    return num
};

//如果存在多个参数,参数需要括号包起来

let sum = (num1, num2) => num1 + num2;

//上面的sum函数等价于

let oldSum = function (num1, num2) {
    return num1 + num2;
};

//如果返回值需要大量逻辑,并且一个表达式写不完,需要用花括号包起来返回体

let chkUsername = username => {
    if (username == 'zhang') {
        return 1;
    } else if (username == 'li') {
        return 2;
    } else {
        return 3;
    }
}

//箭头函数的返回值支持使用已定义的函数

let getInt = num => parseInt(num);

//箭头函数的this,这是以前this的作用域,在函数中创建闭包,此时的this变了

let userAge = {
    age: 1,
    getAge: function () {
        var fn = function () {
            return this.age //此时的this指向的是windows
        }
        return fn();
    },
    setAge: function (age) {
        this.age = age;
    }
};
userAge.setAge(19);
console.log(userAge.getAge())

//箭头函数this总是指向词法作用域,也就是外层调用者obj

let userNewAge = {
    age: 1,
    getAge: function () {
        let fn = ()=>(this.age)
        return fn();
    },
    setAge: function (age) {
        this.age = age;
    }
};
userNewAge.setAge(19);
console.log(userNewAge.getAge())

扫描二维码推送至手机访问。

版权声明:本文由高久峰个人博客发布,如需转载请注明出处。

本文链接:https://blog.20230611.cn/post/272.html

分享给朋友:

“js箭头函数,es6箭头函数” 的相关文章

Javascript封装的原生Ajax请求

Javascript封装的原生Ajax请求

由于工作需要长期使用Ajax,一个页面重复的AJAX请求太多,于是封装起来,只需要编写回调函数/* ------------- 使用方法: 1.ajaxrequest()函数执行准备的参数(1.请求地址2.发送数据字符串拼接3.type值可选get/post4.回调函数名称)   exam...

Javascript-WebSql的用法

Javascript-WebSql的用法

    WebSql的原理是浏览器集成了sqllite数据库,Js操作,浏览器协助完成,没有多复杂。<!--          三个核心方法   ...

Javascript事件冒泡和捕捉

Javascript事件冒泡和捕捉

捕捉模式从DOM最顶层一直到最后一层,冒泡正好相反,具体运行以下实例测试.<!DOCTYPE html> <html> <head> <title>捕捉和冒泡</title> <meta charset="...

tmodjs模板语法

tmodjs模板语法

    TmodJS是一套完整的前端模块框架。    虽然我们PHP框架自带各种模板引擎,但是始终是后端模板引擎。例如我们在使用ThinkPHP3.2.3中如果是Ajax异步加载页面,拼接HTML真的是很头疼的一件事情。...

Javascript绑定事件和移除事件

Javascript绑定事件和移除事件

<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> </head> <body>...

 js图片旋转插件jqueryrotate

js图片旋转插件jqueryrotate

jQuery 插件——jqueryrotate,它可以实现旋转效果。jqueryrotate 支持所有主流浏览器,包括 IE6。如果提示方法不存在,可能是你的Jquery版本过低或者过高。基本语法:$('#img').rotate(90);//旋转90度其他的参数:参数类型说明默认值...