前端-JavaScript中的class

類是用于創建對象的模板。JavaScript中生成對象實例的方法是通過構造函數，這跟主流面向對象語言（java，C#）寫法上差異較大，如下：

function Point(x, y) {
  this.x = x;
  this.y = y;
}

Point.prototype.toString = function () {
  return '(' + this.x + ', ' + this.y + ')';
};

var p = new Point(1, 1);

ES6 提供了更接近Java語言的寫法，引入了 Class（類）這個概念，作為對象的模板。通過class關鍵字，可以定義類。

如下：constructor()是構造方法，而this代表實例對象：

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

類的數據類型就是函數，它本身就是指向函數的構造函數：

// ES5 函數聲明
function Point() {
    //...
}

// ES6 類聲明
class Point {
  //....
  constructor() {
  }
}
typeof Point // "function"
Point === Point.prototype.constructor // true

在類里面定義的方法是掛到Point.prototype，所以類只是提供了語法糖，本質還是原型鏈調用。

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }

  toString() {
    return '(' + this.x + ', ' + this.y + ')';
  }
}

Point.prototype = {
  //....
  toString()
}
var p = new Point(1, 1);
p.toString() // (1,1)

類的另一種定義方式類表達式

// 未命名/匿名類
let Point = class {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
};
Point.name // Point

函數聲明和類聲明有個重要區別，函數聲明會提升，類聲明不會提升。

constructor()

constructor()方法是類的默認方法，new生成實例對象時會自動調用該方法。

一個類必須有constructor()方法，如果沒有顯式定義，引擎會默認添加一個空的constructor()。

constructor()方法默認返回實例對象（即this）。

class Point {
}

// 自動添加
class Point {
  constructor() {}
}

getter和setter

與 ES5 一樣，在類的內部可以使用get和set關鍵字，對某個屬性設置存值函數和取值函數，攔截該屬性的存取行為。

class User {
  constructor(name) {
    this.name = name;
  }

  get name() {
    return this.name;
  }

  set name(value) {
    this.name = value;
  }
}

this

類的方法內部的this，它默認指向類的實例，在調用存在this的方法時，需要使用 obj.method()方式，否則會報錯。

class User {
  constructor(name) {
    this.name = name;
  }
  printName(){
    console.log('Name is ' + this.name)
  }
}
const user = new User('jack')
user.printName() // Name is jack
const { printName } = user;
printName()     // 報錯 Cannot read properties of undefined (reading 'name')

如果要單獨調用又不報錯，一種方法可以在構造方法里調用bind(this)。

class User {
  constructor(name) {
    this.name = name;
    this.printName = this.printName.bind(this);
  }
  printName(){
    console.log('Name is ' + this.name)
  }
}
const user = new User('jack')
const { printName } = user;
printName()     // Name is jack

bind(this) 會創建一個新函數，并將傳入的this作為該函數在調用時上下文指向。

另外可以使用箭頭函數，因為箭頭函數內部的this總是指向定義時所在的對象。

class User {
  constructor(name) {
    this.name = name;
  }
  printName = () => {
    console.log('Name is ' + this.name)
  }
}
const user = new User('jack')
const { printName } = user;
printName()     // Name is jack

靜態屬性

靜態屬性指的是類本身的屬性，而不是定義在實例對象this上的屬性。

class User {
}

User.prop = 1;
User.prop // 1

靜態方法

可以在類里面定義靜態方法，該方法不會被對象實例繼承，而是直接通過類來調用。

靜態方法里使用this是指向類。

class Utils {
  static printInfo() {
     this.info();
  }
  static info() {
     console.log('hello');
  }
}
Utils.printInfo() // hello

關于方法的調用范圍限制，比如：私有公有，ES6暫時沒有提供，一般是通過約定，比如：在方法前面加下劃線_print()表示私有方法。

繼承

Java中通過extends實現類的繼承。ES6中類也可以通過extends實現繼承。

繼承時，子類必須在constructor方法中調用super方法，否則新建實例時會報錯。

class Point3D extends Point {
  constructor(x, y, z) {
    super(x, y); // 調用父類的constructor(x, y)
    this.z = z;
  }

  toString() {
    return super.toString() + '  ' + this.z ; // 調用父類的toString()
  }
}

父類的靜態方法，也會被子類繼承。

class Parent {
  static info() {
    console.log('hello world');
  }
}

class Child extends Parent {
}

Child.info()  // hello world

super關鍵字

在子類的構造函數必須執行一次super函數，它代表了父類的構造函數。

class Parent {}

class Child extends Parent {
  constructor() {
    super();
  }
}

在子類普通方法中通過super調用父類的方法時，方法內部的this指向當前的子類實例。

class Parent {
  constructor() {
    this.x = 1;
    this.y = 10
  }
  printParent() {
    console.log(this.y);
  }
  print() {
    console.log(this.x);
  }
}

class Child extends Parent {
  constructor() {
    super();
    this.x = 2;
  }
  m() {
    super.print();
  }
}

let c = new Child();
c.printParent() // 10
c.m() // 2

_proto_和prototype

初學JavaScript時，_proto_和prototype 很容易混淆。首先我們知道每個JS對象都會對應一個原型對象，并從原型對象繼承屬性和方法。

prototype 一些內置對象和函數的屬性，它是一個指針，指向一個對象，這個對象的用途就是包含所有實例共享的屬性和方法（我們把這個對象叫做原型對象）。
_proto_ 每個對象都有這個屬性，一般指向對應的構造函數的prototype屬性。

下圖是一些擁有prototype內置對象。

prototype

根據上面描述，看下面代碼

var obj = {} // 等同于 var obj = new Object()

// obj.__proto__指向Object構造函數的prototype
obj.__proto__ === Object.prototype // true 

// obj.toString 調用方法從Object.prototype繼承
obj.toString === obj.__proto__.toString // true

// 數組
var arr = []
arr.__proto__ === Array.prototype // true

對于function對象，聲明的每個function同時擁有prototype和__proto__屬性，創建的對象屬性__proto__指向函數prototype，函數的__proto__又指向內置函數對象（Function）的prototype。

function Foo(){}
var f = new Foo();
f.__proto__ === Foo.prototype // true
Foo.__proto__ === Function.prototype // true

繼承中的proto

類作為構造函數的語法糖，也會同時有prototype屬性和__proto__屬性，因此同時存在兩條繼承鏈。

子類的__proto__屬性，表示構造函數的繼承，總是指向父類。
子類prototype屬性的__proto__屬性，表示方法的繼承，總是指向父類的prototype屬性。

class Parent {
}

class Child extends Parent {
}

Child.__proto__ === Parent // true
Child.prototype.__proto__ === Parent.prototype // true

繼承實例中的proto

子類實例的__proto__屬性，指向子類構造方法的prototype。

子類實例的__proto__屬性的__proto__屬性，指向父類實例的__proto__屬性。也就是說，子類的原型的原型，是父類的原型。

class Parent {
}

class Child extends Parent {
}

var p = new Parent();
var c = new Child();

c.__proto__ === p.__proto__ // false
c.__proto__ === Child.prototype // true
c.__proto__.__proto__ === p.__proto__ // true

小結

JavaScript中的Class更多的還是語法糖，本質上繞不開原型鏈。歡迎大家留言交流。

lass屬性 - 定制化網頁設計的強大武器

在HTML中,Class屬性是一個非常強大而又靈活的工具。它可以讓您為網頁中的各種元素賦予獨特的樣式和功能,從而打造出與眾不同的視覺效果和交互體驗。本文將為您解密Class屬性的魔力,教您如何利用它來實現個性化的網頁設計。

1. Class屬性的基本用法

Class屬性允許您為HTML元素指定一個或多個類名。這些類名可以在CSS中定義樣式規則,從而影響元素的外觀。

<div class="header">
  <h1 class="title">歡迎來到我的網站</h1>
  <p class="description">這里是網站的簡介信息</p>
</div>

.header {
  background-color: #f2f2f2;
  padding: 20px;
}

.title {
  color: #333;
  font-size: 24px;
}

.description {
  color: #666;
  font-size: 16px;
}

2. Class屬性的進階用法

除了基本的樣式定制,Class屬性還可以用于更復雜的場景。您可以為同一個元素指定多個類名,實現更細致的樣式控制。

<button class="btn btn-primary">主要按鈕</button>
<button class="btn btn-secondary">次要按鈕</button>

.btn {
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

.btn-primary {
  background-color: #007bff;
  color: #fff;
}

.btn-secondary {
  background-color: #6c757d;
  color: #fff;
}

3. Class屬性與JavaScript的結合

Class屬性不僅可以用于樣式定制,還可以與JavaScript進行聯動,實現各種交互效果。您可以通過JavaScript動態地添加、修改或刪除元素的類名,從而改變它們的外觀和行為。

<div id="box" class="box">這是一個盒子</div>

const box = document.getElementById('box');

box.classList.add('active'); // 添加類名
box.classList.remove('box'); // 刪除類名
box.classList.toggle('hidden'); // 切換類名

4. Class屬性的最佳實踐

在使用Class屬性時,有幾個需要注意的最佳實踐:

類名要具有描述性,方便理解和維護
避免過多的類名,保持CSS規則的簡潔性
利用CSS預處理器如SASS/LESS來管理類名和樣式規則
結合BEM或OOCSS等命名方法論,提高代碼的可讀性和可維護性

總之,HTML Class屬性是一個非常強大的工具,它可以幫助您定制化網頁設計,打造出獨一無二的視覺效果和交互體驗。只要掌握好它的用法,相信您一定能創造出令人驚嘆的網頁作品。

用 jquery 可以很方便的操作div元素的class屬性的值，以實現各種炫彩的動態效果。這篇文章就來說一說，幾種使用 jq 來操作 div 元素class屬性的方法。

jq addClass() 方法

jq 的 addClass() 方法，可以向一個指定的 html 元素的 class 屬性中添加一個屬性值

示例：

<!--html代碼-->
<div id="mochu" class="div1"></div>
<script>
 $('#mochu').addClass('div2');
</script>

運行結果：

在線咨詢

上一篇：將富文本html內容轉換為純文本，并限制展示字數長度
下一篇：微信紅包封面引流+裂變，低成本引流10w+

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商