JavaScript进阶知识点——函数和对象详解

我们在上期内容中学习了JavaScript的基本知识点  
    
    
   ，今天让我们更加深入地了解JavaScript

JavaScript函数

JavaScript函数和Java函数是有一部分相似的

     


     


     

，所以学习起来也会相对简单

基本构造

1.直接构造

//function代表函数标志 




 




 




，name为函数名称  

   

   

  ，参数可有可无 function name( 参数 ) { //... return; }

2.赋值构造

//相当于function为匿名函数

     

     

     
，然后匿名函数所得出的值返回给name  




  




  




，因而name可以调用function函数 var name = function( 参数 ){ //... }

注意：

在JavaScript中  


  


  


 ，return是可有可无的 当存在return时
     
     
     ，运行到return
   




   




   




，结束函数 



 



 



，并返回该值 当不存在return时                ，全部运行完毕

    




    




    



，结束函数














，返回underfined值

调用函数方法

当调用函数时                ，直接书写函数名称并加上相对应的参数即可

name(参数)；

注意：

JavaScript可以传入与之不对应的参数 当参数传入较多

     



     



     


，参数进入函数但不代表函数内任意参数














，只是单纯传入参数 当参数传入较少  
    
    
   ，参数进入函数

     


     


     

，后面未传入的参数在函数内部以underfined的形式存在

函数参数argument和rest

argument代表函数中传入进来的所有参数 




 




 




，是一个数组

我们可以在函数中使用：

function name() { //... console.log(arguments[0])  

   

   

  ， console.log(arguments[1])

     

     

     
， //... }

rest代表函数中传入进来的未定义的参数  




  




  




，需要提前在函数中定义

我们同样可以在函数中使用：

var names = function(name,age,...rest){ //... console.log(name); console.log(age); for(var value of rest){ console.log(value) } }

代码调试

我们针对上面所有知识点给出相应代码示例：

//我们演示argument function name() { //... console.log(arguments[0]) } //我们演示rest var names = function(name,age,...rest){ //... console.log(name); console.log(age); for(var value of rest){ console.log(value) } }

下面我们在网页中进行调试：

name(1,2,3,"胡桃",true) 1 names("胡桃",18,"护膜","魔女") 胡桃 18 护膜 魔女

变量的作用域

对于任何含有变量的语言  


  


  


 ，作用域是必定存在的

对于JavaScript
     
     
     ，var所定义的变量实际上也是存在作用域的

函数体内变量作用域解释

假如在函数体中声明
   




   




   




，则在函数体外不可以使用 function test1() { var x=1; x=x+1; } x=x+2;//Uncaught ReferenceError: x is not defined 如果两个函数使用了相同的变量名 



 



 



，只要在函数内部                ，则不产生冲突 function test1() { var x=1; x=x+1; } function test2(){ var x=1; x=x+2; } 内部函数可以使用外部函数的成员

    




    




    



，但外部函数不能使用内部函数的成员 function test3(){ var x=1; //内部函数使用外部函数的成员 function indextest(){ var y=1; x = x+1; console.log(x); } indextest(); //外部函数不可以使用内部函数成员 y=y+1;//Uncaught ReferenceError: y is not defined } 当内部函数变量和外部函数变量重名时














，由内向外查找                ，就近原则 function test4(){ var x=1; function indextest() { var x=2; console.log(x); } indextest();//这里结果为2 }

良好的变量定义格式

我们在JavaScript函数中定义变量时

     



     



     


，常常将所有变量在头部定义完全














，然后在后面使用

function test5(){ //在开头定义好所有变量 var x=3,y=2,z,name; //在后面可以随便使用变量 x=x+2; z=x+y; }

全局变量

全局变量常常带有window前缀  
    
    
   ，但默认带有

     


     


     

，所以不需要书写

window属于JavaScript下的一个对象 




 




 




，window之下包含我们所定义的全局变量以及各种函数方法

function test6(){ var x = 1; //下面所输出的x均为上方所定义的全局变量x console.log(x); console.log(window.x); //下面所使用的alert和window.alert具有相同代码相同作用 alert(x); window.alert(x); }

我们也可以通过重新定义window下的函数方法来更改该函数原有的操作

//在下述操作之后  

   

   

  ，alert不会产生输出作用 window.alert = function() { } alert("Hello");

注意：

JavaScript实际上只有一个全局作用域

     

     

     
，任何变量（包括函数）  




  




  




，假如没有在函数作用域内找到  


  


  


 ，就会向外查找
     
     
     ，若在全局作用域内均未查找到
   




   




   




，则报错RefrenceError

局部变量

在JavaScript的ES5中会出现变量作用域过大导致代码冲突的结果：

function test7(){ for(var x=1;x<10;x++){ console.log(x); } // 我们希望x的作用域只在for中 



 



 



，但它仍会被带出for x=x+1; }

JavaScript在ES6中加入了新的定义类型let用来定义局部变量

function test7(){ for(let x=1;x<10;x++){ console.log(x); } //x则只在for中有作用 console.log(x);//Uncaught ReferenceError: x is not defined }

常量Const

在JavaScript的ES6之前                ，我们定义常量只是采用常识约束：

我们假设全大写字母的变量为常量 但实际上是可以修改的 //我们定义PI var PI = 3.14； //但我们仍旧可以修改 PI = 3.33；

但在JavaScript的ES6中

    




    




    



，提供了const定义类型














，它所定义的变量是真正的常量                ，是允许修改的：

//我们定义PI const PI = 3.14; //我们无法修改

     



     



     


，下述代码报错 PI = 3.33;

方法的定义和调用

方法的物理定义：

对象中只存在两种东西：属性和方法 对象中的函数被我们称为方法

方法示例

我们给出方法的示例：

var student = { //对象中包含属性 name:"胡桃", //对象中包含方法 sing:function(){ //this指向当前对象的属性 console.log(this.name + "在唱歌") } } //我们在调用方法时














，需要带上对象并且加上（） student.sing();

This和Apply的区别

我们稍微讲解一下对象方法中的This和Apply：

This：无法指向  
    
    
   ，只能在对象的方法中出现

     


     


     

，并且固定指向自身对象的属性 Apply：可以控制this指向 




 




 




，在调用含有this的函数时调用  

   

   

  ，第一个参数是对象

     

     

     
，后面是所需参数

我们给出案例进行讲解：

//首先我们给出一个外部函数来计算年龄： function getAge(){ //这里采用了Date内置对象  




  




  




，我们后面会讲到  


  


  


 ，这里是获得当前年份 var nowTime = new Date().getFullYear(); return nowTime - this.birth; } //我们创建一个对象(直接调用getAge
     
     
     ，相当于this的使用) var hutao = { name:"胡桃", birth:2002, age: getAge } //我们直接对getAge采用apply方法
   




   




   




，使其this指向hutao //第一个参数是对象 



 



 



，后面均为参数所需值 getAge.apply(hutao,[]);

我们给出网页端的操作:

//我们需要调用age时                ，是采用的age（）方法 console.log(hutao.age()) 20 //这里采用getAge的apply方法 getAge.apply(hutao,[]); 20

内部对象

JavaScript的内部对象类似于我们Java中的常见类

它们同样都是由他人创造并存在于JavaScript中

    




    




    



，我们可以直接调用帮助我们编程

标准类型

我们先来介绍一些标准类型便于内部对象的讲解

我们先给出一个新的方法














，用于分析其类型：

typeof 类型对象

我们给出案例：

typeof 123 number typeof "123" string typeof true boolean typeof [] object typeof Math.abs function typeof undefined undefined

Date日期对象

首先我们给出日期对象的定义方法：

var name = new Date();

我们通过日期对象来进行一些方法操作：

方法名 说明 name.getFullYear() 返回当前年份 name.getMonth() 返回当前月份 name.getDate() 返回当前日期 name.getDay() 返回当前星期 name.gatHours() 返回当前小时 name.getMinutes() 返回当前分钟 name.getSeconds() 返回当前秒数 name.getTime() 返回当前时间到1970 1.1 00：00：00 的毫秒数

我们同时提供一些Date对象输出日期的不同写法（这里在网页示例）：

now = new Date() Thu Jul 14 2022 13:27:07 GMT+0800 (中国标准时间) now.toLocaleString() 2022/7/14 13:27:07 now.toGMTString() Thu, 14 Jul 2022 05:27:07 GMT

JSON字符串

我们先来介绍一下JSON：

在早期                ，所有数据传输都采用XML文件

     



     



     


，但后来开始采用JSON传输 JSON是一种轻量级的数据交换格式 简洁和清晰的层次结构使得JSON成为理想的数据交换语言 益于人的阅读和书写














，也易于机器解析和生成  
    
    
   ，有效地提升了网络传输效率

在JavaScript中一切皆为对象

     


     


     

，任何JS所支持的类型都是对象

格式：

对象都采用{} 数组都采用[] 键值对都采用 key:value

我先在这里讲解一下JSON的格式 




 




 




，并且给出对象进行对比：

//对象具有对象的形式 var obj = { name:"万叶", eyes:"风" } //JSON虽然和对象相似  

   

   

  ，但实际上是字符串

     

     

     
，内部所有元素都有"""所包围 var json = {"name":"万叶","eyes":"风"}

最后我们给出JSON和对象之间的转换：

var obj = { name:"万叶", eyes:"风" } //对象转化为JSON字符串 var jsonUser = JSON.stringify(obj); //JSON字符串转化为对象 var wanye = JSON.parse({"name":"万叶","eyes":"风"})

面向对象编程

首先面向对象编程是什么呢？

面向对象都具有一个模板类 我们根据模板类来产生对象并对其进行操作

JavaScript的类和对象

JavaScript的面向对象与其他面向对象有一点区别：

//我们先给出一个整体对象（类似于类  




  




  




，但类需要写有数据） var Student = { name:"name", age:18, run:function() { console.log(this.name + "running!") } }; //我们创建一个对象 var xiaoming = { name:"xiaoming" } //然后我们让小明的本源指向Student对象 xiaoming._proto_ = Student; //下面是网页测试给出的结果  


  


  


 ，我们可以看到xiaoming继承了Student的方法 // xiaoming // {name: xiaoming, _proto_: {…}} // name: "xiaoming" // _proto_: {name: name, age: 18, run: ƒ} // [[Prototype]]: Object

但是在ES6版本之后
     
     
     ，JavaScript给出了class关键字
   




   




   




，具体化了类这个概念：

class定义模板：

class name{ //... }

下面给出class案例：

class Student{ //class配置的constructor方法 



 



 



，用来创造对象的属性 constructor(name){ this.name = name; } //方法直接在下面书写即可 run(){ console.log(this.name + "running"); } } //创建新对象的方法（需要把所需参数写入） var yebao = new Student("yebao");

我们给出网页调试结果：

yebao Student{name: yebao} yebao.name yebao yebao.run() 4.html:19 yebaorunning

结束语

好的                ，关于JavaScript的函数和对象我们就介绍到这里

    




    




    



，下一期我们会讲解JavaScript的重点BOM和DOM部分    
    
    
。