Adakah gula sintaksis kelas es6?-Soal Jawab bahagian hadapan-php.cn

kelas ialah gula sintaksis. Sebab: kelas adalah berdasarkan pelaksanaan pewarisan prototaip, yang tidak memberi kesan kepada fungsi bahasa Ia hanya memudahkan penulisan dan pembacaan tatabahasa; lebih seperti tatabahasa pengaturcaraan berorientasikan objek.

Adakah gula sintaksis kelas es6?

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

Kelas kelas ES6 - gula sintaksis

kelas (kelas) diperkenalkan sebagai templat untuk objek, dan kelas boleh ditakrifkan melalui kelas kata kunci. Intipatinya ialah fungsi, yang boleh dianggap sebagai gula sintaksis, menjadikan kaedah penulisan prototaip objek lebih jelas dan lebih seperti sintaks pengaturcaraan berorientasikan objek.

Kelasnya berbeza daripada bahasa lain Ia masih berdasarkan warisan prototaip, yang tidak memberi kesan kepada fungsi bahasa Ia hanya memudahkan penulisan dan pembacaan anda

Mengapa dikatakan kelas ES6 adalah gula sintaksis

Mari baca yang berikut dengan soalan:

Mengapa dikatakan kelas ES6 adalah sintaksis gula?
Adakah kelas gula sintaksis prototaip?
Kemudian bagaimana anda menggunakan prototaip untuk melaksanakan gula sintaksis kelas?

1 OOP berasaskan prototaip

Mari kita lihat contoh prototaip dahulu:

function Person (name, sex) {
	this.name = name
	this.sex = sex
}
 
function Man (name) {
	this.name = name
}
 
Man.prototype = new Person('', 'male')
 
let Jy = new Man('Jy')
 
console.log(Jy.name, Jy.sex) // Jy, male

Salin selepas log masuk

Ini adalah contoh yang sangat mudah tentang cara kami menggunakan prototaip Orang mempunyai nama dan jantina, Lelaki ialah Orang dengan jantina lelaki, dan Jy ialah Lelaki. Mari kita ingat contoh ini dahulu, dan kita akan menulis semula contoh ini menggunakan kelas di bawah.

Petua: baharu, ini, dsb. telah ditambahkan oleh Brendan Eich untuk menjadikannya lebih seperti OOP Java. Pembaca yang berminat boleh menyemak sendiri maklumat yang berkaitan.

2 OOP Kelas ES6

class Person {
	constructor (name, sex) {
		this.name = name
		this.sex = sex
	}
}
 
class Man extends Person {
	constructor (name) {
		super('', 'male')
		this.name = name
	}
}
 
let Jy = new Man('Jy')
 
console.log(Jy.name, Jy.sex) // Jy, 'male'

Salin selepas log masuk

Kami menulis semula contoh ini dan menggunakan kelas, pembina, extends , perkataan super. , mari kita bercakap secara khusus tentang perkara yang dilakukan kepada mereka dalam spesifikasi ES6.

3. Kelas OOP dilaksanakan menggunakan Prototaip (spesifikasi ES6)

Sebelum ES6, objek JS sebenarnya adalah koleksi atribut dan atribut Ia adalah satu set pasangan nilai kunci (kunci, nilai).

Anda mengatakan bahawa atribut biasa adalah baik, tetapi tidakkah terdapat kaedah di bawah objek? Bagaimanakah ia menjadi koleksi atribut?

Malah, takrif kaedah yang muncul dalam spesifikasi ES5 ialah "fungsi yang merupakan nilai harta", yang hanya atribut fungsi objek dan tidak boleh dipanggil kaedah sehingga ES6 muncul bahawa Kaedah disertakan dalam spesifikasi.

Kita boleh memikirkan perkara yang berkaitan dengan OOP dalam ES3: prototaip, baru, ini, pembina, instanceof, malah bukan atribut __proto__ standard.

Nasib baik, dalam ES5 kami telah menambah banyak kaedah untuk melengkapkannya dan menjadikannya lengkap:

Object.defineProperty
Object.freeze
Object.create
Object.getPrototypeOf
Object.setPrototypeOf
isPrototypeOf
......

Jom lihat sekeping kod sekali lagi:

let obj = {
	name: 'Jy',
	speak () { // Note: it's not speak: function () {}
		console.log(this.name, super.name)
	}
}
 
obj.speak() // Jy, undefined
 
Object.setPrototypeOf(obj,  { name: 'super' })
 
obj.speak() // Jy, super
 
let speak = obj.speak
speak() // undefined, super

Salin selepas log masuk

obj.speak ditakrifkan sebagai Kaedah dalam ES6 Ia mempunyai atribut [[homeObject]] dan homeObject menunjuk ke objek yang kaedah dipanggil (. kod itu merujuk kepada obj ), ia ialah Slot Dalaman yang terikat pada objek, iaitu, anda tidak boleh mengubah suainya, yang bersamaan dengan dikod keras.

Jadi apakah kegunaan homeObject? Ia berkait rapat dengan super Apabila kata kunci super dihuraikan, prototaip homeObject akan ditemui.

Ringkasnya, ia boleh diringkaskan sebagai dua formula berikut:

let homeObj = Method[[HomeObject]] = obj
super = Object .getPrototypeOf(homeObj )

Nota: homeObject terikat secara statik dalam slot dalaman, manakala super dicari secara dinamik.

Selepas bercakap tentang super, mari bercakap tentang extends dan constructor

class A extends B { }
 
class A extends B {
	constructor (...args) {
		super(args)
	}
}
 
class C extends null { }

Salin selepas log masuk

extends terutamanya melakukan dua perkara berikut:

Object.setPrototypeOf ( A, B)
Object.setPrototypeOf(A.prototype, B.prototype)

Jika kelas induk adalah null, laksanakan Object.setPrototypeOf(C.prototype, null)

Perbezaan antara bahagian pertama dan kedua kod di atas ialah sama ada pembina diisytiharkan secara eksplisit Jadi adakah kedua-dua keping kod ini bersamaan? Jawapannya setara.

Ini adalah cara ia ditakrifkan dalam spesifikasi:

Bahagian ketiga kod mewarisi null Ia tidak akan melaporkan ralat sintaks, tetapi kami tidak boleh mencipta C baharu kerana ia akan Memanggil pembina null, tetapi null tidak mempunyai pembina.

Melihat di sini, pengisytiharan oop kelas dan spesifikasi ES6 semuanya menggunakan prototaip untuk beroperasi, jadi bolehkah kita katakan bahawa kelas ialah gula sintaks prototaip?

4. Babel compiled class

Dalam projek sebenar kami, kami sering menggunakan babel untuk menyusun kod ES6 dan 7, jadi dalam bahagian ini kami Mari kita analisis kod yang disusun Babel berikut, yang akan mengetepikan beberapa pelaporan ralat dan kod berkaitan pengesanan untuk mempersembahkan tema penggunaan prototaip untuk melaksanakan OOP dengan lebih baik.

Sebelum kompilasi:

class A extends B {}
 
console.log(new A)

Salin selepas log masuk

Selepas penyusunan:

"use strict";
 
function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}
 
function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }
  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}
 
function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };
  return _setPrototypeOf(o, p);
}
 
var A =
  /*#__PURE__*/
  function (_B) {
    _inherits(A, _B);
 
    function A() {
 
      return _getPrototypeOf(A).apply(this, arguments);
    }
 
    return A;
  }(B);
 
console.log(new A());

Salin selepas log masuk

我们重点看_inherits 方法，跟我们上述说的extends做的两件事是一样的：