file

作者 | Jeskson

来源 | 达达前端小酒馆

安装webpack，打包工具，安装webpack-dev-server，安装babel解析es6语法，初始化npm环境。

npm install webpack webpack-cli --save-dev

webpack.dev.config.js

module.exports = { entry: './src/index.js', output: {  path: __dirname,  filename: './release/bundle.js' }}

index.js

class Person { constructor(name) {  this.name = name } getName() {  return this.name }}let p = new Person('dada')console.log(p.getName());

什么是面向对象？

面向对象的三要素：继承，封装，多态。

// 类class People { constructor(name, age) {  this.name = name;  this.age = age; } eat() {  console.log('eat'); } speak() {  console.log('speak'); }}

对象（实例）

// 创建实例let dada = new People('dada', 12);dada.eat();dada.speak();// 创建实例let tudi = new People('da1', 12);tudi.eat();tudi.speak();

继承，子类继承父类，封装，数据的权限和保密，多态，同一接口不同实现。

继承的案例，父类

// 父类class People { constructor(name,age) {  this.name = name  this.age = age } eat() {  console.log('eat'); } speak() {  console.log('speak'); }}

子类继承父类

class Student extends People {  constructor(name, age, number) {  super(name, age);  this.number = number; } study() {  console.log('study'); }}

实例

let dada = new Student('dada',12,'web');dada.study();console.log(dada.number);dada.eat();

父类是公共的，不仅服务与一个子类，继承可以将公共方法抽离出来，提高代码的复用性，减少多余的代码重复。

封装

public 完全开放，protected 对子类开放，private 对自己开发

父类

class People { name  age protected weight constructor(name, age) {  this.name = name  this.age = age  this.weight = 12 } eat() {  console.log('eat'); } speak() {  console.log('speak'); }}

class Student extends People {  number private girlfriend constructor(name, age, number) {  super(name, age, number) {   super(name, age)   this.number = number   this.girlfriend = 'dada'  }  study() {   console.log('study');  }  getWeight() {   console.log('getWeight');  } }}

减少耦合，不该外露的不外露，利于数据，接口的权限管理。

多态

class People { constructor(name) {  this.name = name } saySomething() { }}class A extends People { constructor(name) {  super(name); } saySomething() {  console.log('dada'); }}

class B extends People { constructor(name) {  super(name) } saySomething() {  console.log('da1'); }}let a = new A('a');a.saySomething();let b = new B('b');b.saySomething();

JS应用案例

class jQuery { constructor(selector) {  let slice = Array.prototype.slice  let dom = slice.call(document.querySelectorAll(selector))  let len = dom ? dom.length : 0  for(let i=0; i<len; i++){   this[i] = dom[i]  }  this.lenght = len;  this.selector = selector || '' } append(node){ } addClass(name){ } html(data){ }}

window.$ = function(selector) { return new jQuery(selector)}var $p = $('p');console.log($p)console.log($p.addClass);

index.js

class jQuery { // jquery如何使用面向对象 constructor(selector) {  let slice = Array.prototype.slice  let dom = slice.call(document.querySelectorAll(seletor))  let len = dom ? dom.length : 0  for(let i=0; i<len; i++){   this[i] = dom[i]  }  this.length = len  this.seletor = seletor || '' } append(node) { } addClass(name) { } html(data){ }}window.$ = function(selector){ return new jQuery(selecor)}

在博客平台里，未来的路还很长，也希望自己以后的文章大家能多多支持，多多批评指正，我们一起进步，一起走花路。

非常感谢读者能看到这里，如果这个文章写得还不错，觉得「达达」我有点东西的话，觉得我能够坚持的学习，觉得此人可以交朋友的话， 求点赞? 求关注❤️ 求分享? 对暖男我来说真的

非常有用！！！

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

作者Info：

【作者】：Jeskson
【原创公众号】：达达前端小酒馆。
【福利】：公众号回复 “资料” 送自学资料大礼包（进群分享，想要啥就说哈，看我有没有）！
【转载说明】：转载请说明出处，谢谢合作！~

大前端开发，定位前端开发技术栈博客，PHP后台知识点，web全栈技术领域，数据结构与算法、网络原理等通俗易懂的呈现给小伙伴。谢谢支持，承蒙厚爱！！！

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

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

欢迎关注达达的CSDN！

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

前端技术栈

原著是一个有趣的人,若有侵权,请通知删除