码迷,mamicode.com
首页 > 编程语言 > 详细

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

时间:2019-12-30 09:31:06      阅读:74      评论:0      收藏:0      [点我收藏+]

标签:func   博客   联系我们   web   前端开发   console   父类   lease   extends   

技术图片

作者 | 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中的面向 “对象”

标签:func   博客   联系我们   web   前端开发   console   父类   lease   extends   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!