作者|来源|DadaFront-EndTavernES-Class类和面向对象：面向对象，也就是一切都是对象，面向对象是我们做开发的一种方式，开发思维，面向对象在我的思维中一切都是对象，以人为例，它有什么特点。比如有姓名、性别、出生日期、身高等，还有人的行为，比如吃饭、睡觉等。特征和行为的结合成为人。特征和行为都是人类共有的。这些不同的特征和行为赋予了不同的价值观，从而形成了不同的人。使用类进行编程可以降低维护成本。类封装性很强。在很多情况下，类和业务是低耦合的。使用类可以使代码高度可重用。类具有继承的特点，所以类如果需要扩展，不需要修改自己就可以扩展。类的使用降低了设计成本并且易于使用。那么什么是类和对象，讲解ES6中类的特点，类继承，Babel，以及基于流程控制的变形类的实现。类和对象之间封装的思想是什么以及它们之间的关系(function(){letsnake=[];//storageletfood={x:0,y:0};//foodfunctionmove(){//移动}functiongetFood(){//是否吃食物}functionputFood(){//放食物}functiongameover(){//判断游戏结束}functioninit(){//入口function//初始化}start();})();classCar{//构造函数constructor(...args){console.log(args);}}newCar('blue',2)classCar{constructor(wheel,color,length,width){this.wheel=wheel;this.color=颜色；this.length=长度；this.width=宽度；这个.speed=0;//实际速度}//加速度speedUp(){this.速度+=1；}}constcar=newCar(2,'#000',23,45);控制台日志（汽车颜色）；控制台日志（car.spedd）；汽车.speedUp();//加速console.log(car);三个基本特征：多态、继承、封装。多态，同样的接口，有不同的表现。音乐播放器类类AudioPlayer{constructor(container){this.container=document.querySelector(container);this.songsList=[];//歌曲列表this.dom=null;//用于存储domthis.audio=newAudio();这个.status=0;this.getSongs();这个.createElement();这个.bindEvents();这个。渲染（）；}getSongs(){this.songsList=[{cover:'',url:.mp3,singer:{},name:''}];}createElement(){constdiv=document.createElement('div');div.innerHTML=`
播放按钮
进度条
`this.dom=div;}bindEvents(){this.div.querySelector('.btn').addEventListener('click',()=>{console.log('startplay');})}render(){this.container.appendChild(this.dom);}}静态方法和静态属性静态属性和静态方法、getter和setter、类表达式、name属性和New.target属性、es5中的模拟类。类中的静态属性和静态方法有两个特点：不属于类实例的属性和方法只属于类本身；他们只能通过类调用。使用static关键字声明一个静态方法classCar{statictotalCar=0;constructor(){this.speed=0;这个。错误=0；}speedUp(){this.speed+=1;}//自检check(){console.log('start');if(this.errors===0){console.log('this');}}//factorystaticchecker(){console.log('哈哈');}staticrepair(car){console.log('da');}}constcar=newCar();car.checker();Car.repair(car);Car.repair('1号车');Car.propertyname=propertyvalue;classPerson{}Person.format=程序员=>{programmer.haveGirlFriend=true;programmer.hair=true;};classProgrammer{constructor(){this.haveGirlFriend=false;这个.hair=false;}}constprogrammer=newProgrammer();控制台日志（程序员）；类表达式：constPerson=classP{constructor(){console.log('dada');}}新人（）;函数表达式：consta=function(){}函数声明：functiona(){}getter和settergetter，setter类似于ES5中获取属性值和设置属性值时为属性提供钩子来做一些额外的事情Getter/setter在对象字面量中写入get/set方法Object.definedPropertyconstobj={_name:'',getname(){returnthis._name;},设置名称(val){this._name=val;}}obj.name=3;Object.definedPropertyvarobj={_name:''};Object.definedProperty(obj,'age',{value:12,enumerable:true});vari;for(iinobj){console.log(i);}console.log(obj);varobj={_name:''};Object.defineProperty(obj,'name',{get:function(){console.log('正在访问name');},set:function(val){console.log('正在修改');this._name=val;}});classPerson{constructor(){this._name='';}getname(){console.log('getname);返回`名字${this._name}`；}setname(val){console.log('name');this._name=val;}}constperson=newPerson();person.name='炸';console.log(person.name);classAudioPlayer{constructor(){this._status=0;这个.status=0;}getstatus(){returnthis._status;}setstatus(val){constStatusMap={0:'暂停',1:'播放',2:'加载中'};document.querySelector('#app.play-btn').innerText=StatusMap[val];this._status=val;}}name属性与new.target属性classPerson{}console.log(Person.name);constda=classd{}console.log(da.name);classCar{constructor(){console.log(new.target);}}newCar();functionCar(){if(newtarget!==Car){throwError('callingcarwithnew');}}newCar();functionCar(){if(!(thisinstanceofCar)){throwError('new');}}新汽车（）;使用ES5模拟类//构造函数类Car{constructor(){}}functionCar(){}newCar();functionPerson(name,age){this.name=name;this.age=age;}newPerson('张三',12);创建一个空对象，使用constructor的prototype属性作为空对象的原型，将this赋值给空对象，执行Function，如果函数没有返回值，返回thisfunctionConstructor(fn,args){var_this=Object.create(fn.prototype);fn.apply(_this,args);}函数构造函数(fn,args){var_this=Object.create(fn.prototype);varres=fn.apply(_this,args);返回资源？res:_this;}functionPerson(name,age){this.name=name;这个。年龄=年龄；}Person.prototype.say=function(){console.log('dada'+this.name);}varperson=Constructor(Person,['da',12]);console.log(person);//加载classSimpleCalc{addCalc(...args){if(args.length===0){returnthis.zero();}if(args.length===1){returnthis.onlyOneArgument(args);}返回this.add(args);}零（）{返回0；}onlyOneArgument(){返回参数[0];}add(args){returnargs.reduce((a,b)=>a+b,0);}}functionpost(url,header,params){if(!params){params=header;标头=空；//undefined}}post('http:...',{a:1,b:2});ES5中的继承//利用构造函数P(){this.name='parent';这个。性别=2；this.say=function(){console.log('ddd');}}P.prototype.test=function(){console.log('da');}functionC(){P.call(this);this.name='child',this.age=11;}C.prototype=newP();varchild=newC();child.say();Babel是一个JavaScript编译器constadd=(a,b)=>a+b;alert(add(1,2));alert(add(3,4));classPerson{staticaa=1;bb=2;静态A(){警报('b');}constructor(){}}classCar{statictotal_car=0;颜色='#000';构造函数（颜色）{汽车。total_car+=1;this.color=颜色；}}newCar();newCar();newCar();console.log(Car.total_car);??别忘了留下你的学习足迹【点赞收藏评论】作者信息：【作者】：Jeskson【原创公众号】：达达前端小酒馆【转载说明】：转载请注明出处，谢谢合作！~本篇内容涉及前端和PHP知识点。有兴趣的可以关注一下。很荣幸被你发现。真是有见地！感谢您的关注。在以后的日子里，希望大家一直默默支持我，我会努力写出更多优秀的作品。我们一起成长，从零开始学习编程，将Web前端领域、数据结构与算法、网络原理，通俗易懂的呈现给小伙伴们。分享Web前端相关的技术文章、工具资源、精选课程、热点资讯。如本账号内容有问题（例如：涉及版权或其他问题），请及时联系我们进行整改，我们会尽快处理。请喜欢它！因为您的认可/鼓励是我写作最大的动力！欢迎来到达达的CSDN！这是一个有品质有态度的博客
