ES6基础-ES6 class

作者 | Jeskson

来源 | 达达前端小酒馆

ES - Class

类和面向对象：

面向对象，即万物皆对象，面向对象是我们做开发一种的方式，开发思维，面向对象的思维中万物皆对象，以人作为例子，它的特性有哪些。比如有姓名，性别，出生年月，身高等，还有人的行为，为吃饭，睡觉。特性和行为组合起来就成为人类，特性和行为都是人都有的，通过这些不同的特性和行为给不同的值，构成不同的人。

使用类进行编程，是可以降低维护成本，类的封装性是非常强的，很多情况下，类和业务是低耦合，使用类可以让代码高度复用，类是具有继承的特性的，所以类需要扩充，是不需要修改自身的，就可进行扩展，类的使用降低了设计成本，使用简单。

那么什么是类与对象，讲解ES6中类的特性，类的继承，Babel，基于流程控制的形变类实现。

什么是类与对象以及它们之间的关系

封装的思想

(function() {
 let snake = []; // 存放
 let food = { x: 0, y: 0 }; // 食物
 function move() {
  // 移动
 }
 function getFood() {
  // 是否吃到食物
 }
 function putFood() {
  // 放置食物
 }
 function gameover() {
  // 判断游戏结束
 }
 function init() {
  // 入口函数
  // 初始化
 }
 start();
})();
class Car {
 // 构造函数
 constructor(...args) {
  console.log(args);
 }
}
new Car('蓝色', 2)
class Car {
 constructor(wheel, color, length, width) {
  this.whell = wheel;
  this.color = color;
  this.length = length;
  this.width = width;

  this.speed = 0; // 实速
  }
  // 加速
  speedUp() {
   this.speed += 1;
  }
 }
 const car = new Car(2, '#000', 23, 45);
 console.log(car.color);
 console.log(car.spedd);
 car.speedUp(); // 加速
 console.log(car);

三大基本特性：多态，继承，封装。

多态，同一个接口，有不同的表现。

音乐播放器类

class AudioPlayer {
 constructor(container) {
  this.container = document.querySelector(container);
  this.songsList = []; // 歌单列表
  this.dom = null; // 用于存放dom
  this.audio = new Audio();
  this.status = 0;

  this.getSongs();
  this.createElement();

  this.bindEvents();
  this.render();
 }

 getSongs() {
  this.songsList = [
  {
   cover: '',
   url: .mp3,
   singer: {},
   name: ''
  }
 ];
  }

   createElement() {
    const div = document.createElement('div');
    div.innerHTML = `
     <div>播放按钮</div>
     <div>进度条</div>
     `

     this.dom = div;
   }

   bindEvents() {
    this.div.querySelector('.btn').addEventListener('click',()=>{
     console.log('开始播放');
    })
   }

   render() {
    this.container.appendChild(this.dom);
   }
 }

静态方法与静态属性

静态属性和静态方法，getter与setter，类的表达式，name属性与New.target属性，es5中模拟类。

类中的静态属性与静态方法，有两个特点：

不会被类的实例所拥有的属性和方法，只有类自身拥有；只能通过类调用。

用static关键字去声明一个静态方法

class Car {
 static totalCar = 0;

 constructor() {
  this.speed = 0;

  this.errors = 0;
 }
 speedUp() {
  this.speed += 1;
 }

 // 自检
 check() {
  console.log('开始');
  if(this.errors === 0){
   console.log('this');
  }
 }

 // 工厂
 static checker() {
  console.log('haha');
 }
 static repair(car) {
  console.log('da');
 }
}
const car = new Car();
car.checker();

Car.repair(car);

Car.repair('1号车');
Car.属性名 = 属性值;
class Person {
}
Person.format = programmer => {
programmer.haveGirlFriend = true;
programmer.hair = true;
};

class Programmer {
 constructor() {
 this.haveGirlFriend = false;
 this.hair = false;
}
}
const programmer = new Programmer();
console.log(programmer);

类表达式：

const Person = class P {
 constructor() {
  console.log('dada');
 }
}

new Person();

函数表达式：

const a = function() {
}

函数声明：

function a() {
}

getter与setter

getter,setter
类似于给属性提供钩子
在获取属性值和设置属性值的时候做一些额外的事情

ES5 getter/setter

在对象字面量中书写get/set方法
Object.definedProperty

const obj = {
 _name: '',
 get name() {
  return this._name;
 },
 set name(val) {
  this._name = val;
 }
}

obj.name = 3;

Object.definedProperty

var obj = {
 _name: ''
};

Object.definedProperty(obj, 'age', {
 value: 12,
 enumerable: true
});

var i;
for(i in obj) {
 console.log(i);
}

console.log(obj);
var obj = {
 _name: ''
};

Object.defineProperty(obj, 'name', {
 get: function() {
  console.log('正在访问name');
 },
 set: function(val) {
  console.log('正在修改');
  this._name = val;
 }
});
class Person {
 constructor() {
  this._name = '';
 }
 get name() {
  console.log('getname);
  return `名字${this._name}`;
 }
 set name(val) {
  console.log('name');
  this._name = val;
 }
}

const person = new Person();
person.name = '炸';

console.log(person.name);
class AudioPlayer {

 constructor() {
  this._status = 0;

  this.status = 0;
 }

 get status() {
  return this._status;
 }

 set status(val) {
  const StatusMap = {
   0: '暂停',
   1: '播放',
   2: '加载中'
  };
  document.querySelector('#app. play-btn').innerText = StatusMap[val];
  this._status = val;

 }

 }

name属性与new.target属性

class Person {

}

console.log(Person.name);

const da = class d {

}

console.log(da.name);

class Car {
 constructor() {
  console.log(new.target);
 }
}

new Car();
function Car() {
 if(new target !== Car) {
  throw Error('使用new调用car');
 }
}

new Car();
function Car() {
 if(!(this instanceof Car)) {
  throw Error('new');
 }
}
new Car();

使用ES5模拟类

// 构造函数
class Car {
 constructor() {
 }
}

function Car() {
}
new Car();
function Person(name, age) {
 this.name = name;
 this.age = age;
}
new Person('张三', 12);

创建一个空的对象，把构造函数的prototype属性作为空对象的原型，this赋值为这个空对象，执行函数，如果函数没有返回值，则返回this

function Constructor(fn, args) {
 var _this = Object.create(fn.prototype);
 fn.apply(_this, args);
}
function Constructor(fn, args) {
 var _this = Object.create(fn.prototype);
 var res = fn.apply(_this, args);
 return res ? res : _this;
}
function Person(name, age) {
 this.name = name;
 this.age = age;
}
Person.prototype.say = function() {
 console.log('dada' + this.name);
}
var person = Constructor(Person, ['da', 12]);

console.log(person);
// 重载
class SimpleCalc {
 addCalc(...args) {
  if(args.length === 0) {
   return this.zero();
  }
  if(args.length === 1){
   return this.onlyOneArgument(args);
  }
  return this.add(args);
 }
  zero() {
   return 0;
  }
  onlyOneArgument() {
   return args[0];
  }
  add(args) {
   return args.reduce((a,b) => a+b,0);
  }
}

function post(url, header, params) {
 if(!params) {
  params = header;
  header = null; // undefined
 }
}
post('http:...' , {
a:1,
b:2
});

ES5中的继承

// 利用构造函数
function P() {
 this.name = 'parent';
 this.gender = 2;
 this.say = function() {
  console.log('ddd');
 }
}

P.prototype.test = function() {
 console.log('da');
}

function C() {
 P.call(this);
 this.name = 'child',
 this.age = 11;
}

C.prototype = new P();

var child = new C();
child.say();

Babel是一个JavaScript编译器

const add = (a,b) => a+b;
alert(add(1,2));
alert(add(3,4));

class Person {
 static aa = 1;
 bb = 2;

 static A() {
  alert('b');
 }
 constructor() {
 }
}
class Car {
 static total_car = 0;
 color='#000';
 constructor(color) {
  Car.total_car += 1;
  this.color = color;
 }
}
new Car();
new Car();
new Car();
console.log(Car.total_car);

?? 不要忘记留下你学习的脚印 [点赞 收藏 评论]

作者Info：

【作者】：Jeskson

【原创公众号】：达达前端小酒馆。

【转载说明】：转载请说明出处，谢谢合作！~

关于目前文章内容即涉及前端，PHP知识点，如果有兴趣即可关注，很荣幸，能被您发现，真是慧眼识英！也感谢您的关注，在未来的日子里，希望能够一直默默的支持我，我也会努力写出更多优秀的作品。我们一起成长，从零基础学编程，将 Web前端领域、数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。分享 Web 前端相关的技术文章、工具资源、精选课程、热点资讯。


若本号内容有做得不到位的地方（比如：涉及版权或其他问题），请及时联系我们进行整改即可，会在第一时间进行处理。

请点赞！因为你们的赞同/鼓励是我写作的最大动力！

欢迎关注达达的CSDN！

这是一个有质量，有态度的博客

原文地址：https://www.cnblogs.com/dashucoding/p/11964827.html

时间： 2024-10-16 07:37:47

ES6基础-ES6 class的相关文章

vue准备知识-es6基础

目录 知识 let和const 模板字符串 箭头函数 对象的单体模式 面向对象 一.知识 http://www.cnblogs.com/majj/https://www.cnblogs.com/majj/category/1216624.html 阮一峰 es6 http://es6.ruanyifeng.com/ https://www.bootcdn.cn/ http://www.cnblogs.com/majj/ 前端 VUE 博客每个人都要去写! html(语义化,除了语义,其他得都没什

ES6基础整理（1）

刚开始用vue,很多时候我们都会把ES6这位大兄dei加入我们的技术栈中.但是ES6那么多那么多特性,我们真的需要全部都掌握吗?掌握好常用的.有用的这个可以让我们的开发快速起飞. 接下来我们就聊聊ES6基础常用的知识的总结. es6中的声明变量的方式: // let // 1. let声明变量不可以进行重复声明 // 2. let声明的变量有块级作用域 // const // 声明的叫做常量 // 1. const声明变量不可以进行重复声明 // 2. const声明页有块级作用域 // 3.

react案例-&gt;新闻移动客户端--（react+redux+es6+webpack+es6的spa应用）

今天分享一个react应用,应在第一篇作品中说要做一个react+redux+xxx的应用.已经做完一部分,拿出来分享.github地址为:点我就可以咯~ 这里实现了一个新闻移动站的spa.本来想写pc端的,但是比较懒,而且因为主要是react的项目,关于css和布局的细节就是糊弄人的了.T.T,这里只说关于这个项目的js部分. 这里的功能很简单,有一下几点: 1,按”心“排序 当比上一个多了,就会排到前面. 2.评论部分 新闻的评论部分类似qq空间的评论 当然,也可以点击新闻回复的哦. ===

从零开始学 Web 之 ES6（六）ES6基础语法四

大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:http://www.cnblogs.com/lvonve/ CSDN:https://blog.csdn.net/lvonve/ 在这里我会从 Web 前端零基础开始,一步步学习 Web 相关的知识点,期间也会分享一些好玩的项目.现在就让我们一起进入 Web 前端学习的冒险之旅吧! 一.字符串的扩展

ES6 基础学习

ECMAScript 6 标准入门 一.let和const let命令 let命令,用来声明变量.它的用法类似于var,但是所声明的变量,只在let命令所在的代码块内有效:是块级作用域,且let不允许在相同作用域内,重复声明同一个变量. { let a = 12; } console.log(a); //Uncaught ReferenceError: a is not defined { let a = 12; let a = 22; } console.log(a); //Uncaught

ES6基础知识（Reflect）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" con

es6基础-函数的新特性

es6函数新特性,在原来es5函数基础上增加了新的函数扩展,包括传参,默认值,扩展运算符... 函数参数 函数参数默认值 函数参数默认值的执行顺序是随意的 只有未传递参数,或者参数为undefined,才是使用默认值 function ajax( url,method='get', timeout=2000,callback={}){} ajax('/url') // 使用默认的请求方式method.timeout和callback ajax('/url', 'post') // 使用默认的请求

ES6基础笔记（待续）

ES61,for...of 循环, 使用范围:数组.Set和Map结构.某些类似数组的对象(比如arguments对象.DOMNodeList对象).后文的Generator对象,以及字符串 数组,类数组,返回键值for (let value of arr) Set,返回值 for (let value of set) Map,返回键值对的数组for (var [name,value] of set) 对象,必须部署了iterator接口后才能使用,一种解决方法使用Object.keys(obj

es6 基础学习一 let

1.基本用法 let声明的变量,只在let命令所在的代码快有效: { let a = 1; var b = 1; } b //1 a //referenceError: a is not defind ps: 说明es5没有块级作用域,导致if,for等循环语句声明的变量或变量赋值,外泄块级以外的环境.如: var i = 100; for(var i = 0; i < 10; i++){} i;//9 而es5通常的做法是,利用匿名函数来解决: var i = 100; (function()