文档章节

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

达达前端
 达达前端
发布于 2019/12/30 07:58
字数 929
阅读 14
收藏 0

3 月,跳不动了?>>>

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!

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

前端技术栈

© 著作权归作者所有

达达前端
粉丝 4
博文 226
码字总数 368531
作品 0
广州
程序员
私信 提问
加载中

评论(0)

JavaScript深入系列15篇正式完结!

写在前面 JavaScript 深入系列共计 15 篇已经正式完结,这是一个旨在帮助大家,其实也是帮助自己捋顺 JavaScript 底层知识的系列。重点讲解了如原型、作用域、执行上下文、变量对象、this、闭...

大灰狼的小绵羊哥哥
2019/03/06
0
0
「译」javascript 的 12 个怪癖(quirks)

原文:12 JavaScript quirks 译文:「译」javascript 的 12 个怪癖(quirks) 译者:justjavac 实际上 javascript 是一个相当简洁的语言,但是也难免会有一些怪癖(quirks)。 本章是 javasc...

justjavac
2013/04/16
343
0
【面试需要】掌握JavaScript中的this,call,apply的原理

作者 | Jeskson 掘金 | https://juejin.im/user/5a16e1f3f265da43128096cb 2020年01月10日 前言,为什么要学习在掌握JavaScript中的this,call,apply,因为面试官会问啊!所以我们 必须掌握...

达达前端
01/10
0
0
基于原型的JavaScript继承 - 面向对象的JavaScript - JavaScript核心

源码: https://github.com/RobinQu/Programing-In-Javascript/blob/master/chapters/JavaScriptCore/ObjectOrientedJavascript/JavascriptPrototypalInheritance.md 原文: http://pij.rob......

RobinQu
2019/09/29
0
0
《JavaScript启示录》是写给谁的书?

本书无关于JavaScript设计模式,也无关于JavaScript面向对象代码实现。本书的写作目的也不是鉴别JavaScript语言特点的好坏。本书并不是一本完整的参考指南。它面向的读者人群并不是编程新手或...

生气的散人
2014/02/11
1.2K
5

没有更多内容

加载失败,请刷新页面

加载更多

开源:从“复兴”走向“商业化”

在美国版“知乎”Quora上搜“Open Source(开源)”,出来第一条问题是: “Linux的失败真的是因为开源吗?”。其中一个回答给我很多启发: “有些人把安卓和Chrome OS的成功归结于Linux开源...

编辑部的故事
18分钟前
15
0
JavaScript等同于printf / String.Format - JavaScript equivalent to printf/String.Format

问题: I'm looking for a good JavaScript equivalent of the C/PHP printf() or for C#/Java programmers, String.Format() ( IFormatProvider for .NET). 我正在寻找一个等效于C / PHP p......

javail
今天
27
0
什么是Android上的“上下文”? - What is 'Context' on Android?

问题: In Android programming, what exactly is a Context class and what is it used for? 在Android编程中, Context类到底是什么?它的用途是什么? I read about it on the developer......

技术盛宴
今天
26
0
OkHttp配置HTTPS访问+服务器部署

1 概述 OkHttp配置HTTPS访问,核心为以下三个部分: sslSocketFactory() HostnameVerifier X509TrustManager 第一个是ssl套接字工厂,第二个用来验证主机名,第三个是证书信任器管理类.通过OkHtt...

氷泠
今天
20
0
华为P40发布:搭载HMS硬刚谷歌,未涨价抢全球高端机市场

  文连线 Insight,作者向阳,编辑水笙   3 月 26 日晚,华为消费者业务 CEO 余承东登上台,以熟悉的英文口音开启了华为发布会,他说,“这就是我们的 P40 系列。”   以往华为P系列通...

水果黄瓜
今天
30
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部