CH13_JS对象

最新推荐文章于 2024-08-04 16:33:59 发布

功夫熊猫大侠

最新推荐文章于 2024-08-04 16:33:59 发布

阅读量893

点赞数 20

分类专栏： JavaScript 文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/m0_37631902/article/details/140375018

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

第13章：Javascript对象

本章目标

掌握什么是对象？
掌握Javascript中创建对象的方式
对象的使用
值类型和引用类型

课程回顾

如何声明函数？
如何调用函数？
函数的返回值用什么关键字？
常用的系统函数有那些？

讲解内容

1. 对象理解

为什么要使用对象？

思考：用函数实现，将学生的信息通过控制台输出，信息包含（学号，姓名，年龄，性别，班级…）

代码实现：
```
function showInfo(studentNo,name,age,sex,className,.....){
    console.log("学号："+studentNo);
    .......
}
```
问题：当参数比较多的情况下，代码可读性太差，而且方法变很复杂，有没有简单的方式呢？
```
function showInfo(student){
    console.log(student.studentNo);
    console.log(student.name);
    .............
}
```
说明：student则是一个对象，可以通过对象简化方法的参数。
什么是对象
1. 现实生活中的对象
  
  万物皆对象，对象是一个具体的事物，一个具体的事物就会有行为和特征。
  
  比如：一个学生，一个老师，一辆车，一台电脑等都是对象
  
  注意：学生不是对象，是一类事务，在其他面向对象编程语言中，称为类，Javascript中没有类的概念（ES6就有类），但是具体到一个学生，则为对象，比如“张三”，“李四”
2. Javascript中的对象
  
  对象是JavaScript的引用数据类型。对象是一种复合值：它将很多值（原始值或者其他对象）聚合在一起，可通过名字访问这些值。对象也可看做是属性的无序集合，每个属性都是一个名/值对。属性名是字符串，因此我们可以把对象看成是从字符串到值得映射。然而，对象不仅仅是字符串到值的映射，除了可以保持自有属性，JavaScript对象还可以从一个称为原型的对象继承属性。对象的方法通常是继承的属性。这种“原型式继承”（prototypal inheritance）是JavaScript的核心特征。
3. 对象的组成
  1. 静态特征，称：属性
    
    属性都是，一个名对一个具体值，且无序集合。
  2. 动态特征，称：行为，则为“函数”或“方法”
    
    则为函数，或称为“方法”

2. 对象的创建

字面量方式

 var student={
            studentNo:"1001",
            name:"张三",
            age:20,
            sex:"男",
            sayHi:function(){
                console.log(this.studentNo+","+this.name+","+this.age+","+this.sex);
            }
       };
//调用对象的方法
student.sayHi();
//也可以重新给对象的属性赋值
student.name="李四";
student.sayHi();

在这里插入图片描述

注意事项：

属性和值用:分开，属性和属性之间用,隔开
方法是用函数关键字function声明
缺点：代码太过冗余，重复性太高

比如要创建一个李四的学生对象，则要重新创建，所以重复性太高了。

new Object()方式创建对象

 		var student=new Object();
        student.studentNo=1001;
        student.name="张三";
        student.age=20;
        student.sex="男";
        student.sayHi=function(){
            console.log(this.studentNo+","+this.name+","+this.age+","+this.sex);
        }

        student.sayHi();//调用方法
		student.studentNo=1002;//重新赋值
        student.name="小丽";
        student.sayHi();

注意事项：

通过对象.属性名=值，方式进行赋值，.符号相当于对象的属性，=是赋值
缺点：代码太过冗余，重复性太高，且每次创建对象都要使用new Object()方式

工厂函数创建对象

function createStudent(studentNo,name,sex,age){
            //创建对象
            var student=new Object();
            //给对象属性赋值
            student.studentNo=studentNo;
            student.name=name;
            student.sex=sex;
            student.age=age;
            //实现对象的函数
            student.sayHi=function(){
                console.log(this.studentNo+","+this.name+","+this.age+","+this.sex);
            }

            return student;//返回对象
        }

        var zs=createStudent(1001,"张三","男",20);//创建一个张三的对象
        zs.sayHi();

        var ls=createStudent(1002,"李四","男",19);//创建一个李四的对象
        ls.sayHi();

注意事项：

相比前两种方式，此方式解决创建对象代码冗余的问题
缺点：过工厂模式我们解决了创建多个相似对象代码冗余的问题，但却没有解决对象识别的问题（即怎样知道一个对象的类型）。

在这里插入图片描述

自定义构造函数

function Student(studentNo,name,age){
            this.studentNo=studentNo;
            this.name=name;
            this.age=age;

            this.sayHi=function(){
                console.log(this.studentNo+","+this.name+","+this.age);
            }
        }

        var zs=new Student(1001,"张三",18);
        zs.sayHi();
        var ls=new Student(1002,"李四",20);
        ls.sayHi();

注意事项：

此方式类似于创建函数，代码比较精简

3. 名词解释

属性和方法

如果一个变量属于一个对象所有，那么该变量就可以称之为该对象的一个属性，属性一般是名词，用来描述事物的特征

如果一个函数属于一个对象所有，那么该函数就可以称之为该对象的一个方法，方法是动词，描述事物的行为和功能
new关键字
构造函数，是一种特殊的函数。主要用来在创建对象时初始化对象，即为对象成员变量赋初始值，总与new运算符一起使用在创建对象的语句中。
1. 构造函数用于创建一类对象，首字母要大写。
2. 构造函数要和new一起使用才有意义。
new在执行时会做四件事情
1. new会在内存中创建一个新的空对象
2. new 会让this指向这个新的对象
3. 执行构造函数目的：给这个新对象加属性和方法
4. new会返回这个新对象
this关键字
JavaScript中的this指向问题，有时候会让人难以捉摸，随着学习的深入，我们可以逐渐了解

现在我们需要掌握函数内部的this几个特点
1. 函数在定义的时候this是不确定的，只有在调用的时候才可以确定
2. 一般函数直接执行，内部this指向全局window
3. 函数作为一个对象的方法，被该对象所调用，那么this指向的是该对象
4. 构造函数中的this其实是一个隐式对象，类似一个初始化的模型，所有方法和属性都挂载到了这个隐式对象身上，后续通过new关键字来调用，从而实现实例化

4. 对象的使用

遍历对象的属性

通过for…in语法可以遍历一个对象，语法：

for(var key in 对象){
    console.log(key);//获取对象的具体属性
    console.log(对象[key]);//获取对象的属性值
}

案例：

var student={
            studentNo:"1001",
            name:"张三",
            age:20,
            sex:"男",
            sayHi:function(){
                console.log(this.studentNo+","+this.name+","+this.age+","+this.sex);
            }
       };

      for(var key in student){
          console.log(key+"-"+student[key]);
      }

在这里插入图片描述

删除对象的属性

语法：delete 对象.属性
类型分类

基本类型又叫做值类型，复杂类型又叫做引用类型

值类型：简单数据类型，基本数据类型，在存储时，变量中存储的是值本身，因此叫做值类型。

引用类型：复杂数据类型，在存储是，变量中存储的仅仅是地址（引用），因此叫做引用数据类型。

堆栈空间分配区别：

1、栈（操作系统）：由操作系统自动分配释放，存放函数的参数值，局部变量的值等。其操作方式类似于数据结构中的栈；

2、堆（操作系统）：存储复杂类型(对象)，一般由程序员分配释放，若程序员不释放，由垃圾回收机制回收，分配方式倒是类似于链表。

注意：JavaScript中没有堆和栈的概念，在高级编程语言中的概念，此处我们用堆和栈来讲解。
类型详细讲解
1. 基本数据类型：变量中存储的是具体的值，则操作时是操作值的副本
  1. 基本类型赋值方式
  1. 基本类型传参数方式
2. 引用类型：变量中存储的是内存地址，则操作时操作的是地址
  1. 引用类型赋值
  2. 引用类型传参
3. 案例演示：
  1. 值类型赋值方式，张三去年身高160，李四和张三身高一样，今年张三身高170，问题：李四今年身高多少？
  2. 引用类型赋值方式：以上同例，用对象实现

课后作业

. 案例演示：

  1. 值类型赋值方式，张三去年身高160，李四和张三身高一样，今年张三身高170，问题：李四今年身高多少？

     [外链图片转存中...(img-5v1iMtXo-1720755421838)]

     [外链图片转存中...(img-dHaW8c2W-1720755421838)]

  2. 引用类型赋值方式：以上同例，用对象实现

     [外链图片转存中...(img-zOUWebsZ-1720755421839)]

     [外链图片转存中...(img-9SobwIrt-1720755421839)]