对象-字面量,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: '母'}