1. 首页
  2. web前端

一篇文章带你了解JavaScript中的面向 “对象”

一篇文章带你了解JavaScript中的面向 “对象”

作者 | 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!

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

一篇文章带你了解JavaScript中的面向 “对象”

原创文章,作者:utf-8

本文来自投稿,不代表 怪小克 立场,如若转载,请注明出处:https://wangchaoke.cn/?p=2120

本站发布的内容若侵犯到您的权益,请邮件联系 860095347@qq.com 删除,我们将及时处理!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

联系我们

860-095-347

在线咨询:点击这里给我发消息

邮件:860095347@@qq.com

工作时间:周一至周五,9:30-18:30,节假日休息

QR code