JS学习_day3

最新推荐文章于 2024-09-11 15:33:18 发布

zhanyiyyds

最新推荐文章于 2024-09-11 15:33:18 发布

阅读量107

点赞数

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/zhanyiyyds/article/details/125762717

版权

这篇博客详细介绍了JavaScript中的函数和类。函数部分包括普通函数、函数表达式、自调用函数以及箭头函数的用法，并提到了函数参数的灵活性。类部分讲解了如何使用class关键字创建类，包括构造函数、类的方法、继承、getter和setter以及静态方法。示例代码丰富，易于理解。

摘要由CSDN通过智能技术生成

JS学习_day3

1.函数

在之前已经初步了解了JS中一般函数是如何使用的，与C语言并无太大的区别。
示例：

function myFunction(a, b) {
    return a * b;
}

有所不同的是，JS中是可以用一个表达式来表示一个函数的，函数表达式可以存储在变量中：

var x = function (a, b) {return a * b};
var z = x(4, 3);

自调用函数
如果表达式后面紧跟 () ，则会自动调用。
示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ustc</title>
</head>
<body>

<p>函数可以自动调用：</p>
<p id="demo"></p>
<script>
(function () {
    document.getElementById("demo").innerHTML = "Hello! 你的GPA是4.3";
})();
// 此处函数会自动调用。即在id=demo处自动写上Hello! 你的GPA是4.3
</script>

</body>
</html>

箭头函数
ES6 新增了箭头函数。箭头函数表达式的语法比普通函数表达式更简洁。

// 普通函数
let sum = function(a, b) {
	return a + b;
}

// 箭头函数
let sum1 = (a, b) => {
	return a + b;
}

由此得到箭头函数的一般形式：(参数) => { 函数体 }
其他的一些箭头函数用法：
1.在参数只有一个的时候是可以省略小括号的

// 有效
let function = (x) => {
	return x;
};
// 有效
let function = x => {
	return x;
};
// 没有参数需要括号
let function = () => {
	return true;
};
// 有多个参数需要括号
let function = (a, b) => {
	return a * b;
};

2.在箭头函数只有一行代码时可以省略大括号，并且会自动return这条语句的返回值

// 有效
let function = (a, b) => {
	return a + b;
};
// 等效于 
let function = (a, b) => a + b; // 相当于 return a + b;

//但这种写法是错误的
let function = (a, b) => return a + b;

函数参数
JavaScript 函数对参数的值没有进行任何的检查。若函数有两个参数，而传参时只传入了一个参数，另一个参数会自动设为undefined。ES6 支持函数带有默认参数

function myFunction(x, y = 10) {
    // y is 10 if not passed or undefined
    return x + y;
}
 
myFunction(0, 2) // 输出 2
myFunction(5); // 输出 15, y 参数的默认值

arguments 对象
JavaScript 函数有个内置的对象 arguments 对象。argument 对象包含了函数调用的参数数组。

//arguments.length 返回传入参数的个数
// 找到传入参数的最大值
x = findMax(1, 123, 500, 115, 44, 88);
 
function findMax() {
    var i, max = arguments[0];
    
    if(arguments.length < 2) return max;
 
    for (i = 0; i < arguments.length; i++) {
        if (arguments[i] > max) {
            max = arguments[i];
        }
    }
    return max;
}

2.类

我们使用 class 关键字来创建一个类，类体在一对大括号 {} 中，我们可以在大括号 {} 中定义类成员的位置，如方法或构造函数。
每个类中包含了一个特殊的方法 constructor()，它是类的构造函数，这种方法用于创建和初始化一个由 class 创建的对象。
创建一个类的语法格式如下：

//格式
class ClassName {
  constructor() { ... } //和python中__init__()类似
}
//实例
class test{
  constructor(name, url) {
    this.name = name;
    this.url = url;
  }
}

类的方法

class GPA{
  constructor(name, grade) {
    this.name = name;
    this.grade= grade;
  }
  age() {
  	let gpa
    if(this.grade>95) gpa = 4.3
    else gpa = 4. 0
    return gpa
  }
}
 
let gpa= new GPA("占一", 99);
document.getElementById("demo").innerHTML =
"占一的GPA: " + gpa.age() ;

类的继承
JavaScript 类继承使用 extends 关键字。继承允许我们依据另一个类来定义一个类，这使得创建和维护一个应用程序变得更容易。当创建一个类时，您不需要重新编写新的数据成员和成员函数，只需指定新建的类继承了一个已有的类的成员即可。这个已有的类称为基类（父类），新建的类称为派生类（子类）。super() 方法用于调用父类的构造函数
示例：

class father{
  constructor(grade) {
    this.grade = grade;
  }
  GET_GPA() {
    let gpa
    if(this.grade>90) gpa=4.3
    else gpa=4.0
    return gpa
  }
}
 
class child extends father{
  constructor(name, grade) {
    super(grade);
    this.name= name;
  }
  show() {
    return this.name+'的GPA:'+this.GET_GPA();
  }
}
 
let noob = new child ("占一", 99);
document.getElementById("demo").innerHTML = noob.show();
//输出结果  占一的GPA：4.3

getter 和 setter
类中我们可以使用 getter 和 setter 来获取和设置值。类中添加 getter 和 setter 使用的是 get 和 set 关键字。很多开发者在属性名称前使用下划线字符 _ 将 getter/setter 与实际属性分开,
实例：

class GPA{
  constructor(grade) {
    this._sitegrade = grade;
  }
  get sitegpa() {
    return this._sitegrade ;
  }
  set sitegpa(x) {
    this._sitegrade = x;
  }
}
 
let noob = new GPA(4.3);
 
document.getElementById("demo").innerHTML = noob.sitegpa;
noob.sitegpa=4.31
document.getElementById("demo").innerHTML = noob.sitegpa;

静态方法
静态方法是使用 static 关键字修饰的方法，又叫类方法，属于类的，但不属于对象。静态方法不能在对象上调用，只能在类中调用。
示例：

class GPA{
  constructor(grade) {
    this.grade= grade;
  }
  static good() {
    return 4.3;
  }
}
 
let zhanyi = new GPA(99);
 
// 可以在类中调用 'good()' 方法
document.getElementById("demo").innerHTML = GPA.good();
 
// 不能通过实例化后的对象调用静态方法
// document.getElementById("demo").innerHTML = zhanyi.good();
// 以上代码会报错