一篇文章带你了解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)
}

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

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

非常有用！！！