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

　　2.如果两个函数使用了相同的变量名，只要在函数内部，则不产生冲突

　　function test1() {
　　var x=1;
　　x=x+1;
　　}
　　function test2(){
　　var x=1;
　　x=x+2;
　　}

　　3.内部函数可以使用外部函数的成员，但外部函数不能使用内部函数的成员

　　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
　　}

　　4.当内部函数变量和外部函数变量重名时，由内向外查找，就近原则

　　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();

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

　　我们同时提供一些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进阶之函数和对象详细知识内容就先讲到这里