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

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！

版權聲明： 本部落格所有文章除特别聲明外，均采用 CC BY-NC-SA 3.0 許可協定。轉載請注明出處！