JS常见的优化代码常用的两种方法

一 构造器的使用

通俗来讲是用构造函数来创建对象，以达到复用的一种方式

/*
使用背景：页面中创建一个对象可以使用语法糖
var  obj1 = { name:'flx',age:100 }
创建两个对象的话可以粘贴2次
var  obj1 = { name:'flx',age:100 }
var  obj2 = { name:'flx2',age:200 }
创建六个对象可以粘贴6次
var  obj1 = { name:'flx',age:100 }
var  obj2 = { name:'flx2',age:200 }
var  obj3 = { name:'flx3',age:300 }
var  obj4 = { name:'flx4',age:400 }
var  obj5 = { name:'flx5',age:500 }
var  obj6 = { name:'flx6',age:600 }


那如果当前系统是用户录入系统，需要创建1万个用户，且用户的变量不止name,age,甚至变量数可能有10多个的场景下。一直粘贴不是一个很好的解决思路。


这种场景下，我们可以使用构造器模式
*/

funciton CreatePerson(age,name,sex,address,email,level,dept){
   this.age = age;
   this.name= name;
   this.sex= sex;
   this.address= address;
   this.email= email;
   this.level= level;
   this.dept= dept;
}


//  很显然这种场景下，构造器模式比语法糖创建起来省事的多
const obj1 = new CreatePerson(100,'flx',0,'青岛','65655@qq.com',0,1)
const obj2 = new CreatePerson(1002,'flx2',02,'青岛2','65655@qq.com2',02,12)

二 原型模式

在构造器的前提下，为了节省方法占用的内存，使用了原型模式

/*
在使用构造器场景下，如果构造方法里面有函数，这个时候没new 一次，函数就会开辟一次空间。在这种场景下，出现了原型模式
*/

funciton CreatePerson(age,name,sex,address,email,level,dept){
   this.age = age;
   this.name= name;
   this.sex= sex;
   this.address= address;
   this.email= email;
   this.level= level;
   this.dept= dept;
   this.say:function(){
      console.log('Holy shit')
   }
}


// 在这种场景下，每创建一次，就会为say()函数开辟一次空间，造成了空间浪费
const obj1 = new CreatePerson(100,'flx',0,'青岛','65655@qq.com',0,1);
obj1.say()
const obj2 = new CreatePerson(1002,'flx2',02,'青岛2','65655@qq.com2',02,12)
obj2.say()








/*
所谓的原型模式，就是把方法挂原型上
*/
 funciton CreatePerson(age,name,sex,address,email,level,dept){
   this.age = age;
   this.name= name;
   this.sex= sex;
   this.address= address;
   this.email= email;
   this.level= level;
   this.dept= dept;
}

CreatePerson.prototype.say = function(){
  console.log('Holy shit')
}

// 在这种场景下，say()函数只开辟一次空间，代码可以复用
const obj1 = new CreatePerson(100,'flx',0,'青岛','65655@qq.com',0,1);
obj1.say()
const obj2 = new CreatePerson(1002,'flx2',02,'青岛2','65655@qq.com2',02,12)
obj2.say()

三 Class类的概念

可以理解成构造函数的语法糖

/*
使用构造函数
*/
funciton CreatePerson(age,name,sex,address,email,level,dept){
   this.age = age;
   this.name= name;
   this.sex= sex;
   this.address= address;
   this.email= email;
   this.level= level;
   this.dept= dept;
}

CreatePerson.prototype.say = function(){
  console.log('Holy shit')
}

/*
使用class
*/
class  CreatePerson{
   // constructor方法是类的默认方法，通过new命令生成对象实例时，自动调用该方法。 
   constructor(age,name,sex,address,email,level,dept) {
     this.age = age;
     this.name= name;
     this.sex= sex;
     this.address= address;
     this.email= email;
     this.level= level;
     this.dept= dept;
  }
  say(){
    console.log('holy shit')
  }
}

/*
class 中其他概念：

1  getter、setter
在类的内部可以使用get和set关键字，对某个属性设置存取函数，拦截属性的存取行为。
*/

class MyNumber{
    constructor(num){
        this.num=num
    }
    get value(){
        return this.num
    }
    set value(val){
        this.num=val+1
    }
}
var num =new MyNumber()
num.value=3
console.log(num.value)  //4

/*
class 中其他概念：

2 属性表达式
*/
const MYPROPERTY = 'myProperty'
class MyNumber{
    constructor(num){
        this.num=num
    }
    [MYPROPERTY](){
      console.log('this is myProperty')
    }
}
var num =new MyNumber()
num[MYPROPERTY]()   //  this is myProperty

/*
class 中其他概念：

3 静态方法：
3.1只能通过类来调用，不能被实例调用
3.2如果静态方法包含this关键字，这个this指的是类，而不是实例。
3.3 父类的静态方法，可以被子类继承。
*/
class MyNumber{
    constructor(num){
        this.num=num
    }
    static myMethod(){
      console.log('this is myMethod')
    }
}

MyNumber.myMethod()  //  this is myMethod
var num =new MyNumber()
num.myMethod()  //  TypeError:num.myMethod is not a function




/*
父类的静态方法，可以被子类继承。
*/
class Father{
    constructor(num){
        this.num=num
    }
    static myMethod(){
      console.log('this is myMethod')
    }
}
class Child extends Father{
}
 
Child.myMethod() // 'this is myMethod'