JavaScript基础知识第七章---作用域、预解析和对象

一、JavaScript 作用域

（1）作用域

1.1 作用域概述

1️⃣ 通常来说，一段程序代码中所用到的名字并不总是有效和可用的，而限定这个名字的可用性的代码范围就是这个名字的作用域。作用域的使用提高了程序逻辑的局部性，增强了程序的可靠性，减少了名字冲突。

2️⃣ JavaScript（es6前）中的作用域有两种：

全局作用域
局部作用域（函数作用域）

1.2 全局作用域

作用于所有代码执行的环境(整个 script 标签内部)或者一个独立的 js 文件。

1.3 局部作用域（函数作用域）

作用于函数内的代码环境，就是局部作用域。因为跟函数有关系，所以也称为函数作用域。

1.4 JS 没有块级作用域

块作用域由 { } 包括；
在其他编程语言中（如 java、c#等），在 if 语句、循环语句中创建的变量，仅仅只能在本 if 语句、本循环语句中使用；

例如下面的Java代码：

if(true){ 
  int num = 123;
  system.out.print(num);  // 123
}
system.out.print(num);    // 报错

（2）变量的作用域

2.1 变量作用域的分类

在JavaScript中，根据作用域的不同，变量可以分为两种：

全局变量
局部变量

2.2 全局变量

在全局作用域下声明的变量叫做全局变量（在函数外部定义的变量）；

全局变量在代码的任何位置都可以使用；
在全局作用域下 var 声明的变量是全局变量；
特殊情况下，在函数内不使用 var 声明的变量也是全局变量（不建议使用）；

2.3 局部变量

在局部作用域下声明的变量叫做局部变量（在函数内部定义的变量）；

局部变量只能在该函数内部使用；
在函数内部 var 声明的变量是局部变量；
函数的形参实际上就是局部变量；

2.4 全局变量和局部变量的区别

1️⃣ 全局变量：在任何一个地方都可以使用，只有在浏览器关闭时才会被销毁，因此比较占内存；

2️⃣ 局部变量：只在函数内部使用，当其所在的代码块被执行时，会被初始化；当代码块运行结束后，就会被销毁，因此更节省内存空间；

（3）作用域链

只要是代码，就至少有一个作用域；
写在函数内部的局部作用域；
如果函数中还有函数，那么在这个作用域中就又可以诞生一个作用域；
根据在内部函数可以访问外部函数变量的这种机制，用链式查找决定哪些数据能被内部函数访问，就称作作用域链；

😆作用域链😆：采取就近原则的方式来查找变量最终的值。

二、JavaScript 预解析

（1）预解析

JavaScript 代码是由浏览器中的 JavaScript 解析器来执行的。JavaScript 解析器在运行 JavaScript 代码的时候分为两步：预解析和代码执行。

预解析：在当前作用域下，JS 代码执行之前，浏览器会默认把带有 var 和 function 声明的变量在内存中进行提前声明或者定义。
代码执行：从上到下执行JS语句。

预解析只会发生在通过 var 定义的变量和 function 上。学习预解析能够让我们知道为什么在变量声明之前访问变量的值是 undefined，为什么在函数声明之前就可以调用函数。

（2）变量预解析和函数预解析

2.1 变量预解析（变量提升）

预解析也叫做变量、函数提升。变量提升：变量的声明会被提升到当前作用域的最上面，变量的赋值不会提升。

2.2 函数预解析（函数提升）

函数提升：函数的声明会被提升到当前作用域的最上面，但是不会调用函数。

（3）预解析案例

3.1 案例1：结果是几？

// 案例1
var num = 10;
fun();
function fun() { 
    console.log(num);   // undefined
    var num = 20;
}

3.2 案例2：结果是几？

// 案例2
var num = 10;
function fn(){ 
    console.log(num);   // undefined
    var num = 20;
    console.log(num);   //20
} 
fn();

3.3 案例3：结果是几？

// 案例3
var a = 18;
f1();
function f1() { 
    var b = 9;
    console.log(a);   // undefined
    console.log(b);   // 9
    var a = '123';
}

3.4 案例4：结果是几？

// 案例4
f1();
console.log(c);   // 9
console.log(b);   // 9
console.log(a);   // a is not defined
function f1() { 
    var a = b = c = 9;
    console.log(a);   // 9
    console.log(b);   // 9
    console.log(c);   // 9
}

三、JavaScript 对象

（1）对象

1.1 什么是对象？

1️⃣ 现实生活中：万物皆对象，对象是一个具体的事物，看得见摸得着的实物。例如，一本书、一辆汽车、一个人可以是“对象”，一个数据库、一张网页、一个与远程服务器的连接也可以是“对象”。

2️⃣ 在 JavaScript 中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。

3️⃣ 对象是由属性和方法组成的。

属性：事物的特征，在对象中用属性来表示（常用名词）；
方法：事物的行为，在对象中用方法来表示（常用动词）；

1.2 为什么需要对象

保存一个值时，可以使用变量，保存多个值（一组值）时，可以使用数组。如果要保存一个人的完整信息呢？例如，将“斯蒂芬库里”的个人的信息保存在数组中的方式为：

var arr = ['斯蒂芬库里', '男', 34, 191];

JS 中的对象表达结构更清晰，更强大。斯蒂芬库里的个人信息在对象中的表达结构如下：

（2）创建对象的三种方式

在 JavaScript 中，现阶段我们可以采用三种方式创建对象（object）：

利用字面量创建对象；
利用 new Object 创建对象；
利用构造函数创建对象；

2.1 利用字面量创建对象

对象字面量：就是花括号 { } 里面包含了表达这个具体事物（对象）的属性和方法。

{ } 里面采取键值对的形式表示：

键：相当于属性名
值：相当于属性值，可以是任意类型的值（数字类型、字符串类型、布尔类型，函数类型等）

代码演示如下：

var star = { 
    name : 'battledao',
    age : 23,
    sex : '男',
    sayHi : function(){ 
        alert('大家好啊~');
    }
};

对象的调用：

对象里面的属性调用：对象.属性名，这个小点 . 就理解为“ 的 ” ；
对象里面属性的另一种调用方式：对象[‘属性名’]，注意方括号里面的属性必须加引号；
对象里面的方法调用：对象.方法名()，注意这个方法名字后面一定加括号；

代码演示如下：

console.log(star.name)     // 调用名字属性
console.log(star['name'])  // 调用名字属性
star.sayHi();              // 调用 sayHi 方法,注意，一定不要忘记带后面的括号

2.1.1 练习：请按照要求写出对象

要求：请用对象字面量的形式创建一个名字为可可的狗对象。

具体信息如下：

姓名：可可
类型(type)：阿拉斯加犬
年龄：5岁，
颜色：棕红色。
技能：汪汪汪(bark) ，演电影 (showFilm)

代码演示如下：

var dog = { 
    uname: '可可',
    type: '阿拉斯加犬',
    age: '5岁',
     color: '棕红色',
    bark: function (a, b) { 
        return '汪汪汪';
    },
    showFilm: function () { 
        return '演电影';
    }
}

2.1.2 变量、属性、函数、方法总结

变量：单独声明赋值，单独存在；
属性：对象里面的变量称为属性，不需要声明，用来描述该对象的特征；
函数：单独存在的，通过“函数名()”的方式就可以调用；
方法：对象里面的函数称为方法，方法不需要声明，使用“对象.方法名()”的方式就可以调用，方法用来描述该对象的行为和功能；

2.2 利用new Object创建对象

代码演示如下：

var andy = new Obect();
andy.name = 'battledao';
andy.age = 23;
andy.sex = '男';
andy.sayHi = function(){ 
    alert('大家好啊~');
}

Object() ：第一个字母大写；
new Object() ：需要 new 关键字；
使用的格式：对象.属性 = 值；

2.2.1 练习：请按照要求写出对象

要求：请用new Object 形式创建一个鸣人对象。

具体信息如下：

姓名：鸣人
性别：男
年龄：19岁
技能（skill）：影分身术

代码演示如下：

var obj = new Object;
obj.uname = '鸣人';
obj.sex = '男';
obj.age = '19岁';
obj.skill = function () { 
    return '影分身术';
}

2.3 利用构造函数创建对象

构造函数：是一种特殊的函数，主要用来初始化对象，即为对象成员变量赋初始值，它总与 new 运算符一起使用。我们可以把对象中一些公共的属性和方法抽取出来，然后封装到这个函数里面。

在 js 中，使用构造函数要时要注意以下两点：

构造函数用于创建某一类对象，其首字母要大写；
构造函数要和 new 一起使用才有意义；

代码演示如下：

function Person(name, age, sex) { 
    this.name = name;
    this.age = age;
    this.sex = sex;
    this.sayHi = function() { 
    alert('我的名字叫:' + this.name + ',年龄:' + this.age + ',性别:' + this.sex);
    }
}
var bigbai = new Person('大白', 100, '男');
var smallbai = new Person('小白', 21, '男');
console.log(bigbai.name);
console.log(smallbai.name);

😆温馨提醒😆：

构造函数约定首字母大写；
函数内的属性和方法前面需要添加 this ，表示当前对象的属性和方法；
构造函数中不需要 return 返回结果；
当我们创建对象的时候，必须用 new 来调用构造函数；

2.4 构造函数和对象

构造函数，如 Stars()，抽象了对象的公共部分，封装到了函数里面，它泛指某一大类（class）；
创建对象，如 new Stars()，特指某一个，通过 new 关键字创建对象的过程我们也称为对象实例化；

（3）new关键字

new 在执行时会做四件事情：

在内存中创建一个新的空对象；
让 this 指向这个新的对象；
执行构造函数里面的代码，给这个新对象添加属性和方法；
返回这个新对象（所以构造函数里面不需要return）；

（4）遍历对象属性

for…in 语句用于对数组或者对象的属性进行循环操作。

语法演示如下：

for (变量 in 对象名字) { 
    // 在此执行代码
}

语法中的变量是自定义的，它需要符合命名规范，通常我们会将这个变量写为 k 或者 key。

for (var k in obj) { 
    console.log(k);      // 这里的 k 是属性名
    console.log(obj[k]); // 这里的 obj[k] 是属性值
}

四、总结

😝 由于内容较多，所以我决定分开写啦，我会坚持一直更新呢！喜欢的朋友们记得点点赞哦！ 😝

本文为互联网自动采集或经作者授权后发布，本文观点不代表立场，若侵权下架请联系我们删帖处理！文章出自：https://blog.csdn.net/battledao/article/details/123165378

一、JavaScript 作用域

（1）作用域

1.1 作用域概述

1.2 全局作用域

1.3 局部作用域 （函数作用域）

1.4 JS 没有块级作用域

（2）变量的作用域

2.1 变量作用域的分类

2.2 全局变量

2.3 局部变量

2.4 全局变量和局部变量的区别

（3）作用域链

二、JavaScript 预解析

（1）预解析

（2）变量预解析和函数预解析

2.1 变量预解析（变量提升）

2.2 函数预解析（函数提升）

（3）预解析案例

3.1 案例1：结果是几？

3.2 案例2：结果是几？

3.3 案例3：结果是几？

3.4 案例4：结果是几？

三、JavaScript 对象

（1）对象

1.1 什么是对象？

1.2 为什么需要对象

（2）创建对象的三种方式

2.1 利用字面量创建对象

2.1.1 练习：请按照要求写出对象

2.1.2 变量、属性、函数、方法总结

2.2 利用new Object创建对象

2.2.1 练习： 请按照要求写出对象

2.3 利用构造函数创建对象

2.4 构造函数和对象

（3）new关键字

（4）遍历对象属性

四、总结

相关推荐

env: php: No such file or directory Mac 12系统解决办法

检测用户是否为复杂密码并弹窗提示

几个常用的JavaScript小技巧 🔥

2021前端工程师必备网站分享

发表评论

热门文章

标签TAG

# 网络安全

# 安全

# WEB安全

# 渗透测试

# 信息安全

# java

# 安全漏洞

# c语言

# 开发语言

# python

# 网络

# 运维

# linux

# # 1.moonsec-2020-[持续更新]

最近回复

1.3 局部作用域（函数作用域）

2.2.1 练习：请按照要求写出对象