JavaScript自学笔记（三）

最新推荐文章于 2024-09-14 18:52:56 发布

王者热爱去地下城复活

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量90

点赞数

分类专栏：笔记文章标签： js javascript 前端

本文链接：https://blog.csdn.net/To_Ma_To/article/details/119481007

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

这篇博客详细讲解了JavaScript的基础知识，包括作用域（全局与局部）、作用域链、预解析（变量与函数提升）以及对象的创建和使用。在作用域部分，解释了变量的生命周期和访问规则；预解析部分阐述了JS引擎的运行机制；对象部分则介绍了三种创建对象的方法及属性、方法的区别，并通过实例展示了遍历对象的方式。博客适合前端初学者巩固JS基础知识。

摘要由CSDN通过智能技术生成

学习链接：https://www.bilibili.com/video/BV1Sy4y1C7ha
JavaScript基础语法-dom-bom-js-es6新语法-jQuery-数据可视化echarts黑马pink老师前端入门基础视频教程
笔记涉及的是视频p135~p155的内容，涉及js的作用域、预解析和对象的知识

1. js作用域

作用域是限定一段程序代码中的名字的可用性的代码范围，作用域目的是为了提高程序可靠性并且可以减少命名冲突；在同一个作用域内不能引起命名冲突

1.1 全局作用域

整个<script></script>标签/单独js文件

1.2 局部作用域

代码名字仅在在函数内部起效果作用

1.3 变量的作用域

全局变量--全局作用域下的变量
局部变量--函数内部声明的变量，函数的形参也是局部变量
注意：在函数内部没有声明直接赋值的变量也属于全局变量

1.4 作用域链

内部函数能调用外部函数变量，用链式查找决定哪些数据能被内部函数访问，一层一层向外查找，就近原则取最近的变量。

2. js预解析

2.1 js引擎运行步骤：

预解析
代码执行

2.2 预解析

js引擎会将js里面所有的 var 和 function 提升到当前作用域的最前面

2.2.1 预解析分类

变量预解析（变量提升）--将所有变量声明提升到当前的作用域最前面 不提升赋值
函数预解析（函数提升）--将所有函数声明提升到当前的作用域最前面 不调用函数

变量预解析例子

例1

console.log(num);

var num = 10;

等同于

var num;//变量声明提升

console.log(num);

num = 10;//赋值没有提升，因此会报错

例2

fun();

var fun = function();{ //fun为变量表达式，不算函数

console.log(22);

}

相当于

var fun;//变量预解析

fun();

fun = function();{

console.log(22);

}

函数预解析例子

例1

fun();

var fun = function(){//fun为变量表达式，不是函数

console.log(22);

}

相当于

var fun;//变量预解析

fun();

fun = function(){

console.log(22);

}

预解析综合案例

f1();

console.log(c);

console.log(b);

console.log(a);

function f1(){

var a=b=c=9;

        console.log(a);

        console.log(b);

        console.log(c);

}

相当于

function f1(){//函数预解析

  //var a = 9, b = 9, c = 9; b、c直接赋值没有var声明，看成全局变量

var a; //变量预解析

a = b = c = 9;

        console.log(a);

        console.log(b);

        console.log(c);

}

console.log(c);

console.log(b);

console.log(a);

运行结果

3. js对象

对象--一个具体的事物，一组无序的相关属性和方法的集合

3.1 创建对象的三种方法

3.1.1利用字面量创建对象

对象字面量：花括号｛｝内包含了表达这个具体事物的属性和方法

实例：

var obj = {

uname : ' ', 属性名:属性值,

age : ' ',

sex : ' '，

sayHi : function(){

console.log('hi');}

};//创建对象

3.1.2利用new Object创建对象

        var obj = new Object();

                obj.uname = '张三 '; 对象.属性 = 属性值;

                obj.age = 18;

                obj.sayHi = function(){

                console.log('hi');

               }

3.1.3利用构造函数创建对象

构造函数：将对象里面一些相同的属性和方法抽象出来封装到函数中

声明：        function 构造函数名(形参){

                  this.属性 = 值;

                  this.方法 = function(){}

                }

调用： new 构造函数名(实参);

    <script>
        function Star(uname) {//构造函数
            this.name = uname;
        }
        var tmt = new Star('番茄');//对象
        console.log(tmt.name);
    </script>

注意：