JS-函数作用域

最新推荐文章于 2024-07-09 19:28:48 发布

牛马小先锋

最新推荐文章于 2024-07-09 19:28:48 发布

阅读量167

点赞数

文章标签： javascript vue.js 前端

本文链接：https://blog.csdn.net/weixin_45838066/article/details/123320125

版权

前言: 完成以下练习

编写代码:计算 1-100 相加并输出结果, 计算 1-200 相加,并输出结果, 计算 1-300 相加,并输出结果

没学函数前, 我们可能会写三遍 for 循环, 有了函数之后只需要写一遍即可.

(一)函数的声明函数的调用#

函数就是封装(打包)多行函数, 元素函数就是运行函数封装的多行代码

函数声明和调用
对象中的函数(方法), alert 就是 window 对象的一个方法
函数和变量声明提前
函数表达式

(1)函数的声明和调用#

<script>
// 需求1: 写一个函数,实现1到100相加

function sum() {
    var num = 0;
    for (var i=1;i<=100;i++) {
        num += i;
    }
    console.log(num);
}

// 调用函数(使用函数) 
sum();
sum();
sum(); 
</script>

(2) 对象中的方法#

定义在对象中的函数就是对象的方法

var person = {
  name: '张三',
  age: 100,
  say: function() {
   	console.log(`他叫${person.username},他今天${person.age}岁`) 
  }
}
// 调用方法
person.say();

(3) 函数和变量声明提前#

函数是"一等公民", 程序运行的时候, 不管函数定义在什么位置, 都会先执行声明, 所以在任何地方都可以调用函数.
变量也会一开始运行就声明, 等到代码运行到变量声明的那句代码才可以对其进行赋值

<script>
add();
console.log('str的值是',str);

function add() {
    var num1 = 100;
    var num2 = 20;
    var sum = num1 + num2;
    console.log(sum);
}
var str = '123456';
</script>

// 练习练习 1. 写一个函数,实现 50 到 500 相加, 并输出到网页上练习 2. 定义一个关于饮水机的对象,给它添加属性,添加方法(饮水的方法)并调用

(二)函数的调用方式#

(2 )手动调用#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <button onclick="sum();">计算</button><br/>
    <input type="text" onkeydown="sum();">

    <script>
        function sum() {
            var count = 0;
            for (var i=0;i<=100;i++) {
                count += i;
            }
            console.log(count);
        }
        // 手动调用
        sum();
    </script>
</body>
</html>

(2) 绑定一个事件来调用#

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3>实现1-xxx相加的计算</h3>
    <input class="inp" type="text" value="">
    <button onclick="calculate();">计算</button>
    <p>相加的结果是: <span id="total">0</span></p>

    <script>
        function calculate() {
           // 获取输入的值
           var $inp = document.querySelector('.inp');
           var num = $inp.value;
           
            // 累加
            var sum = 0;
            for (var i=0;i<=num;i++) {
                sum += i;
            }
            // 显示到id为total的元素上
            document.querySelector('#total').innerHTML = sum;
        }
    </script>
</body>
</html>

// 练习练习 3. 需求: 从页面上输入两个加数,绑定事件,加上两个加数相加的结果,并显示在页面上

(三)函数传递参数#

3.1 调用时传入的数据,跟函数的参数一一对应 3.2 基本数据类型和引用数据类型参数的区别

<script>

// num1是第一个加数
// num2是第二个加数
function add(num1,num2) {
    console.log('num1=',num1);
    console.log('num2=',num2);
   var sum = num1 + num2;
   console.log('两个数相加的结果是',sum);
}

add(15,25);

// 1到100累加
function cal(max) {
    var sum = 0;
    for(var i=1;i<=max;i++) {
        sum += i;
    }
    console.log('累加的结果是',sum);
}

cal(10);
var num = 30;
cal(num);

</script>

(四)函数返回值#

4.1 使用 return 返回计算的结果 4.2 没写 return,默认返回 undefined

<script>
// 需求: 计算两个数相加的结果,并返回给调用者
function add(num1, num2) {
    var sum = num1 + num2;

    return sum;
}
var sum = add(10,10);



// 把两个数相加的结果显示在页面上
function add2(num1, num2) {
    var sum = num1 + num2;
    // 没有return时,默认返回undefined
    document.write(sum);
}

var sum2 = add2(20,30);
console.log(sum2);

</script>

// 练习练习 4. 需求: 声明一个函数,实现 1 到任意数字累加的结果

(五)作用域#

5.1 什么是作用域 5.2 window,全局作用域,在全局作用域下声明的变量是全局变量 5.3 局部作用域和局部变量 5.4 作用域访问规则

(1)函数内部可以访问函数外部的变量
(2)函数外部不可以访问函数内部的变量
(3)多个作用域用作用域链进行连接
(4)没有块级作用域(区分作用域以函数作为区分条件)

(1) 函数作用域#

<script>
    function test() {
        var a = 100;
    }

    console.log(a);
</script>

(2) 作用域和变量#

全局作用域和全局变量

局部作用域和局部变量

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="demo5-2.js"></script>
    <script>
        // 全局对象 window
        console.log(window);

        console.log(2222);
        window.console.log(2222);
        // 全局变量
        var username = 'laohu';
        console.log(username);
        console.log(window.username);
    </script>
</head>

<body>
</body>

</html>

(3) 没有块级作用域#

区分全局和局部的标准是函数

<script>
for (var i=0;i<10;i++) {
    console.log('发呆');
}
console.log(i);
</script>

(4) 作用域规则#

<script>

var a = 100;
function cal() {
    var b = 200;
    function add() {
        var b = 300;
        var c = 300;
        var sum = a + b + c;
        return sum;
    }

    var result = add();
    document.write(result);
}

cal();
</script>

作业:#

使用函数的方式重写电影列表页面, 同时加上轮播图
编写一个计算器(eval 用来计算)

牛马小先锋

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JS-函数作用域

前言: 完成以下练习编写代码:计算 1-100 相加并输出结果, 计算 1-200 相加,并输出结果, 计算 1-300 相加,并输出结果没学函数前, 我们可能会写三遍 for 循环, 有了函数之后只需要写一遍即可.(一)函数的声明函数的调用#函数就是封装(打包)多行函数, 元素函数就是运行函数封装的多行代码函数声明和调用对象中的函数(方法), alert 就是 window 对象的一个方法函数和变量声明提前函数表达式(1)函数的声明和调用#<script&gt
复制链接

扫一扫