Adakah kelas kelas sintaks es6?

Kelas kelas ialah sintaks es6 dan merupakan ciri baharu es6. Dalam ES6, kata kunci kelas diperkenalkan untuk mentakrifkan "kelas" dengan cepat, tetapi intipati kelas adalah fungsi; ia boleh dianggap sebagai gula sintaksis, menjadikan penulisan prototaip objek lebih jelas dan lebih seperti sintaks pengaturcaraan berorientasikan objek; . Gunakan kaedah kelas untuk menentukan kelas "Orang kelas{//pengisytiharan kelas}" atau "const Person=class{//expresi kelas}".

Persekitaran pengendalian tutorial ini: sistem Windows 7, ECMAScript versi 6, komputer Dell G3.

Kelas kelas ialah sintaks es6 dan merupakan ciri baharu es6.

Dalam ES6, kata kunci kelas telah diperkenalkan untuk mentakrifkan "kelas" dengan cepat.

Dalam JS, intipati "kelas" ialah fungsi, yang boleh dianggap sebagai gula sintaksis, menjadikan penulisan prototaip objek lebih ringkas dan jelas, lebih seperti sintaks pengaturcaraan berorientasikan objek.

Memahami kelas definisi kelas

Kami akan mendapati bahawa mencipta kelas mengikut borang pembina sebelumnya bukan sahaja terlalu serupa dengan menulis biasa function , dan kod itu tidak mudah difahami.

Dalam piawaian ES6 (ECMAScript2015) baharu, kata kunci kelas digunakan untuk mentakrifkan kelas secara langsung tetapi kelas pada dasarnya adalah gula sintaksis untuk pembina dan rantaian prototaip yang dinyatakan sebelum ini pembina dan rantai prototaip sebelumnya akan membantu kita memahami konsep dan hubungan warisan kelas;

Jadi, bagaimana menggunakan kelas untuk menentukan kelas? –Anda boleh menggunakan dua cara untuk mengisytiharkan kelas: pengisytiharan kelas dan ekspresi kelas; > Mari kita kaji beberapa ciri kelas: Anda akan mendapati bahawa ia sebenarnya konsisten dengan ciri pembina kami

class Person{
    //类声明
}

const Person=class{
    //类表达式
}

Pembina kelas

Jika; kita mahu menghantar beberapa parameter kepada kelas apabila mencipta objek, apakah yang perlu kita lakukan pada masa ini?

console.log(Person.prototype)
console.log(Person.prototype.__proto__)//Object null 
console.log(Person.prototype.constructor)//Person
console.log(typeof Person) // function

var p = new Person()
console.log(p.__proto__ === Person.prototype) // true

Setiap kelas boleh mempunyai pembina (kaedah) sendiri,

Nama kaedah ini ialah pembina tetap; kelas, pembina kelas ini akan dipanggil;

Setiap kelas hanya boleh mempunyai satu pembina

Jika ia mengandungi berbilang pembina, pengecualian akan dilemparkan ;

• Apabila kami mengendalikan kelas melalui kata kunci baharu, fungsi pembina ini akan dipanggil dan operasi berikut akan dilakukan:
1. Cipta yang baharu dalam Objek memori (objek kosong) ;
• 2. Atribut [[prototaip]] di dalam objek ini akan ditetapkan sebagai atribut prototaip kelas
• 3 ini di dalam pembina.
4. Jalankan kod dalaman pembina (kod badan fungsi);

5 >

• Kaedah contoh kelas
• Atribut yang kami takrifkan di atas semuanya diletakkan terus pada ini, yang bermaksud ia diletakkan pada objek yang dicipta Dalam objek baharu:
• Seperti yang kami katakan sebelum ini, sebagai contoh kaedah, kami berharap untuk meletakkannya pada prototaip supaya ia boleh dikongsi oleh berbilang kejadian; kaedah kelas
• Apabila kita bercakap tentang deskriptor harta objek sebelum ini, kami menyebut bahawa objek boleh menambah fungsi setter dan getter Ya, maka kelas juga mungkin:

Kaedah statik kelas

Kaedah statik biasanya digunakan untuk mentakrifkan kaedah yang dilaksanakan secara langsung menggunakan kelas Tidak perlu ada Contoh kelas ditakrifkan menggunakan kata kunci statik :

Warisan kelas ES6 - dilanjutkan

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }

  // 普通的实例方法
  // 创建出来的对象进行访问
  // var p = new Person()
  // p.eating()
  eating() {
    console.log(this.name + " eating~")
  }

  running() {
    console.log(this.name + " running~")
  }
}

Kami telah menghabiskan banyak masa membincangkan ES5 Walaupun mekanisme pewarisan yang agak memuaskan akhirnya dicapai menggunakan skim pewarisan , prosesnya masih sangat menyusahkan. Kata kunci lanjutan baru ditambahkan dalam ES6, yang boleh membantu kami melaksanakan warisan dengan mudah:

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }

  // 类的访问器方法
  get address() {
    console.log("拦截访问操作")
    return this._address
  }

  set address(newAddress) {
    console.log("拦截设置操作")
    this._address = newAddress
  }
}

kata kunci super

kami Anda akan dapati bahawa saya menggunakan kata kunci super dalam kod di atas kata kunci super ini mempunyai cara penggunaan yang berbeza:

Nota: Sebelum menggunakan ini dalam pembina kelas sub (terbitan) atau mengembalikan objek lalai, anda mesti terlebih dahulu Memanggil pembina. daripada kelas induk melalui super!

class Person {
  constructor(name, age) {
    this.name = name
    this.age = age
    this._address = "广州市"
  }
  // 类的静态方法(类方法)
  // Person.createPerson()
  static randomPerson() {
    var nameIndex = Math.floor(Math.random() * names.length)
    var name = names[nameIndex]
    var age = Math.floor(Math.random() * 100)
    return new Person(name, age)
  }
}

Terdapat tiga tempat super boleh digunakan: pembina subkelas, kaedah contoh dan kaedah statik; Warisi kelas terbina dalam

Kami juga boleh membenarkan kelas kami mewarisi daripada kelas terbina dalam, seperti Array:

class Person{
    
}

class Student extends Person{
    
}

Campuran kelas

Kelas JavaScript hanya menyokong warisan tunggal: iaitu, hanya boleh ada satu kelas induk

. Oleh itu, apabila kita perlu menambah lebih banyak fungsi serupa pada kelas semasa pembangunan, bagaimana kita harus melakukannya? Pada masa ini kita boleh menggunakan mixin;

JavaScript中的多态

面向对象的三大特性：封装、继承、多态。

前面两个我们都已经详细解析过了，接下来我们讨论一下JavaScript的多态。JavaScript有多态吗？

维基百科对多态的定义：多态（英语：polymorphism）指为不同数据类型的实体提供统一的接口，或使用一

个单一的符号来表示多个不同的类型。

非常的抽象，个人的总结：不同的数据类型进行同一个操作，表现出不同的行为，就是多态的体现。

那么从上面的定义来看，JavaScript是一定存在多态的。

// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(foo) {
  console.log(foo.getArea())
}

var obj1 = {
  name: "why",
  getArea: function() {
    return 1000
  }
}

class Person {
  getArea() {
    return 100
  }
}

var p = new Person()

calcArea(obj1)
calcArea(p)

// 也是多态的体现
function sum(m, n) {
  return m + n
}

sum(20, 30)
sum("abc", "cba")

// 传统的面向对象多态是有三个前提:
// 1> 必须有继承(是多态的前提)
// 2> 必须有重写(子类重写父类的方法)
// 3> 必须有父类引用指向子类对象

// Shape形状
class Shape {
  getArea() {}
}

class Rectangle extends Shape {
  getArea() {
    return 100
  }
}

class Circle extends Shape {
  getArea() {
    return 200
  }
}

var r = new Rectangle()
var c = new Circle()

// 多态: 当对不同的数据类型执行同一个操作时, 如果表现出来的行为(形态)不一样, 那么就是多态的体现.
function calcArea(shape: Shape) {
  console.log(shape.getArea())
}

calcArea(r)
calcArea(c)

export {}

【相关推荐：javascript视频教程、编程视频】

Atas ialah kandungan terperinci Adakah kelas kelas sintaks es6?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!