前端学习日志-day19

声明方式	语法格式	特点
命名函数（function 关键字）	`function 函数名() {}`	函数有明确名称，可在声明前调用（因预解析特性）
函数表达式（匿名函数）	`var 变量名 = function() {}`	函数无名称，赋值给变量，需先声明再调用

三、作用域

1. 作用域分类

全局作用域：覆盖script标签内或整个 JS 文件，在此声明的变量可在任意位置访问。
局部作用域（函数作用域）：仅存在于函数内部，内部变量仅能在函数内使用。
块级作用域：ES6 新增，存在于{}内（如if、for语句块），ES5 无此概念。

2. 变量作用域

全局变量：在全局作用域声明的变量；或在函数内未用var声明的变量，生命周期至浏览器关闭，较占内存。
局部变量：在局部作用域声明的变量；函数形参也属于局部变量，函数执行完毕后销毁，内存占用少。

3. 作用域链

适用场景：内部函数需访问外部函数变量时。
查找规则：逐级就近查找，即先找当前函数作用域，再找外层函数作用域，直至全局作用域。

四、预解析

执行流程：JS 引擎运行 JS 分两步，先预解析，再执行代码。
预解析操作：将当前作用域内的变量声明和函数声明提升至作用域最顶部（仅提升声明，不提升赋值和函数体内容）。
执行代码：按从上到下的顺序执行提升后的代码。

五、对象

1. 核心概念

由属性（描述对象特征，名多为名词）和方法（描述对象行为，名多为动词）组成的无序集合。

2. 创建对象的三种方式

创建方式	语法示例	调用方式
对象字面量	`var obj = {属性名:属性值, 方法名:function(){}}`	属性：`obj.属性名`或`obj['属性名']`；方法：`obj.方法名()`
new Object	`var obj = new Object(); obj.属性名=属性值; obj.方法名=function(){}`	同对象字面量
构造函数	1. 声明：`function 构造函数名(形参){this.属性=形参; this.方法=function(){}}` 2. 创建：`var obj = new 构造函数名(实参)`	同对象字面量；构造函数名首字母需大写，无需`return`

3. 遍历对象（for...in 循环）

语法：for(var k in 对象){console.log(k); // 输出属性名/方法名 console.log(对象[k]); // 输出属性值/方法体}
约定：循环变量常用k或key表示。

4. 补充要点

new 构造函数作用：先创建空对象→this指向空对象→执行构造函数添加属性和方法→返回新对象。
变量 / 属性、函数 / 方法区别：
- 变量：需声明 + 赋值，单独存在，调用用变量名；属性：仅需声明，依附对象，调用用对象.属性。
- 函数：调用用函数名()；方法：依附对象，调用用对象.方法名()。

今日练习代码

练习题目

代码展示

1.对象作业代码展示

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        //对象作业
        // 1.创建电脑对象 用对象字面量来创建对象
        var computer = {
            color: '蓝色',
            weight: 100,
            brand: 'vsus',
            num: 106,
            seeFilm: function () {
                console.log('看电影');
            },
            listenMusic: function () {
                console.log('听音乐');
            },
            playGame: function () {
                console.log('打游戏');
            },
            playCode: function () {
                console.log('敲代码');
            }
        }
        for (var k in computer) {
            console.log(k);
            console.log(computer[k]);
        }
        console.log('\n');
        // 2.创建按钮对象 用new来创建对象
        var button = new Object();
        button.width = 200;
        button.height = 400;
        button.background_color = 'pink';
        button.click = function () {
            console.log('点击');
        }
        for (var k in button) {
            console.log(k);
            console.log(button[k]);
        }
        // 3.创建车的对象 用构造函数来创建对象
        function Car(weight, color, brand) {
            this.weight = weight;
            this.color = color;
            this.brand = brand;
            this.dropPerson = function () {
                console.log('可以拉人');
            }
            this.dropGoods = function () {
                console.log('拉货');
            }
            this.dropTian = function () {
                console.log('耕田');
            }
        }
        var jiPu = new Car(200, '蓝色', '吉普');
        for (var k in jiPu) {
            console.log(k);
            console.log(jiPu[k]);
        }

    </script>
</head>

<body>

</body>

</html>

2.函数作业

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        // 函数作业
        // 1.反转任意数组
        function reverse(arr) {
            var newArr = [];
            for (var i = arr.length - 1; i >= 0; i--) {
                newArr[newArr.length] = arr[i];
            }
            return newArr;
        }
        alert(reverse([1, 2, 3, 4, 5, 9, 0]));
        // 2.实现数字数组的排序
        function sort(arr) {
            for (var i = 1; i <= arr.length - 1; i++) {
                for (var j = 0; j <= arr.length - i; j++) {
                    if (arr[j] > arr[j + 1]) {
                        var temp = 0;
                        temp = arr[j];
                        arr[j] = arr[j + 1];
                        arr[j + 1] = temp;
                    }
                }
            }
            return arr;
        }
        alert(sort([10, 20, 53, 1, 3, 78, 220, 12]));
    </script>
</head>

<body>

</body>

</html>

碎碎念：最近学的APIs有点吃力，停1,2天调整一下。