No2.6 前端面试题 1. this指向 2. 箭头函数 3. Promise 4. 块级作用域

最新推荐文章于 2024-05-30 15:07:12 发布

代号_赖皮

最新推荐文章于 2024-05-30 15:07:12 发布

阅读量46

点赞数

分类专栏：前端面试题文章标签：前端 javascript

本文链接：https://blog.csdn.net/weixin_63493262/article/details/129111326

版权

前端面试题专栏收录该内容

13 篇文章 1 订阅

订阅专栏

1. this指向

this指向window

全局对象中的this
全局作用域或者普通函数中的this
匿名函数中的this,因为匿名函数的执行环境具有全局性

非箭头函数

this永远指向最后调用它的那个对象
apply,call,bind可以改变this指向

箭头函数

箭头函数没有this,看外层函数是否有函数,有就是外层函数的this,没有就是window

new 关键词可以改变this的指向

2. 箭头函数

1. 箭头函数介绍

什么是箭头函数

ES6新增特性之一用=>来定义函数,省去关键字function.箭头函数相当于匿名函数,并简化了函数定义
函数的参数放在=>前面的括号()中，函数体跟在=>后的花括号{}中

// 箭头函数
let fn = (name) => {
    // 函数体
    return `Hello ${name} !`;
};
// 等同于
let fn = function (name) {
    // 函数体
    return `Hello ${name} !`;
};

箭头函数的参数及函数体

//没有参数，写空括号
    let fn = () => {
        console.log('hello');
    };
//只有一个参数，可以省去参数括号
    let fn = name => {
        console.log(`hello ${name}!`)
    };
//有多个参数，将参数依次用逗号(,)分隔，包裹在括号中
    let fn = (val1, val2, val3, val4) => {
        return [val1, val2, val3, val4];
    }
	
//函数体

//1.如果箭头函数的函数体只有一句执行代码，简单返回某个变量或者返回一个简单的js表达式，可以省去函数体花括号{ }
//返回某个简单变量val
let f = val => val;
// 等同于
let f = function (val) { return val };

//返回一个简单的js表达式num1+num2
let sum = (num1, num2) => num1 + num2;
// 等同于
let sum = function(num1, num2) {
  return num1 + num2;
};
//2.如果箭头函数的函数体只有一句代码，返回的不是变量和简单的js表达式，而是一个对象。
//错误写法—花括号会被解释为函数体
    let getItem = id => {
        id: id,
        name: 'gaby'
    };
//正确写法
    let getItem = id => ({
        id: id,
        name: 'gaby'
    });
//3.如果箭头函数的函数体只有一条语句且不需要返回值（最常用于回调函数），加上void关键字
let fn = () => void doesNotReturn();
//4.箭头函数用于回调函数，常见简洁
//普通函数
    [1, 2, 3].map(function (x) {
        return x + x;
    });
//ES6箭头函数
[1, 2, 3].map(x => x + x);