javaScript的函数和对象，继承原型链
一.函数
1.初始函数
- JavaScript是函数式编程语言（functional language），函数的地位至关重要。
- 什么是函数：
具有特定功能的多条语句的封装体
函数也是JS对象，且是第一类对象（first class object）
函数对象是可执行的, 其它类型的对象是不可执行的 - 函数的作用：
提高代码复用。
便于阅读和交流。
2.创建函数
2.1 参数设置
- 无参函数，函数的功能实现，不需要设置参数。
- 有参函数，需要设置形参，用于接收用户输入的实参。
调用函数时，解析器也不会检查实参的数量
多余实参不会被赋值
实参的数量少于形参的数量，则没有对应实参的形参将是undefined
2.2 函数声明 来创建函数
语法：
function 函数名([形参1,形参2…形参N]){
语句…
}
示例代码：
//无参函数
function demo4() {
alert("调用方法demo4");
}
//函数的调用：
demo4();
//有参函数,求输入的两个数的和
function sumNum(a,b){
a=parseInt(a);
b=parseInt(b);
let c=a+b;
console.log(c);
}
sumNum(12,33);
2.3 函数表达式创建函数
使用 函数表达式 来创建一个函数
var 函数名 = function([形参1,形参2…形参N]){
语句…
}
优点:函数表达式,后面赋给前面.用于动态生成多
代码示例：
let scr=function (a,b){
a=parseInt(a);
b=parseInt(b);
console.log(a);
console.log(b);
let c=a*b-b;
console.log(c)
}
//调用时
scr(12,1213);
3.变量作用域
4.匿名函数
匿名函数指的是没有函数名称的函数，可以有效的避免全局变量的污染。
表示形式：
//自调函数，后面的小括号，表示给匿名函数传参并立刻执行
(function (num1,num2){
return num1+num2 ;
})(2,3);
5.回调函数
- 什么函数才是回调函数?
程序员定义的
程序员没有直接调用
但最终它执行了(在特定条件或时刻) - 在项目开发中，是值一个函数A作为参数传给函数B，在B函数体内调用函数A，A为回调函数。
- 示例代码：
<script>
function cal（num1,num2,fn）{
return fn(num1,num2);
}
console.log(cal(45,55,function(a,b){
return a+b;
})); //输出结果100
console.log(cal(10,20,function(a,b){
return a*b;
})); //输出结果200
</script>
6.案例
求斐波那契数列第N的值，1 ,1,2,3，5,8…
从第三项开始，每一项等于前两项之和。
示例代码如下：
function fibonacci(n) {
if (n <= 1) {
return n;
} else {
let a = 1;
let b = 1;
for (let i = 3; i <= n; i++) {
let c = a + b;
a = b;
b = c;
}
return b;
}
}
// 示例用法
const n = 6;
const result = fibonacci(n);
console.log(`斐波那契数列第${n}项的值为: ${result}`);
二.对象
1.对象概念
对象属于一种复合的数据类型，其可以保存多个不同数据类型的属性（或方法）,每个属性就是一个键值对，将这些属性（方法）封装在一起，就构成了一个对象。
2.JS中的对象分类
JS中对象的分类：
- 内建对象
由ES标准中定义的对象，在任何的ES的实现中都可以使用，直接new产生对象 。
比如：String Number Boolean Function Object… Math（不要new） - 宿主对象
由JS的运行环境提供的对象，目前来讲主要指由浏览器提供的对象,不要new，直接使用
比如 BOM DOM window window.document - 自定义对象
由开发人员自己创建的对象
3.字面量声明对象
- 使用对象字面量来创建一个对象：
使用对象字面量，在创建对象时，直接指定对象中的属性，语法如下：
{属性名:属性值,属性名:属性值…} - 对象字面量的属性名可以加引号也可以不加，建议不加, 如果要使用一些特殊的名字，则必须加引号.
属性名和属性值是一组一组的键值对结构，
键和值之间使用:连接，多个键值对之间使用,隔开
如果一个属性之后没有其他的属性了，就不要写.
- 成员变量的访问：对象名.属性名，或者和下面学生对象一样添加对象的输出方法。
- 示例
<script>
//版本1
var obj={};
obj.brand = "huawei";
obj.price = 2800;
//版本2
var obj1={name："jim"，age：19};
//版本3（最常用，排版舒适）
var student={
name:"小王",
number:11,
age:20,
class:114,
//为对象添加输出方法，类似于之前的函数
//这里的this指的是当前这个对象，在控制台上输出它整个内容
printInfo :function (){
console.log(this);
}
}
//对象方法的调用
student.printInfo();
</script>
输出学生对象如下，整体还是一个对象：
4. 工厂创建对象
上面的字面量声明对象确实可以，但是效率太低了，如果我想一下子添加十条学生对象呢？属性值都是一样的，就要用到接下来的工厂方法来创建对象了。
4.2工厂的格式
- 工厂创建对象，效率大大提高，因为同一种对象属性相同，封装成函数，是在函数中创建对象，传入的数据就是函数的参数。
- 在JavaScript中，使用new Object()语法可以创建一个空的对象。然后，可以通过为该对象添加属性和方法来定义对象的行为和属性。
- 在下面的示例中，通过var student = new Object()，我们创建了一个名为student的空对象。
- 取余操作类似于字面量定义，不过有一个缺点：所创建的对象都是object这个类型，无法区别。
4.3 示例代码和效果：
<script>
function Student(nane,number,age,class1){ //在函数中创建对象
var student = new Object(); //使用工厂方法创建对象
student.nane = nane;
student.number = number;
student.age=age;
student.class1=class1;
student.printInfo=function () {
console.log(this);
}
return student;
}
var student1 = Student("小明",2,15,401);
var student2 = Student("小王",3,16,811);
var student3 = Student("小六",31,16,811);
student1.printInfo();
student2.printInfo();
student3.printInfo();
</script>
效果：
5.构造函数创建对象
上面的工厂方法已经很方便了，但是效果却不是我们想要的，我们不能直观的看出它是属于什么类型的对象，都统一为Object对象了。
5.1 构造函数的格式
这时候就需要构造函数出马了，直接声明一个名为Student的函数，使用this指向，调用时new一个对象，其中调用new是构造函数的鲜明特征。
格式为：
fuction 对象名（参数1，参数2…）{
this.属性1名称=参数1；
this.属性2名称=参数2；
…
//调用显示这个对象内容的方法
this.方法名=fuction（）{
//方法体
}
}
调用时：var 变量名=new 对象名（实参1，实参2…）；
其中：this指向的是当前创建的新的对象
5.2示例代码和效果
- 代码
function Student (name,number,age,class1) {
this.name = name;
this.number = number;
this.age = age;
this.class1 = class1;
//每创建一个对象，就会创建一个该对象的方法，可以放入全局调用域中，改为对象的执行
this.show = function () {
//this指向新创建的对象
console.log(this)
}
}
// 利用构造函数创建对象，需要new
var student1 = new Student("天神",11,23,22);
- 效果如下：
6.内置对象
6.1String对象
主要的属性和方法，有如下几种：
- charAt（）：获取指定下标的字符
- indexof（）：获取查询字符首次出现的下标
- substring（start，end）：下边在起点终点区间内的字符串
- substr（start，length）：从起点开始截取指定长度的字符串
- split（）：按括号中的字符对字符串进行分割
6.2Math对象
- PI：圆周率
- abs：绝对值
- max和min
- ceil（）和floor（）：向上取整和向下取整。
- random（）：生成0到1的随机数
- pow（a,b）:a的b次幂
6.3Data对象
- getFullYear（）：获取四位数字的年份，如2023
- getMonth（），getData（），getHour（），getMinutes（），getSecons（）分别获取对应月份，天，小时，分钟，秒。
- getDay():获取星期几。
三.原型与继承
这一节很重要，之前也看了不少学习视频，学校老师也讲得很详细，博客也看了不少，都在证实这一点，因为它有些难，我尽可能讲得通俗易懂些，方便理解，当然也比较简洁。
3.1 原型介绍
为什么要引入原型？看如下代码：
function Student (name,number,age,class1) {
this.name = name;
this.number = number;
this.age = age;
this.class1 = class1;
this.show = function () {
console.log(this)
}
}
// 利用构造函数创建对象，需要new
var student1 = new Student("天神",11,23,22);
var student2 = new Student("小王",3,16,811);
console.log(student1.show==student2.show);
//结果为flase
输出结果为flase，说明每个对象调用的方法不是同一个，每次创建对象都要创建一个新的方法，效率太低。
而原型的思想就是，利用原型对象来保存一些公共属性和方法，当访问某个对象中不存在的属性和方法时，会自动调用原型中的属性和方法。
3.2使用原型实现继承
- JS创建的任意一个函数，解析器都会向函数中添加一个属性prototype(原型对象)， 这个属性对应着一个对象，这个对象就是我们所谓的原型对象。
- 使用原型实现继承是JS的传统方式，如果一个对象本来没有某个属性和方法，从其他对象中获取了，这就是继承。
- 具体示例如下：
function Student (name,number,age,class1) {
this.name = name;
this.number = number;
this.age = age;
this.class1 = class1;
}
Student.prototype.show = function () {
console.log(this)
}
var student1 = new Student("天神",11,23,22);
var student2 = new Student("小王",3,16,811);
student1.show();
student2.show();
console.log(student1.show==student2.show);
- 结果显示，所有的类最顶层原型都是object：
3.3原型链
- 在JS中，对象有原型对象，原型对象也有原型对象，就如之前说说的最顶层的原型对象为Object，这样就形成了一个原型链。
- 对象中的构造函数：在原型对象中有一个constructor，指向该对象的构造函数。
function person{}
person.prototype.constructor==person; //返回true
- 示例代码：
要求杰出人才继承于工作者，工作者继承于人。
<script>
function Person(name,age) {
this.name=name;
this.age=age;
}
Person.prototype.showing= function(){
console.log(this);
}
function Worker(name,age,pay){
Person.call(this,name,age);
this.pay = pay;
}
//worker的原型为person
Worker.prototype=new Person();
//worker的原型对象指向worker的构造函数
Worker.prototype.constructor =Worker;
Worker.prototype.showing2=function (){
console.log(this);
}
//下面的类似
function ExpertWorker(name,age,pay,realm){
//继承构造方法
Worker.call(this,name,age,pay);
this.realm=realm;
}
ExpertWorker.prototype=new Worker();
ExpertWorker.prototype.constructor=ExpertWorker;
ExpertWorker.prototype.showing3=function () {
console.log(this);
}
var p1=new Person("王大壮",22);
var p2=new Worker("刘二蛋",21,5000);
var p3=new ExpertWorker("毛神",44,5566,"玩游戏");
p1.showing();
p2.showing2();
p3.showing3();
</script>
显示效果:
| 第二章是核心内容，需要认真对待，虽然我写的可能有些简洁了，但是仔细看注释还是可以很好的吸收这部分内容的，然后自己多敲一敲✿✿ヽ(°▽°)ノ✿。 |
417
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
