一篇文章帶你了解JavaScript中的面向 「對象」

• 2020 年 1 月 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！

這是一個有質量，有態度的博客

前端技術棧