JavaScript入门到精通（四）连载(1)-CSDN博客

本文链接：https://blog.csdn.net/2401_84436095/article/details/138285079

本文详细解释了JavaScript的作用域规则，区分了全局变量和局部变量，介绍了对象的定义、创建方法和遍历，以及如何使用构造函数进行对象实例化。同时涵盖了Math对象和生成随机数的用法，以实际编程案例展示了这些概念的应用。

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

案例4

在用案例巩固一下~~ ，加深自己是意识。请看下面代码


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;

    a = b = c = 9;

    // var a = b = c = 9;   相当于 var a = 9; b = 9; c = 9; b和c 直接赋值 没有var声明 当全局变量看

    // 集体声明 var a =9,b = 9,c = 9;

    console.log(a);

    console.log(b);

    console.log(c);

}

f1();

console.log(c);

console.log(b);

console.log(a); //属于局部变量， 报错

调用了f1();函数，又console.log()三个数，本来能输出六个数字，但因为最后一个 console.log(a);中的a属于局部变量，访问不了所以报错信息里面提示 a is not defined 原因找到。

2.JS作用域

2.1 定义

JavaScript作用域：就是代码名字(变量) 在某个范围内起作用和效果目的：提高程序的可靠性以及减少命名冲突。

2.2 作用域分类

全局作用域：整个script标签或者是一个单独的js文件

局部作用域：(函数作用域)在函数内部就是局部作用域只在函数内起作用和效果。

2.3 变量作用域(根据作用域的不同将变量分为全局变量和局部变量)

全局变量：在全局作用域下的变量，在全局下都可以使用; 如果在函数内部，没有声明直接赋值的变量也属于全局变量。

局部变量：在函数作用域下的变量，函数的形参也可以看做是局部变量

从执行效率上看两者的区别：

全局变量只有在浏览器关闭的时候才会销毁，比较占内存资源；局部变量当我们程序执行完毕就会销毁，比较节约内存资源。

2.4 作用域链

内部函数访问外部函数的变量，采用的是链式查找的方式决定哪个值这种结构我们称为作用域链使用的是就近原则。


function fun1 () {//外部函数

    var num = 1;

    function fun2 () {//内部函数

        console.log(num);

    }

    fun2();

}

var num = 2;

fun1();

显而易见，由就近原则可知，结果为 1，接下来再看一段代码~~~


var a = 1;

function fn1 () {

    var a = 2; 

    var b = '22'; 

    fn2();

    function fn2 () {

        var a = 3;

        fn3();

        function fn3 () {

            var a = 4;

            console.log(a); // a的值?

            console.log(b); // b的值?

        }

    }

}

fn1();

采用就近原则很快得到答案，看看和你猜的一不一样~

3. 对象

谈到对象，就要涉及了许多方面的内容了，知识量有点大，现在平静一下~，耐心的看下去。

3.1 定义

在JavaScript中，对象是一组无序的相关属性和方法的集合，所有的事物都是对象，例如字符串、数值、数组、函数等。简而言之：对象是由属性和方法组成。目的：使JS中的对象表达结构更清晰，更强大。

属性：事物的特征，在对象中用属性来表示

方法：事物的行为，在对象中用方法来表示

3.2 创建对象的三种方式

3.2.1 利用字面量创建对象

注意点：1.属性和方法采取键值对的方式键属性名;值属性值 2.多个属性和方法中间逗号隔开 3.方法冒号跟的是一个匿名函数


// var obj = {}; 创建了一个空的对象

var obj = {

    name: '张小凡', //属性区

    age: '18',

    sex: '男',

    say: function () {

        console.log('hello world');

    }

}

// 调用对象属性的方法1：采取对象名.属性名

console.log(obj.name);

// 调用对象属性的方法2：采取对象名['属性名']

console.log(obj['age']);

// 调用对象的方法 say 对象名.方法名()

obj.say();

3.2.2 利用 new Object 创建对象

注意点：采用等号赋值方法添加对象的属性和方法、每个属性和方法之间用分号结束


var obj = new Object();

obj.name = '张小凡'; //追加属性

obj.age = 18;

obj.sex = '男';

obj.say = function () { //追加方法

    console.log('hello world');

}

3.2.3 构造函数创建对象

注意点：1.构造函数泛指某一大类类似于 Java 语言里卖弄的类 2.特点：把对象里面一些相同的属性和方法抽取出来封装(封装的不是普通代码而是对象)到函数里面，这样避免了很多的属性和方法的大量重复


//构造函数的语法格式

//this总是指向函数的直接调用者(而非间接调用者); 如果有new关键字，this指向new出来的那个对象

function 构造函数名 () {

    this.属性 = 值; 

    this.方法 = function () { }

}

new 构造函数名();

案例：


function Family (name,age,sex) {

    this.name = name;

    this.age = age;

    this.sex = sex;

    this.doing = function(result){

        console.log(result);

    }

}

var boy = new Family('张小凡',18,'男');

console.log(boy.name);

console.log(boy['sex']);

boy.result('我在打游戏~')



var girl = new Family('张晓樊',18,'女');

console.log(girl.name);

console.log(girl.sex);

girl.result('我在追剧~')

细节：1、构造函数首字母要大写、构造函数不需要return就可以返回结果、调用构造函数必须使用 new、只要使用new 构造函数名就相当于创建了一个对象。2、我们利用构造函数创建对象的过程我们称为对象的实例化。3、new 构造函数可以在内存中创建一个空的对象函数里面的this都会指向这个空对象，执行构造函数里面的代码给这个空对象添加对象和方法并返回这个新对象

3.3 遍历对象

简言之：for in 遍历我们的对象。


// 格式

for(变量 in 对象){



}

案例：


// 案例

var obj = {

    name:'张小凡',

    age:18,

    sex:'男'

}

for(var key in obj){ //for in 里面的变量我们喜欢写 k 或者 key

    console.log(key); //i 变量输出 得到的是 属性名

    console.log(obj[key]); //obj[i]得到的是属性值

}

3.4 内置对象

定义：指JS语言自带的一些对象，这些对象供开发者使用，并提供了一些常见的或是最基本而必要的功能。内置对象的最大优点就是帮助我们快速开发 JS提供多个内置对象：Math、Date等

3.4.1 Math是数学对象不是一个构造函数，所以我们不需要new来调用而是直接使用里面的属性和方法即可。


console.log(Math.PI); //一个属性 圆周率

console.log(Math.max(1,45,42));  //45

console.log(Math.max(1,'张小凡')); //NaN

console.log(Math.max()); // -Infinity 负的无穷大

利用对象封装自己的数学对象


var myMath = {

    PI:3.141592653,

    max:function(){

        var max = arguments[0];

        for(var i = 1;i < arguments.length;i++){

            if(arguments[i]>max){

                max = arguments[i];

            }

        }

        return max;

    },

    min:function(){

        var min = arguments[0];

        for(var i = 1;i < arguments.length;i++){

            if(arguments[i]<min){

                min = arguments[i];

            }

        }

        return min;

    },

}

console.log(myMath.PI);

console.log(myMath.max(1,5,8));

console.log(myMath.min(1,5,8));

3.4.2 绝对值方法


console.log(Math.abs(1)); //1

console.log(Math.abs(-1)); //1

console.log(Math.abs('1')); // 隐式转换 会把字符串型 -1 转换为数字型 1

console.log(Math.abs('张小凡')); //NaN

3.4.3 三个取整方法


// (1) Math.floor()  地板 向下取整 往最小取值

console.log(Math.floor(1.1)); // 1

console.log(Math.floor(1.9)); // 1

// (1) Math.ceil()   天花板 向上取整 往最大取值

console.log(Math.ceil(1.1)); // 2

console.log(Math.ceil(1.9)); // 2

// (1) Math.round()  四舍五入 .5特殊往大去取

console.log(Math.floor(1.1)); // 1

console.log(Math.floor(1.5)); // 2

console.log(Math.round(-1.5)); // -1

3.4.4 Math对象随机数方法 random() 返回一个随机的小数 [0,1) 范围左闭右开这个方法里面不跟参数。


console.log(Math.random());

需求：需要得到俩个数之间的随机整数并且包含这2个整数


// Math.floor(Math.random() * (max - min + 1)) + min;

function getRandom(min,max){

    //向下取整,因为要包括最大数,所以要加1

    return Math.floor(Math.random() * (max - min + 1)) + min; 

}

console.log(getRandom(1,10)); //以1~10为例

班级随机点名 (人名随机)


function getRandom(min,max){

    //向下取整,因为要包括最大数,所以要加1

    return Math.floor(Math.random() * (max - min + 1)) + min; 

}

var arr = ['张小凡','张晓樊','张二凡','张三凡','张四凡'];

console.log(arr[getRandom(0,arr.length-1)]);

猜数字游戏


function getRandom(min,max){

    //向下取整,因为要包括最大数,所以要加1

    return Math.floor(Math.random() * (max - min + 1)) + min; 

}

var random = getRandom(1,100);

while(true){

    var num = prompt('1~100之间请输入您猜的数字:');

    if(num>random){

        alert('猜大了!');

    }else if(num<random){

        alert('猜小了!');

    }else{

        alert('恭喜您!猜对了');

        break;//退出死循环
## ❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/a43ed7fb589941278c2aa4b52335068f.webp?x-oss-process=image/format,png)
> 







om(0,arr.length-1)]);

猜数字游戏


function getRandom(min,max){

    //向下取整,因为要包括最大数,所以要加1

    return Math.floor(Math.random() * (max - min + 1)) + min; 

}

var random = getRandom(1,100);

while(true){

    var num = prompt('1~100之间请输入您猜的数字:');

    if(num>random){

        alert('猜大了!');

    }else if(num<random){

        alert('猜小了!');

    }else{

        alert('恭喜您!猜对了');

        break;//退出死循环
## ❤️ 谢谢支持

喜欢的话别忘了 关注、点赞哦~。

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

> [外链图片转存中...(img-3FHOa3KO-1714296104966)]
>