第53天学习打卡（JSON 面向对象编程）

5.2JSON

json是什么

早期，所有数据传输习惯使用XML文件。

JSON(JavaScript Object Notation,JS对象简洁)是一种轻量级的数据交换格式。简洁和清晰的层次结构使得JSON成为理想的数据交换语言。易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

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

格式：

对象都用{}

数组都用[]

所有的键值对 都是用key:value

JSON字符串和JS对象的转化

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <script>
     var user = {
         name:"qinjiang",
         age:3,
         sex:'boy'
     }//这个输出的结果可以展开
 ​
     //对象转化为json（结果不可以展开）
     var jsonuser  = JSON.stringify(user)//结果为：{"name":"qinjiang","age":3,"sex":"boy"}
 ​
     //json 字符串转化为对象（结果可以展开）,参数为json字符串
     var obj = JSON.parse('{"name":"qinjiang","age":3,"sex":"boy"}');//结果可展开
 ​
 </script>
 ​
 </body>
 </html>
 ​

JSON和JS对象的区别

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

5.3 Ajax

原生的js写法 xhr异步请求

jQuery封装好的方法 $("#name").ajax("")

axios请求

6.面向对象编程

>原型对象

javascript、java、c# ... 面向对象；javascript有些区别

类：模板 原型对象

对象：具体的实例

类是对象的抽象，对象是类的具体表现。

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <script>
     var Student = {
         name:"qinjiang",
         age:3,
         run:function(){
             console.log(this.name + "run...");
         }
     };
     //xiaoming的原型是Student xiaoming可以调用Student里面的内容
     var xiaoming ={
         name:"xiaoming"
     };
     //原型对象是父类
     xiaoming.__proto__ = Student;
     var Bird = {
         fly:function (){
             console.log(this.name + "fly...")
         }
     }
     xiaoming.__proto__ = Bird;
 </script>
 ​
 </body>
 </html>

以前定义一个类：

 function Student(name){
       this.name = name;
   }
   //给student新增一个方法
   Student.prototype.hello = function () {
       alert('hello')
 ​
   };

class继承

class关键字，是在ES6引入的

1.定义一个类 属性 方法

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <script>
   
   //ES6之后
   //定义了一个学生的类
   class Student{
       constructor(name) {
           this.name = name;
       }
       hello(){
           alert('hello')
       }
   }
   var xiaoming = new Student("xiaoming");
   var xiaohong = new Student("xiaohong");
 </script>
 </body>
 </html>

输出结果：

 xiaoming.hello()
 undefined
 xiaoming.name
 "xiaoming"

2.继承

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <script>
 ​
   //ES6之后
   //定义了一个学生的类
   class Student{
       constructor(name) {
           this.name = name;
       }
       hello(){
           alert('hello')
       }
   }
   class XiaoStudent  extends Student{
       constructor(name,grade) {
         super(name)//继承了父类
           this.grade = grade;
       }
       myGrade(){
           alert('我是一名学生')
       }
   }
   var xiaoming = new Student("xiaoming");
   var xiaohong = new XiaoStudent("xiaohong",1);
 </script>
 </body>
 </html>

本质：查看对象原型

image-20210302223151562

原型链

proto:

 

posted @ 2021-03-02 22:40  豆豆tj  阅读(74)  评论(0)    收藏  举报