JavaScript初级课程 function的使用

1. Function Expressions

let greeting = function sayHi(){
    console.log('Hi');
};

greeting();

2. Hoisting

函数提升（Function Hoisting）是指函数声明（Function Declarations）会被提升（hoisted）到它们所在作用域的顶部。这意味着即使函数在代码中被调用的位置在声明之前，它仍然可以被正确调用，因为函数声明在代码执行之前就已经被提升到了作用域的顶部。

function declarations

add(2,2);

function add(num1, num2){
    console.log(num1 + num2);
}

4

函数声明（Function Declarations）会被提升，而函数表达式（Function Expressions）不会。
function expressions

add(2,2);

// function add(num1, num2){
//     console.log(num1 + num2);
// }

let add = function(num1, num2){
    console.log(num1+num2);
}

3. Arguments

function multiply(num1, num2){
    let product = 1;
    for (const num of arguments)
        product *= num;

    return product;
}

console.log(multiply(2,2,4));

4. The Rest Operator

function multiply(multiplier, ...numbers){
    return numbers.map(number => number*multiplier);
}

console.log(multiply(2, 1,2,3,4))

[ 2, 4, 6, 8 ]

5. Default parameters

function createUser(name, role='guest', status='active'){
    console.log(`User: ${name}, Role: ${role}, Status: ${status}`);
}

createUser('Steven');
createUser('Alice', 'admin', 'active');

User: Steven, Role: guest, Status: active
User: Alice, Role: admin, Status: active

6. Getters and Setters

const course = {
    name: 'JavaScript for Beginners',
    duration: '3 hours',
    get details(){
        return `${this.name} is ${this.duration}`;
    },
    set details(value){
        let parts = value.split(' is ');
        this.name = parts[0];
        this.duration = parts[1];
    }
};

console.log(course.details );

course.details = 'JavaScript Pro is 10 hours';

console.log(course.details)

JavaScript for Beginners is 3 hours
JavaScript Pro is 10 hours

7. Try and Catch

const course = {
    name: 'JavaScript for Beginners',
    duration: '3 hours',
    get details(){
        return `${this.name} is ${this.duration}`;
    },
    set details(value){
        if (typeof value !== 'string'){
            throw new Error(`Value, ${value} is not a string`);
        }

        let parts = value.split(' is ');
        this.name = parts[0];
        this.duration = parts[1];
    }
};

try{
    course.details = 42;
} catch(error){
    console.log(`Caught an error: ${error.message}`);
}

Caught an error: Value, 42 is not a string

8. Let vs Var

• var 声明的变量具有函数作用域，在函数内部声明的 var 变量在整个函数内都是可见的。
• let 声明的变量具有块级作用域，这意味着它们只在包含它们的代码块（例如 if 语句、for 循环、while 循环等）内部可见。

function display(){
    for(let i = 0; i < 5; i++){
        console.log(i);
    }
    console.log(i);
}

display();

ReferenceError: i is not defined

function display(){
    for(var i = 0; i < 5; i++){
        console.log(i);
    }
    console.log(i);
}

display();

0
1
2
3
4
5

9. The ‘this’ keyword

function introduce(language){
    console.log(this.name + ' teaches ' + language);
}

const instructor = { name: 'Steven'};
const introduction = introduce.bind(instructor);

introduction('JavaScript');

Steven teaches JavaScript

bind() 方法是一个函数对象的方法，它创建一个新的函数，在调用时将this关键字设置为bind()的第一个参数

原文地址：https://blog.csdn.net/weixin_57266891/article/details/143835920

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！