【前端】JavaScript学习笔记（三）——函数

✨课程链接

✨学习笔记

定义函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        // 定义方式一
        function abs(x) {
            // 手动抛出异常
            if(typeof x !== "number"){
                throw "Not a Number"
            }
            console.log("x=>"+x)
            console.log("arguments:")
            for(let argu of arguments){
                console.log(argu)
            }

            if(arguments.length == 2){
                console.log("argu2:"+arguments[1])
            }

            if(x > 0){
                return x
            }
            else {
                return -x
            }
        }
        
        // 定义方式二
        // function (x){...}是一个匿名函数 但是可以把结果赋值给abs 通过abs就可以调用函数
        // var abs = function (x) {
        //     if(x > 0){
        //         return x
        //     }
        //     else {
        //         return -x
        //     }
        // }
        abs(10)
        abs(10, 11, 12)
        // 参数问题:JavaScript可以传任意个参数
        // 参数是否存在的问题？
        // 假设不存在参数 如何规避 -> 手动抛出异常
        // arguments 代表传递进来的所有的参数 是一个数组

    </script>

</head>
<body>

</body>
</html>

多个参数的问题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

    <script>
        // ES6引入的新特性 获取除了已经定义的参数之外的所有参数
        function f(a, b,...rest) {
            // if(arguments.length > 2){
            //     for (let i = 2; i < arguments.length; i++){
            //         console.log("不使用rest的方式")
            //     }
            // }
            console.log("a=>"+a)
            console.log("b=>"+b)
            // rest参数只能写在最后面 必须用...标识
            console.log(rest)
        }

        f(1, 2, 3, 4, 5)

    </script>

<body>

</body>
</html>

变量的作用域

在JavaScript中 var定义的变量实际是有作用域的

假设在函数体中声明则在函数体外不可以使用（非要想实现可以研究闭包）

"use strict"

function f() {
    var x = 1
    x = x + 1
}
x = x +2 // Uncaught ReferenceError: x is not defined

如果两个函数使用了相同的变量名只要在函数内部就不冲突

function f() {
    var x = 1
    x = x + 1
}
function f2() {
    var x = 1
    x = x + 1
}

内部函数可以访问外部函数成员反之则不行

function f() {
    var x = 1
    // 内部函数可以访问外部函数成员 反之则不行
    function f2() {
        var y = x + 1
    }
    var z = y + 1 // Uncaught ReferenceError: y is not defined
}

假设内部函数变量和外部函数变量重名

function f() {
    var x = 1
    function f2() {
        var x = "A"
        console.log("inner" + x)
    }
    console.log("outer" + x)
    f2()
}
f()

JavaScript中函数查找变量从自身函数开始 由内向外 查找

假设外部存在这个同名的函数变量则内部函数回屏蔽外部函数的变量

提升变量的作用域

function f() {
    var x = "x, y:" + y
    console.log(x)
    var y = "y"
}
f()

output：x, y:undefined

说明：JS执行引擎，自动提升了y的声明，但是不会提升变量y的赋值

这个是在JavaScript建立之初就存在的特性。

养成规范：所有的变量定义都放在函数的头部，不要乱放，便于代码维护;

全局变量

// 全局变量
var x = 1
function f() {
    console.log(x)
}
f()
console.log(x)

全局对象

var x = "xxx"
alert(x)
alert(window.x) // 默认所有的全局变量 都会自动绑定在 windows对象下

alert()这个函数本身也是 windows 的一个变量

var x = "xxx"

window.alert(x)

var oldAlert = window.alert
// oldAlert(x)

window.alert = function () {

}
// 此时alert失效 不弹窗
window.alert("失效")

// 恢复
window.alert = oldAlert
window.alert("已恢复")

JavaScript 实际上只有一个全局作用域，任何变量(函数也可以视为变量)，假设没有在函数作用范围内找到，就会向外查找,如果在全局作用域都没有找到，报错 ReferenceError

规范

由于我们所有的全局变量都会绑定到我们的window上。

如果不同的js文件，使用了相同的全局变量，产生冲突 -> 如何能够减少冲突

// 唯一全局变量
var Demo = {}

// 定义全局变量
Demo.name = "demo"
Demo.add = function (a, b) {
    return a + b
}

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 `let`

ES6 let 关键字解决局部作用域冲突问题

建议都使用let去定义局部作用域的变量

常量 `const`

在ES6之前，只有用 全部大写字母 命名的变量就是常量，建议不要修改这样的值

在ES6引入了常量关键字 const

const PI = "3.14"
console.log(PI)
PI = "123" // Uncaught TypeError: Assignment to constant variable.

方法

定义方法

var Demo = {
    name:"demo",
    birth:2021,
    // 方法
    age:function () {
        var now = new Date().getFullYear()
        return now - this.birth
    }
}
// 属性
Demo.name
// 方法
Demo.age()

this是无法指向的是默认指向调用它的对象

`apply`

apply在JS中可以控制this的指向

function getAge() {
    var now = new Date().getFullYear()
    return now - this.birth
}

var Demo = {
    name:"demo",
    birth:2021,
    // 方法
    age:getAge
}
getAge.apply(Demo,[]) // this 指向了Demo 参数为空

⭐转载请注明出处

本文作者：双份浓缩馥芮白

原文链接：https://www.cnblogs.com/Flat-White/p/15015580.html

posted @ 2021-07-15 14:55 双份浓缩馥芮白阅读(177) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

双份浓缩馥芮白