javascript函数以及对象

前言

这次的学习是关于函数和对象的内容,函数应该都不陌生,在上学中的时候数学就已经在接触了,不过虽然都是函数,但是有不同,一个是公式,一个是代码,那它可以带来什么的可能性呢,那就带你看看它的魅力吧!对象是什么?万物皆对象,生活中的对象是生动形象的,当然这个对象也是

不错的。

一、JS的函数以及应用

1.函数的概念


在JS里面,可能会定义非常多的相同代码或者功能相似的代码,这些代码可能需要大量重复使用。
虽然for循环语句也能实现一些简单的重复操作,但是比较具有局限性,此时我们就可以使用JS中的函数。

2.函数的使用


函数在使用时分为两步:声明函数和调用函数。

声明函数

  function 函数名(){};
调用函数

  • 函数名(); // 通过调用函数名来执行函数体代码
  • 调用的时候千万不要忘记添加小括号
  • 口诀:函数不调用,自己不执行。
  • 注意:声明函数本身并不会执行代码。只有调用函数时才会执行函数体代码。

3.函数的参数


3.1形参和实参
在声明函数时,可以在函数名称后面的小括号中添加一些参数,这些参数被称为形参,而在调用该函数时,同样也需要传递相应的参数,这些参数被称为实参。
参数       说明
形参    形式上的参数函数定义的时候传递的参数当前并不知道是什么
实参     实际上的参数函数调用的时候传递的参数实参是传递给形参的

参数的作用:在函数内部某些值不能固定,我们可以通过参数在调用函数时传递不同的值进去。

3.2函数形参和实参个数不匹配问题
参数个数                              说明
实参个等于形参个数         输出正确结果
实参个数多于形参个数    只取到形参的个数
实参个数小于形参个数       多的形参定为undefined,结果为NaN

3.3小结
●函数可以带参数也可以不带参数
●声明函数的时候,函数名括号里面的是形参,形参的默认值为undefined
●调用函数的时候,函数名括号里面的是实参
●多个参数中间用逗号分隔
●形参的个数可以和实参个数不匹配,但是结果不可预计,我们尽量要四配

4、函数的返回值


4.1 return语句
有的时候,我们会希望函数将值返回给调用者,此时通过使用return语句就可以实现。

(1)我们函数只是实现某种功能,最终的结果需要返回给函数的调用者,函数名()通过return 实现的
(2)只要函数遇到return就把后面的结果返回给函数的调用者函数名() = return后面的结果

4.2 return终止函数
return语句之后的代码不被执行。

4.3函数没有return返回undefined
函数都是有返回值的
1.如果有return 则返回return后面的值
2.如果没有return 则返回undefined

4.4 break ,continue ,return的区别
, break :结束当前的循环体(如for. while )
●continue : 跳出本次循环,继续执行下次循环(如for. while )
●return :不仅可以退出循环,还能够返回return语句中的值,同时还可以结束当前的函数体内的代码

5、奇数平均值的案例

 <title>奇数平均值</title>
    <script>
        var arr = [1, 2, 3, 4, 5, 6, 7];
        var average = [];
        var sum = 0;
        var aa = 0;

        function getjishu() {
            for (var i = 0; i < arr.length; i++) {
                if (arr[i] % 2 != 0) {
                    sum += arr[i];
                    average[average.length] = arr[i];
                }

            }
            aa = sum / average.length;
            return aa;

        }
        console.log(getjishu());
    </script>

二、 javascript作用域及预解析

1. arguments的使用


当我们不确定有多少个参数传递的时候,可以用arguments来获取。在JavaScript中, arguments实际上它是当前函数的一个内置对象。所有函数都内置了一个arguments对象, arguments对象中存储了传递的所有实参。

arguments展示形式是一个伪数组,因此可以进行遍历。伪数组具有以下特点:

  • 具有length属性
  • 按索引方式储存数据
  • 不具有数组的push, pop等方法

只有函数才有arguments对象而 且是每个函数都内置好了这个arguments

函数可以调用另外一个函数
因为每个函数都是独立的代码块,用于完成特殊任务,因此经常会用到函数相互调用的情况。

2、函数的2种声明方式


 1.利用函数关键字自定义函数(命名函数)
function fn() {
}
fn();
 2.函数表达式(匿名函数)
var变量名= funttion() {};
var fun = function(aru) {
console.1og(”我是函数表达式' );
console. log(aru);
fun( 'pink老师);
(1) fun是变量名不是函数名
 (2)函数表达式声明方式跟声明变量差不多,只不过变量里面存的是值,而函数表达式里面存的是函数
 (3)函数表达式也可以进行传递参数

 
3、作用域概述


作用域的使用提高了程序逻辑的局部性,增强了程序的可靠性.减少了名字冲突。

  1.JavaScript作用域 :就是代码名字 (变量)在某个范围内起作用和效果目的是为了提高程序的可靠性,重要的是减少命名冲突。
 2. js的作用域 :全局作用域    局部作用域
3.全局作用域: 整个script标签或者是一个单的js文件
var num = 10;
console.1og(num);
4.局部作用域(函数作用域)在函数内部就是局部作用域这个代码的名字只在函数内部起效果和作用
function fn() {
//局部作用域
varnum=20;
console.1og(num);
}
fn();

4、作用域链

内部函数访问外部函数的变量,采取的是链式查找的方式来决定取那个值这种结构我们称为作
用域链   就近原则,一层一层的往上查找
 

var num = 10;
function fn() { //外部函数
var num = 20: 
function fun() { //内部函数
console.1og(num); 
}
fun();
}
fn();

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

5、预解析

1.我们js引擎运行js分为两步:
预解析      代码执行 
(1). 预解析js引擎会把js里面所有的var
还有function 提升到当前 作用域的最前面
 (2).代码执行 按照代码书写的顺序从上往下执行
 2.预解析分为变量预解析(变量提升) 和函数预解析(函数提升)
(1)变量提升就是把所有的变量声明提升到当前的作用域最前面    不提升赋值操作
(2)函数提升就是把所有的函数声明提升到当前作用域的最前面  不调用函数

6、判断二月份的天数的案例

  <title>判断二月份的天数</title>
    <script>
        function getrui(year) {
            var flag = false;
            if (year % 4 == 0 && year % 100 != 0 || year % 400 == 0) {
                flag = true;
            }
            return flag;
        }

        function backDay() {
            var year = prompt('请输入年份:');
            if (getrui(year)) {
                alert('当前的年份是闰年2月份有29天');
            } else {
                alert('当前的年份是平年2月份有28天');
            }
        }
        backDay();
    </script>

三、 javascript对象

1.什么是对象?

在JavaScript中, 对象是一组无序的相关属性和方法的集合,所有的事物都是对象,例如字符串、数值、数组、函数等。
对象是由属性和方法组成的。
●属性:事物的特征。在对象中用属性来表示(常用名词)
●方法:事物的行为,在对象中用方法来表示(常用动词)
js中的对象表达结构更加清晰、强大,比较完整的

2.创建对象的三种方式


在JavaScript中现阶段我们可以采用三种方式创建对象 (object) :
●利用字面量创建对象
●利用new Object创建对象
●利用构造函数创建对象

变量、属性、函数、方法总结
变量和属性的相同的他们都是用来存储数据的
函数和方法的相同点都是实现某种功能做某件事

●变量:单独声明赋值,单独存在
●属性:对象里面的变量称为属性,不需要声明,用来描述该对象的特征
●函数:单独存在的,通过“函数名0"的方式就可以调用
●方法:对象里面的函数称为方法,方法不需要声明,使用“对象方法名0"的方式就可以调用,方法用来描述该对象的行为和功能。

2.1 利用字面量创建对象


对象字面量:就是花括号{}里面包含了表达这个具体事物(对象)的属性和方法。
 1.利用对象字面量创建对象{}
 

 var obj={};//创建了个空的对象
var obj={
uname: '张三疯,
age: 18,
sex: 男,
sayHi: function() {
console.1og('hi~" );
}
}

  (1) 里面的属性或者方法我们采取键值对的形式 键属性名:值属性值
 (2) 多个属性或者方法中间用逗号隔开的
 (3)方法冒号后面跟的是个匿名函数
 

使用对象
 (1). 调用对象的属性我们采取对象名.属性名.我们理解为的
console . log(obj .uname);
  (2). 调用属性还有一 种方法对象名['属性名']
console .1og(obj[ 'age ']); 必须加引号
 (3)调用对象的方法sayHi
对象名.方法名()千万别忘记添加小括号
obj. sayHi();|
I
利用字面量创建对象案例

  <title>对象字面量建对象</title>
    <script>
        var obj = {
            name: '可可',
            type: '阿拉斯加犬',
            age: '5岁',
            color: '棕红色',
            skill: function() {
                console.log('技能:汪汪汪,演电影');
            }
        }
        console.log(obj.name);
        console.log(obj.type);
        console.log(obj.age);
        console.log(obj.color);
        obj.skill();
    </script>

2.2 利用new object创建对象
 

var obj = new Object(); //创建了-个空的对象
obj.uname = '张三疯;
obj.age = 18;
obj.sex =男;
obj.sayHi = function() {
console.1og('hi~' );
}


 (1) 我们是利用等号=赋值的方法添加对象的属性和方法
  (2) 每个属性和方法之间用分号结束
console.1og(obj .uname);
console .logtobj['sex']);
obj . sayHi();
 

 <title>new object对象</title>
    <script>
        var obj = new Object();
        obj.name = '鸣人';
        obj.sex = '男';
        obj.age = '19岁';
        obj.skill = function() {
            console.log('分身术');
        }
        console.log(obj.name);
        console.log(obj.sex);
        console.log(obj.age);
        obj.skill();
    </script>

2.3 利用构造函数创建对象


 构造函数的语法格式
  function 构造函数名() {
this.属性=值;
this.方法= function() {}
  }
 var 对象名= new构造函数名(实参);  调用对象
构造函数不需要return就可以返回结构

 需要使用构造函数就是因我们前面两种创建对象的方式次只能创建一个对 象

  •  因为我们一次创建一个对象, 里面很多的属性和方法是大量相同的我们只能复制
  •  因此我们可以利用函数的方法重复这些相同的代码我们就把这个函数称为构造函数
  •  又因为这个函数不一样,里面封装的不是普通代码,而是对象
  •  构造函数就是把我们对象里面一些相同的属性和方法抽象出来封装到函数里面

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

3.遍历对象属性


for..in语句用于对数组或者对象的属性进行循环操作。
for (var k in obj) {
console.log(k); // k变量输出得到的是属性名
console.1og(obj[k]); // obj[k]得到是属性值

 <title>构造函数建对象</title>
    <script>
        function Zero(uname, type, blood, attack) {
            this.uname = uname;
            this.type = type;
            this.blood = blood;
            this.attack = attack;

        }
        var lianpo = new Zero('廉颇', '力量型', '500血量', '近战');
        console.log(lianpo.uname);
        console.log(lianpo.type);
        console.log(lianpo.blood);
        console.log(lianpo.attack);
        var houyi = new Zero('后羿', '射手型', '100血量', '远战');
        console.log(houyi.uname);
        console.log(houyi.type);
        console.log(houyi.blood);
        console.log(houyi.attack);
    </script>

4、小结


对象可以让代码结构更清晰
对象复杂数据类型object.
本质:对象就是一组无序的相关属性和方法的集合。
构造函数泛指某一大类 。比如苹果。不管是红色苹果还是绿色苹果。都统称为苹果。
对象实例特指一个事物,比如这个苹果、正在给你们讲课的pink老师等。
f.in语句用于对对象的属性进行循环操作。
 

总结

以上是函数和对象一些基础知识和一些简单的案例介绍,学习到了这个函数以及对象的知识,了解到其中的东西,会感觉到其实函数和对象还可以这样的解说和这样的表达出来,不仅提升了见识也提高了之前没有学懂的知识点,忽然就恍然大悟,也是美丽的意外!

猜你喜欢

转载自blog.csdn.net/txq231254/article/details/123984913