JS基础第二课(函数、对象篇)

2023-04-12 11:51:14 浏览数 (1)

一、函数

1、概念

JavaScript中的重要功能,是一段代码的集合,这段代码可以在不同地方调用,从而提高JavaScript代码的复用性

2、函数的使用

(1)基本格式:

function 函数名(){   //定义函数的关键字     函数体 } 函数名();   //一定要调用函数,函数不会自己执行的

(2)定义函数的两种写法

①写法一:

代码语言:javascript复制
<script>
        function get() {
            console.log(1234);
        }
        get()
</script>

②写法二:

代码语言:javascript复制
<script>
        var post = function() {
            console.log(123);
        }
        post()
</script>

(3)函数的返回值:return

3、函数的参数

(1)形参:function 函数名(形参1,形参2...){}

(2)实参:函数名(实参1,实参2...)

代码语言:javascript复制
<script>
        var post = function(a) {//这里的a是形参
            console.log(a);//运行函数结果输出10
        }
        post(10)//这里的10是实参
</script>

(3)两者的个数匹配

①形参个数=实参个数,正常输出

②形参个数<实参个数,从左到右匹配

代码语言:javascript复制
<script>
        var post = function(a) {//这里的a是形参
            console.log(a);//运行函数结果,还是输出10
        }
        post(10,23)//这里的10,23是两个实参
</script>

③形参个数>实参个数,未匹配的形参为undefined

代码语言:javascript复制
<script>
        var post = function(a,b) {//这里的a是形参
            console.log(a);//运行函数结果输出10
            console.log(b);//运行函数结果输出undefined
        }
        post(10)//这里的10是实参
</script>

4、立即执行函数

(1)特点:不需要调用,直接可以自己执行的

(2)作用:创建一个独立的作用域,局部作用域

(3)两种写法:注意括号位置

①两个外层括号()(),第一个()写function函数,第二个()写参数

代码语言:javascript复制
<script>
        (function(a) {
            console.log('执行',a);
        })(10)
</script>

②内外层(()),外层写function函数,内层写参数

代码语言:javascript复制
<script>
        (function(a){
            console.log('执行',a);
        }(20))
</script>

二、作用域

1、概念

一段代码所用到的变量名,不是总是有效的,该变量名的使用范围就是作用域

2、全局作用域

作用于整个script标签、单独的js文件

3、局部作用域

在函数内部作用

代码语言:javascript复制
<script>
        var a = 10
        function test() {
            var b = 20
            console.log(a);//10
            console.log(b);//20
        }
        test()
        console.log(b);//b is not defined
</script>

 上图中的变量b作为函数test的局部变量,只能在函数里面被调用,在函数意外调用时会报错

4、全局变量和局部变量

(1)全局变量:在浏览器关闭才会销毁,比较占内存

(2)局部变量:在程序运行完就销毁,比较节省内存

5、预解析

(1)js解析器:预解析 代码执行

(2)变量提升:js引擎会把代码中所有的var声明提升到作用域的最顶层(函数的顶层),但是赋值不会被提升

代码语言:javascript复制
<script>
        console.log(a);//不报错,只是输出为undefined
        var a=10
        function test() {
            console.log(b);//不报错,只是输出为undefined
            var b = 10
        }
        test()
        console.log(c);//报错c is not defined
</script>

三、对象

1、性质

一组无序的相关属性和方法的集合,所有的事物都是对象(字符串、数组、数值、函数...)

(1)属性:事物的特征

(2)方法:事物的行为

2、作用

可以保存一个值的变量、多个值的数组、一个人的信息

3、创建、获取的三种方法

(1)方法一:利用字面量{}大括号

代码语言:javascript复制
<script>
        var str={//多个属性之间用逗号,隔开
            name:'小明',//属性和方法都是键值对
            age:18,
            sex:'男',
            hoppy:['学习','比赛'],
            say:function(){//方法后面跟的是匿名函数(不设置函数名)
                console.log('写文章啦');
                return '写到不能停'
            }
        }
        console.log(str);
        console.log(str.name);
        console.log(str['age']);
        console.log(str.hoppy);
        str.say();//直接调用方法,输出'写文章'
        console.log(str.say());//打印输出'写文章'、'写个不停'
</script>

 注意:

①name:'张三',//属性和方法都是键值对 键(属性): 值【键与值之间用:】

②多个属性之间用逗号,隔开

③方法后面跟的是匿名函数(不设置函数名)

获取属性值:对象名.属性名、对象名['属性名']

获取方法:对象名.方法名()

(2)方法二:new Object()

代码语言:javascript复制
<script>
        var user = new Object()
        user.name='小红'
        user.age=18
        console.log(user);
</script>

(3)方法三:构造函数:特殊的函数,用来初始化对象

function 构造函数名(参数1,参数2...){     this.属性名 = 值  //this:解析器每次在调用函数的时候都会想函数的内部传递一个隐含的参数     this.方法名 = 值 } var 变量名 = new 构造函数名//对象

注意:

①构造函数名的首字母要大写

②不需要return

③调用时用new

④new关键字执行过程

        a. new在内部创建一个空对象

        b. this指向刚刚创建的空对象

        c. 执行构造函数里面的代码,给这个空对象去添加属性跟方法

        d. 返回对象

代码语言:javascript复制
<script>
        function Person(name1,age1,sex1) {
            this.name = name1
            this.age = age1
            this.sex = sex1
        }
        var p1 = new Person("小红",10,'女')
        console.log(p1);
</script>

 (4)遍历对象:for in

for(item in p1){     // item属性名     console.log(item);     console.log(p1[item]); }

代码语言:javascript复制
<script>
        function Person(name1,age1,sex1) {
            this.name = name1
            this.age = age1
            this.sex = sex1
        }
        var p1 = new Person("小红",10,'女')
        // console.log(p1);
        for(item in p1){
            console.log(item);
            console.log(p1[item]);
        }
</script>

 四、内置对象

1、JavaScript对象分为

自定义对象、内置对象、浏览器对象

2、内置对象

js语言自带的对象,供开发者使用,提供一些常用的,基本的属性和方法,帮助快速开发

3、参考文档

JavaScript 对象实例 | 菜鸟教程

4、字符串对象

需要认识并掌握的部分方法如下:(更多方法小伙伴们可以去参考文档找

0 人点赞