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

  • JavaScript进阶知识点——函数和对象详解已关闭评论
  • 18 次浏览
  • A+
所属分类:Web前端
摘要

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


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所定义的变量实际上也是存在作用域的

函数体内变量作用域解释

  1. 假如在函数体中声明,则在函数体外不可以使用
function test1() {             var x=1;             x=x+1;         }  x=x+2;//Uncaught ReferenceError: x is not defined 
  1. 如果两个函数使用了相同的变量名,只要在函数内部,则不产生冲突
function test1() {             var x=1;             x=x+1;         }  function test2(){     var x=1;     x=x+2; } 
  1. 内部函数可以使用外部函数的成员,但外部函数不能使用内部函数的成员
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         } 
  1. 当内部函数变量和外部函数变量重名时,由内向外查找,就近原则
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部分。