当前位置：首页 > article >正文

JavaScript基础（函数及面向对象）

article 2025/2/26 15:45:22

函数

定义函数

Java定义方法：

public 返回值类型方法名(){

return 返回值

}

定义函数方法一

eg：定义一个绝对值函数

function abs(x) {
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }

调用函数：

注意：一旦执行到return代表函数结束，返回结果。

如果没有执行return，函数执行完也会返回结果，结果为undefined

定义函数方法二

var abs1=function (x) {
            if (x>=0){
                return x;
            }else {
                return -x;
            }
        }

调用函数：

function(x){.....}这是一个匿名函数，但是可以把结果赋值给abs，通过abs就可以调用函数

方式一和方式二等价

参数问题

JavaScript可以传递任意个参数，也可以不传递参数

1.当调用函数时不传递参数依然会返回结果：

手动添加异常处理：

不传递参数与传递参数对比：

2.arguments

是JS免费赠送的关键字，代表传递进来的所有参数是一个数组

默认情况下，当函数传递多个参数时，会返回第一个参数结果：

利用arguments可以拿到所有参数：

存在问题：arguments包含所有的参数，我们需要使用多余的参数时，需要排除已有的参数

rest函数

获取处理已经定义的参数之外的所有参数

使用argument获取多余数字：

function aaa(a,b) {
            console.log("a=>"+a);
            console.log("b=>"+b);
            for (var i=2;i<arguments.length;i++){
                console.log("多余"+arguments[i]);
            }
        }

使用rest获取多余数字：

rest参数只能写在最后面，必须用...表示

变量的作用域

在JavaScript中，var定义变量实际是有作用域的，在函数体内声明的变量，在函数体位不可以使用。（若想使用，闭包可以实现该功能）

function s() {
            var x;
            x=x+1;
        }
        x=x+1;

如果两个函数使用了相同的变量名，只要在函数内部，就不会产生冲突。如下：

function s() {
            var x;
            x=x+1;
        }
      //两个函数的x互不影响
        function z() {
            var x=3;
            x=x+1;
        }

内部函数可以访问外部函数的成员，反之不行，如下：

function a() {
            var x=1;
            function b() {
                var y=x+1;  //2
            }
            var z=y+1;  // y is not defined
        }

内部函数变量和外部函数的变量重名。如下

在JavaScript中，函数查找变量从自身函数开始。查找是由内向外。假设外部存在同名函数变量，内部函数会屏蔽外部函数变量。

function c() {
            var x=1;
            function d() {
                var x='A';
                console.log('outer:'+x);//inner:1
            }
            console.log('inner:'+x);//outer:A
            d();//调用d函数
        }
        c();//调用c函数

提升变量的作用域,js执行引擎，自动提升了y的声明，但是不会提升变量y的赋值，如下：

function e() {
            var x="x"+y;
            console.log(x);
            var y='y';
        }
        e();    //xundefined

注意：所有的变量定义都放在函数的头部，便于代码维护。

全局函数

var x=1;//全局变量
        function f() {
            console.log(x);//1
        }
        f();
        console.log(x);//1

全局对象window

 //全局对象window
        var x='xxx';
        alert(x);
        alert(window.x);

默认所有的全局变量，都会自动绑定在window对象下。

alert()这个函数本身也是一个window变量。

var x='xxx';
        /*alert(x);
        alert(window.x);*/
        window.alert(x);
        var old_alert=window.alert;
        window.alert=function () {
        };
        window.alert(123);//次弹窗不会弹出，失效
        //恢复弹窗
        window.alert=old_alert;
        window.alert(456)//恢复弹窗456

JavaScript实际上只有一个全局作用域，任何变量（函数也视为变量），假设没有在函数作用范围内找到，就会向外查找，如果在全局作用域都没有找到，报错RefrenceError

规范

由于使用的全局变量都会绑定到window上，如果不同的js文件所有了相同的全局变量，会产生冲突，如何减少冲突。如下：

 //唯一一个全局变量
        var zhangsanApp={};
        //定义全局变量
        zhangsanApp.name='zhangsan';
        zhangsanApp.abs=function (a,b) {
            return a+b;
        }

把自己的代码全部放入自己定义的唯一空间名字中，降低全局命名冲突的问题

局部作用域 let

为了解决以上局部作用域冲突问题，产生关键字let

建议使用let去定义局部作用域的变量

常量const

常量用大写字母定义

 const PI='3.15';
        console.log(PI);
        PI='123';
        console.log(PI)//Assignment to constant variable.

方法

定义方法

方法就是函数放在对象内部，对象只有属性和方法

var serenity={
            name:'张三',
            bitrh:2001,
            age: function () {
                //今年减去出生年
                var now=new Date().getFullYear();//获取当前日期
                return now-this.bitrh;
            }
        }

调用属性：对象.属性

serenity.name;

调用方法：对象.方法名（）

serenity.age()

this关键字是无法指向的，默认指向调用它的对象，如下：

//定义方法二
        function getAge() {
            //今年减去出生年
            var now=new Date().getFullYear();//获取当前日期
            return now-this.bitrh;
        }
        var serenity={
            name:'张三',
            bitrh:2001,
            age: getAge
        }

1.通过对象调用函数

serenity.age() //2001-当前时间

2.直接调用函数

getAge() //NaN，无法得到数据

3.apply方法在JS中可以控制this的指向

getAge().apply(serenity,[]); //函数名.apply(指向对象，参数)

内部对象

标准对象：如下

获取数据类型 typeof 数据

typeof 123
'number'
typeof '123'
'string'
typeof true
'boolean'
typeof undefined
'undefined'

typeof NaN
'number'
typeof []
'object'
typeof {}
'object'
typeof Math.abs
'function'

Date对象

var now=new Date();//获取当前时间

//Tue Feb 25 2025 12:26:38 GMT+0800 (中国标准时间)

Date对象的常用方法：

var now=new Date();//获取当前时间Tue Feb 25 2025 12:26:38 GMT+0800 (中国标准时间)
    now.getFullYear();//年
    now.getMonth();//月
    now.getDate();//日
    now.getDay();//星期几
    now.getHours();//时
    now.getMinutes();//分
    now.getSeconds();//秒
    now.getTime();//时间戳  统一：从1970年1月1日0：00：00到目前的毫秒数
    //根据时间戳转换为当前时间
    console.log(new Date(1740457598294));//Tue Feb 25 2025 12:26:38 GMT+0800 (中国标准时间)

常用转换：时间戳转化为北京时间

now=new Date(1740457598294);
console.log(now.toLocaleString());// 2025/2/25 12:26:38

JSON

早期所有数据传输用XML文件

JSON（JavaScript Object Notation，JavaScript对象表示法）是基于ECMAScript的一个子集设计的，是一种开放标准的文件格式和数据交换格式。其简洁和清晰的层次结构有效地提升了网络传输效率，使其成为理想的数据交换语言。

在JavaScript中一切皆为对象，如何JS支持的类型都可以用JSON来表示。

格式：

对象用{}
数组用[]
所有的键值对用：key:value

JSON字符串和JS对象的转化

//定义一个JS对象 
var user={
            name:"serenity",
            age:3,
            Phone:123456789
        }
        //对象转换为JSON字符串
          //{"name":"serenity","age":3,"Phone":123456789}
       var jsonUser= JSON.stringify(user)
        //json字符串转化为对象  参数为json字符串
        //{name: 'serenity', age: 3, Phone: 123456789}
        var json=JSON.parse('{"name":"serenity","age":3,"Phone":123456789}')

JSON.stringify(对象名) //对象转化为JSON字符串

JSON.parse（"JSON字符串"） //JSON字符串转化为JS对象

JSON和JS的区别：

var obj={a:'hello',b:'hellob'};

var json='{"a":"hello","b":"hellob"}'

面向对象

了解

JavaScript、Java、c#等都是面向对象

类：模板
对象：具体的实例

在JavaScript中，原型对象

原型链_proto_

class

class关键字在ES6引入，

定义一个类

//定义一个Student类
class Student{
    //构造器
    constructor(name) {
        this.name=name;
    }
    //hello方法
    hello(){
       console.log("hello");
    }
};
var xiaomin=new Student("xiaomin"); //创建对象
var xiaohong=new Student("xiaohong"); //创建对象