JS学习第六章~

yanghongchen666 · 发表于 2021-2-1 13:38:50

马上注册，结交更多好友，享用更多功能^_^

您需要登录才可以下载或查看，没有账号？立即注册

x

本帖最后由 yanghongchen666 于 2021-2-15 07:20 编辑

Js中的函数简介:

函数:
      -函数也是一个对象
      -函数可以封装功能(代码),在需要的时候可以调用该功能(代码)
      -使用typeof检查一个函数对象时，会返回object

//我们在实际开发中很少使用构造函数来创建一个函数对象
//创建一个函数对象
//可以将要封装的代码以字符串的形式传递给函数
var fun = new Function("console.log('Hello 这是我的第一个函数');");
//封装到函数中的代码不会立即执行
//函数中的代码会在函数调用的时候执行
//[backcolor=Yellow]调用函数语法: 函数对象()[/backcolor]
//当调用函数时，函数中分装的代码会按照顺序执行
fun();
fun.hello = "你好";
console.log(fun.hello);

复制代码

函数声明创建函数:
      语法:
         function 函数名(形参1，形参2，形参3.....){
            语句.....
         }
      注:改function括号里面的形参不是必须要写的，是可选

例子:
function fun2(){
console.log("这是我第二个函数");
alert("函数太好用了!!!");
}
//这里如果想输出fun2函数中的内容我们需要调用函数fun2();
fun2();

复制代码

函数表达式:
      语法:
         var 函数名 = function(形参1,形参2,形参3.....){
            语句....
         }

例子:
//该函数也称之为[backcolor=Yellow][b]匿名函数[/b][/backcolor]，因为这个函数并没用名字，只是函数赋值给了fun3
var fun3 = function(){
console.log("我是匿名函数")
}

复制代码

-------------------------------------------------------------
JS函数的参数

上面相信大家已经了解了函数是个什么东西，也明白了大概要怎么写这时候可能就有聪明的小宝贝就要问了:
那个那个既然函数能传形参，那么形参是干嘛的鸭~ 既然你大发慈悲的问了，我就在这里给你解答啦!
废话不多说直接上例子!

例子1:
/*
定义一个用来求和的两个数和的函数
可以在函数的()中来指定一个或多个形参(形式参数)
多个形参之间使用,隔开，声明形参就相当于在函数内部声明了对应的变量
但是并不赋值
*/
function sum(num1,num2){
console.log("result = " num1 + num2)
}
/*
在调用函数时，可以在[backcolor=Yellow]()中指定实参(实际参数)[/backcolor]
实参将会赋值给函数中[backcolor=Yellow]对应的形参[/backcolor]
*/
sum(2,3); //输出结果为5
//看到这里可能有聪明的小宝贝就要问了，那如果我不传数字而是其他值会怎么样呢?(请看下面的解释)
/*
这里我们形参2传入了hello,明显是个字符串类型所以这说明了
调用函数时解析器不会检查实参的类型
所以要注意，是否可能会接受非法的参数，如果有的话则需要对参数进行类型的检查
函数的[backcolor=Yellow]实参可以使用任意数据类型[/backcolor]
*/
sum(123,"hello");
//我们来如果我们的传入多余的实参会怎么
/*
调用函数时，解析器也不会检查实参的数量
多余的实参，不会被赋值
[backcolor=Yellow]如果实参的数量少于形参的数量，则没有对应实参的形参将是undefined[/backcolor]
*/
sum(123,true,"你好");
//这里除了前两个123,456以为后面的值都为undefined
sum(123,456,"Hello",true,null)

复制代码

这里补充一点，实参的值可以是任何的值，也可以是一个对象或者是一个函数

例子:
/*
创建一个函数，可以在控制台中输出一个人的信息
可以输出人的name age gender address
实参可以使任意的数据类型，也可以是一个对象
当我们的参数过多时，可以将参数封装到一个对象中，
然后我们通过对象传递
*/
function sayHello(o){
console.log("我是"+o.name+"今年我"+o.age+"岁了"+"我是一个"+o.gender+"人"+"我住在"+o.address);
}
//sayHello("孙悟空",18,"猴","花果山")
//创建对象
var obj = {
name : "孙悟空",
age : 18,
gender : "男",
address : "花果山"
}
//sayHello(info)
/*
实参可以是一个对象，也可以是一个函数
*/
function fun(a){
console.log("a = "+a);
/*这里的a是sayHello函数，可以理解为在这里调用了
sayHello(obj) 因为现在的a是sayHello
*/
a(obj)
}
fun(sayHello);
fun(function(){alert("hello")});
fun(area(10));
/*
area()
-调用函数
-相当于使用的是函数的返回值
area
-函数对象
-相当于直接使用函数对象
不加括号传的是对象
加括号传的是函数返回值
*/

复制代码

----------------------------------------------------------
Js函数的返回值

/*
         创建一个函数,用来计算三个数的和

         可以使用return 来设置函数的返回值
         语法:
            return 值/变量

         return后的值将会作为函数的执行结果返回,
            可以定义一个变量，来接受该结果

         在函数中return后的语句都不会执行

         如果return语句后不跟任何值，就相当于返回一个undefined
            如果函数中不写return，也会返回undefined

         return后可以跟任意类型的值
      */

例子:
function sum(num1,num2,num3){
var number = num1 + num2 + num3;
return number;
//因为在alert之前已经return所以这里alert不会生效
alert("hello")
}
//这里我们调用sum函数，并传入实参1,10,15
sum(1,10,15);

复制代码

函数的返回值也是可以返回任何数据类型的

例子:
//返回值为对象
function fun(){
//返回对象
return {name:"孙悟空"};
}
fun();//调用函数fun
//返回值是函数
function fun2(){
//在函数里创建一个函数
function fun3(){
alert("我是内部函数fun3~~");
}
//将fun3作为fun2函数的返回值返回
return fun4;
}
a = fun3();
//console.log(a);
a();
fun3()();//这种写法跟上面是一样的，这不过这里没有创建变量而是直接调用

复制代码

--------------------------------------------
Js中的匿名函数

例子:
//这里在function外面用小括号包住，来声明它是一个整体，不用括号包住会报错
/*
立即执行函数
函数定义完，立即被调用，这种函数叫做立即执行函数
立即执行函数往往只会执行一次
*/
(function(){
alert("我是一个匿名函数");
}) (); //直接使用();来调用函数
(function(a,b){
console.log("a = "+a);
console.log("b = "+b);
}) (123,456);

复制代码

------------------------------------------
Js中的方法

方法其实跟函数没有任何区别，两者之间只是名称上的区别
函数也可以成为对象的属性，如果一个函数作为一个对象的属性保存，
那么我们称这个函数是这个对象的方法调用这个函数就说调用对象的方法(method)

例子:
//创建一个对象
var obj = new Object();
obj.name = "Tom";
obj.sayNmae = function(){
alert(obj.name)
}
//调用方法
obj.sayNmae()
//这里我们也可以理解为，在对象中保存的函数，当我们调用时就称之为方法

复制代码

---------------------------------------
JS中枚举对象中的方法

个人感觉Js中枚举方法的用法跟python for语句的结构基本一样，
      废话不多说直接上代码!

这里需要介绍一个新的结构
for...in语句
语法:
   for(var 变量 in 对象){
         语句....
      }

for...in语句: 对象中有几个属性，循环体就会执行几次
      每次执行时，会将对象中的一个属性名赋值给变量

例子:
var obj = {
name:"tim",
age:18,
gender:"男",
address:"洛杉矶"
};
for(var n in obj){
console.log("属性名: " + n);
//这里输出属性值的时候，切记要有中括号，不然obj.n的意思是在obj对象中搜索名为n的属性名
console.log("属性值: " + obj.[n];
}

复制代码

-----------------------------------------
Js中的作用域

变量的声明提前
      -使用var关键字声明的变量，会在所有的代码执行之前被声明(但是不会赋值)，
         但是如果声明变量时不使用var关键字，则变量不会提前声明

函数的声明提前
      -使用函数申明形式创建的函数function 函数名(){}
         它会在所有的代码执行之前就被创建,所以我们可以在函数声明前来调用函数
      -使用函数表达式创建的函数，不会被声明提前，所以不能再声明前调用

例子：
var a ;
console.log("a = " + a);
a = 123;
//fun();
//函数声明，会被提前创建
function fun(){
console.log("我是一个fun函数");
}
//函数表达式，不会被提前创建
var fun2 = function(){
console.log("我是一个fun2函数");
}
//fun2();
fun2();

复制代码

全局作用域:
      -作用域指一个变量的作用的范围
         -在JS中一共有两种作用域:
            1.全局作用域
                  -直接编写在script标签中的JS代码，都在全局作用域
                  -全局作用域在页面打开时创建，在页面关闭时销毁
                  -在全局作用域中有一个全局对象windown,
                        它代表的是一个浏览器的窗口，它由我们浏览器创建我们可以直接使用
                  -在全局作用域中，创建的变量都会作为window对象的属性保存
                        创建的函数都会作为window对象的方法保存
                  -全局作用域中的变量都是全局变量,在页面的任意的部分都可以访问的到

例子:
var a= 10;
var b = 20;
var c = "hello";
console.log(window.a);
function fun(){
console.log("我是fun函数");
}
//window.fun();
window.alert("hello");
[size=3] 函数作用域:[/size]
函数作用域
-调用函数时创建函数作用域，函数执行完毕以后，函数作用域销毁
-每调用一次函数就会创建一个新的函数作用于，他们之间是互相独立的
-在函数作用域中，可以访问到全局作用域的变量,
在全局作用域中无法访问到函数作用于的变量
-当在函数作用于中才做一个变量时，它会在自身作用域中寻找，如果有就直接使用
如果没有则向上一级作用域中寻找,直到找到全局作用域，
如果全局作用域中依然没有找到，则会报错ReferenceError
-[backcolor=Yellow]在函数中要访问全局的变量则可以使用window对象 [/backcolor]
举一些例子:
//创建一个变量
var a = 10;
function fun(){
var a = "我是fun函数中的变量a";
var b = 20;
console.log("a = " + a);
function fun2(){
//这里加上window，访问的是全局作用域中的a，如果不加window则访问就近的a
console.log("a = " + window.a);
}
fun2();
}
fun();//a输出为我是函数中的变量a
console.log("a = " + a);//a输出为10
/*
在函数作用域中也有声明提前的特性，
使用var关键字声明的变量，会在函数中所有的代码执行之前被声明
函数声明也会在函数中所有的代码执行之前执行
*/
function fun3(){
fun4();
console.log(a);
var a = 35;
function fun4(){
alert("我是fun4");
}
}
fun3();
var c = 33;
/*
在函数中，不使用var声明的变量都会成为全局变量
*/
function fun5(){
console.log("c = " + c);
c = 10;
//d没有使用var关键字，则会设置为全局变量
d = 100;
}
fun5();
//在全局输出C
console.log("d = " +d);
var e = 23;
/*
定义形参就相当于在函数作用域中声明了变量
*/
function fun6(e){
alert(e);
}
fun6();

复制代码

---------------------------------------

写在最后....由于这一章东西比较多，也不太好自己出练习题，希望大家能消化一下这次的东西，特别是函数跟作用域要搞明白
可以自己创建一些函数来玩一玩...基础语法估计最多还有两三章左右啦~这是继python一来第二门语言，虽然python学的也一般,

小甲鱼的铁粉 · 发表于 2021-2-1 13:43:41

加油

liuzhengyuan · 发表于 2021-2-1 13:44:16

加油

玖玥 · 发表于 2021-2-4 09:42:51

hhhh

hornwong · 发表于 2021-2-4 11:51:52

感谢分享！

还不够好 · 发表于 2021-2-4 17:12:40

学习

yanghongchen666 · 发表于 2021-2-7 10:44:01

为啥我看不见我写的笔记惹????大家能看见嘛~之前没更新的时候好好的，更新完就消失了?!

yanghongchen666 · 发表于 2021-2-7 10:44:53

甚至直接在我的学习之路这个主题板块这个帖子直接消失不见了?!

kkl44stupid · 发表于 2021-2-8 19:45:02

Yoromi · 发表于 2021-2-9 09:19:02

虽然看不懂但还是支持一下

攸鱼 · 发表于 2021-2-9 11:56:38

账号		自动登录	找回密码
密码			立即注册

[学习笔记] JS学习第六章~

马上注册，结交更多好友，享用更多功能^_^

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

回帖奖励 +5 鱼币

浏览过的版块