对象-字面量,Object新增api,面向过程和面向对象,类构造函数/继承

/* 
字面量速写:
如果属性名和形参名一致,可以直接写形参名

方法速写:省略冒号和function
sayHello(){} //实际上是 sayHello :function(){} 

计算属性名
通过 []  计算出来  
*/

//方法速写
//字面量速写:
// function san(a,b,c,d){
//     const sayHello = function(){
//         console.log('a',this.a)
//     }
//     return{
//         a,  // 实际上是 a : a
//         b,
//         c,
//         d,
//         sayHello,
//     }
// }
// //console.log(san(1,2,3,4))//{a: 1, b: 2, c: 3, d: 4}
// const u = san(1,2,3,4)
// u.sayHello()


// const user = {
//     name: 'a',
//     sayHello(){//实际上是 sayHello :function(){} 
//         console.log(this.name)
//     }
// }
// user.sayHello()//a

const prop1 = 'name2'
const prop2 = 'sayHello1'

 const user = {
    //[prop1] 实际上就是name2 ; name2 : 'a'
    [prop1] : 'a',
    [prop2](){
        console.log(this[prop1])
    }
 }
 console.log(user)//{name2: 'a', sayHello1: ƒ}
user[prop2]()//a

  

/* Object新增api
Object.is(第一个值,第二值) 判断数字是否相等
特殊情况 +0 / -0 = true   NaN /NaN =false

Object.getOwnPropertyNames方法,规定数组排序方式如下:先排数字,在拍其他

Object.setPrototypeOf
 */
//Object.is
// const a = 11;
// const b = 11;
// console.log(Object.is(a,b))

const obj1 = {
    a:1
}
const obj2 = {
    b:2
}
Object.setPrototypeOf(obj1,obj2)
console.log(obj1)

  

面向过程:一步接着一步的去写,适合比为简单一点的项目,比如大象装冰箱(第一步:拿取大象;第二部:打开冰箱;第三步:扔进冰箱;第四部:关闭冰箱)
面向对象:找到关键词,比如大象装冰箱(找到关键词,大象和冰箱;写完后,在给大象/冰箱原型或者什么地方写入属性名属性值去用)
/* 类构造函数
传统构造函数问题:(参考类和构造函数语法题文件)
1。属性和原型方法定义分离,降低可读性
2.原型成员可以被枚举
3.默认情况下,构造函数仍然可以被当做普通函数使用

类的特点:
1.类声明不会提升,和let,const一样,存在暂时行死期(提前被调用)
2.类中所有代码在严格模式下进行
3.类所有方法不可枚举(如在原型上写的属性)
4.类所有方法内部无法被当做构造函数使用
5.类构造器必须使用new来调用


 */
//class 类型 Animal名
class Animal {
    //构造器
    constructor(type,name,age,sex){
        this.type = type,
        this.name = name,
        this.age = age,
        this.sex = sex
    }
    //写的方法
    print(){
        console.log(`[种类] , ${this.type}`);
        console.log(`[名字] , ${this.name}`)
        console.log(`[年龄] , ${this.age}`)
        console.log(`[性别] , ${this.sex}`)
    }
}
const a = new Animal('','旺财','1','');
console.log(a)
 a.print();
 
 //因为在类里面写,所以只是打印Animal中的属性,不会打印原型的,也就不可枚举
for(var i in a){
    console.log(i)
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <script>
  /* 类书写
      1.计算成员名称 : const prop = 'name';   [prop] : '测试'
      2.getter和setter:对于某个属性的值进行读取和设置,getter和setter控制的属性,不在原型上
      3.静态成员:构造函数本身的成员;应用场景:比如棋子,他的宽高,那么每个棋子都需要用到宽高;可以直接设置到静态成员上;使用static 关键字定义成员静态成员

      5.类表达式 :const aaa = class An{}
      6.装饰器 :@Obsolete ;当语法过期后,可以使用该语法给他注释掉

给age加下划线/其他特殊符号的目的是:告诉他人这个age不希望直接去使用
 */
      //class 类型 Animal名
      // class Animal {
      //   //构造器
      //   constructor(type, name, age, sex) {
      //     this.type = type; 
      //     this.name = name;
      //     this.age = age
      //     this.sex = sex;
      //   }
      //   //创建一个age属性,并给他加上getter,堵盖该属性,会运行该函数
      //   get age() {
      //     return this._age + "岁";
      //   }
      //   //创建一个age属性,给他加上setter,给该属性赋值,会运行给函数
      //   set age(age) {
      //     if (typeof age !== "number") {
      //       throw new TypeError("错了");
      //     }   
      //     if (age < 0) {
      //       age = 0;
      //     } else if (age > 100) {
      //       age = 100;
      //     }
      //     this._age = age;
      //   }

      //   //写的方法
      //   print() {
      //     console.log(`[种类] , ${this.type}`);
      //     console.log(`[名字] , ${this.name}`);
      //     console.log(`[年龄] , ${this.age}`);
      //     console.log(`[性别] , ${this.sex}`);
      //   }
      // }
      // var a = new Animal("狗", "旺财", 1, "男");
      // console.log(a);
      // // a.print();

      //静态成员
      class abc{
        constructor(name){
          this.name = name
        }
        static width = 50;
        static height = 50;
      }
      var a = new abc()
      console.log(abc.width)//只有构造函数本身有
      console.log(a.width)//新创建对象式没有这个的

      
    </script>
  </body>
</html>

 

/* 
继承
ES6要求,如果定义了constructor,并且该类是子类,则必须在constructor的第一行手动调用父类的构造函数
如果子类不写constructor,则会有默认的构造器,该构造器需要的参数和父类一致,并且自动调用父类构造器
用户JS制作抽象类:抽象类:一般是父类,不能通过该类创建对象(也就是不能使用父类,父类一般都是公共的)
this执行具体的类的对象

*/

class Animal{
    constructor(type,name,age,sex){
        throw TypeError('不能给animal创建对象,他是公共的')
        this.type = type,
        this.name = name,
        this.age = age,
        this.sex = sex
    }
    print(){
        console.log(`[种类] , ${this.type}`);
        console.log(`[名字] , ${this.name}`)
        console.log(`[年龄] , ${this.age}`)
        console.log(`[性别] , ${this.sex}`)
    }
}
class Dog extends Animal{
    constructor(name,age,sex){
        super('猫类',name,age,sex);
        this.hobby = '吃鱼'
    }
    print(){
        super.print();//去继承animal的print方法
        console.log(`[爱好] , ${this.hobby}`)//在animal的父类上在添加一个爱好给dog

    }

}
const a = new Animal('犬類','旺财',1,'')
a.print()
console.log(a)//Animal {type: '犬類', name: '旺财', age: 1, sex: '公'}

//dog继承animal
const b = new Dog('二米',0.5,'')
b.print();
console.log(b)//Dog {type: '猫类', name: '二米', age: 0.5, sex: '母'}

 

posted on 2023-05-06 18:03  爱前端的小魏  阅读(21)  评论(0编辑  收藏  举报

导航