ES 6のクラス
7764 ワード
参照リンク:https://segmentfault.com/a/11...参照リンク:https://segmentfault.com/a/11...
何がクラスですか
オブジェクト指向プログラミングにおけるクラスは、状態(メンバー変数)と挙動実現(メンバー関数または方法)のためのオブジェクトを作成するための初期値を提供する拡張プログラムコードテンプレートです.
実際の開発において、私たちは多くの同じ種類のオブジェクトを作成する必要があります.newの一つのfunctionによってオブジェクトを作成することができることは知っていますが、現代のJavaScriptには、より高級な「クラス」構造があり、対象に向けてプログラミングするのにいい特性があります.
基本文法
多くのJavaScriptエンジンのクラス構造関数の文字列表示形式は「class...」で始まる.
ある属性に対して、値関数と値取り関数を設定し、この属性のアクセス挙動をブロックします.
JavaScriptには、2つのタイプのオブジェクトフィールド(属性と方法)があります.
公共の:どこにでもアクセスできます.外部インターフェースを含みます.私たちは開発においていつもよく使われているのは、公共の属性と方法です.
これはjsによって追加されたクラス属性に対するシンタックスであり、jsエンジンは現在部分的にサポートされています.
何がクラスですか
オブジェクト指向プログラミングにおけるクラスは、状態(メンバー変数)と挙動実現(メンバー関数または方法)のためのオブジェクトを作成するための初期値を提供する拡張プログラムコードテンプレートです.
実際の開発において、私たちは多くの同じ種類のオブジェクトを作成する必要があります.newの一つのfunctionによってオブジェクトを作成することができることは知っていますが、現代のJavaScriptには、より高級な「クラス」構造があり、対象に向けてプログラミングするのにいい特性があります.
基本文法
class MyClass{
constructor(){}
method1(){}
method2(){}
method3(){}
}class User{
constructor(name){
this.name = name
}
showInfo(){
alert(this.name)
}
}
var user = new User('WhiteCode') // new ， this.name
user.showInfo()
// class User{ // User
constructor(name){
this.name = name
}
showInfo(){ // User.prototype showInfo
// ， User
alert (this.name)
}
}
alert(typeof User)//function
alert(User === User.prototype.constructor) //true
alert(User.prototype.showInfo)//showInfo(){ alert (this.name) }
// there are exactly two methods in the prototype
alert(Object.getOwnPropertyNames(User.prototype)) //constructor,showInfoes5
function People(name,age){
this.name = name
this.age = age
}
People.prototype.say = function(){
console.log("hello")
}
People.see = function(){
alert("how are you")
}
var a = new People()
a.say()
. es6 class
class People{
constructor(name,age){
this.name = name
this.age = age
}
see(){ alert('how are you')}
say(){
console.log('hello')
}
}
var a = new People()
a.say()多くのJavaScriptエンジンのクラス構造関数の文字列表示形式は「class...」で始まる.
。 ， enumerable false。
。 。class User{
constructor(){}
}
alert(typeof User);//function
User();// Error: Class constructor User cannot be invoked without 'new'let User = class{ // ，
showInfo(){
alert('hello')
}
}
new User().showInfo()function makeClass(rass){
// declare a class and return it
return class{
showInfo(){
alert(rass)
}
}
}
// Create a new class
let User = makeClass('hello')
new User().showInfo()//hello// getter/setter, ， get/set user.name
class User{
constructor(name){
this._name =name
}
get name(){
return this._name
}
set name(value){
if(value.length<4){
alert(' ')
return
}
this._name = name
}
}
let user = new User('biubiu')
alert(user.name)
user = new User()// 'Object.defineProperties(User.prototype,{
name:{
get(){
return this._name
},
set(name){
// ...
}
}
})class User {
name = "see"
sayHi(){
alert(`hello,${this.name}!`)
}
}
new User().sayHi()
// User new ， ある属性に対して、値関数と値取り関数を設定し、この属性のアクセス挙動をブロックします.
class MyClass {
constructor(){
// ...
}
get prop(){
return 'getter';
}
set prop(value){
console.log('setter:'+ value)
}
}
let inst = new MyClass()
inst.prop = 124 //setter:124
var a = inst.prop
console.log(a) //getter
// prop ， class CustomHTMLElment {// descriptor
constructor(element){
this.element = element
}
get html(){
return this.element.innerHTML
}
set html(value){
this.element.innerHTML = value
}
}
// Object.getOwnPropertyDescriptor ， underfined
var descriptor = Object.getOwnPropertyDescriptor(CustomHTMLElment.prototype,'html')
console.log(descriptor) //{enumerable: false, configurable: true, get: ƒ, set: ƒ}
// html
console.log('get' in descriptor)//true
console.log('get' in descriptor)//trueJavaScriptには、2つのタイプのオブジェクトフィールド(属性と方法)があります.
公共の:どこにでもアクセスできます.外部インターフェースを含みます.私たちは開発においていつもよく使われているのは、公共の属性と方法です.
class MBWCar{
oilAmount = 0
constructor(power){
this.power = power
alert(`Created a mbw-car,power: ${power}`)
}
}
let mbwCar = new MBWCar(100)
mbwCar.oilAmount = 200
// oilAmount power ，
// oilAmount protected class MBWCar{
_oilAmount = 0
constructor(power){
this._power = power
}
set oilAmount(value){
if (value<0) throw new Error('Negative oil')
this._oilAmount = value
}
get oilAmount(){
return this._oilAmount
}
}
let mbwCar = new MBWCar(100)
mbwCar.oilAmount = -10 //Error Negative oil
console.log(mbwCar) // ， 。class MBWCar{
constructor(power){
this._power = power
}
get power(){
return this._power
}
}
let mbwCar = new MBWCar(100)
alert(`Power is: ${mbwCar.power}W`)
mbwCar.power = 25//Error (no set)class Car{
_oilMount = 0
setOilMount(value){
if(value<0)throw Error('Negative oil')
this._oilMount = value
}
getOilMount(){
return this._oilMount
}
}
let car = new Car()
car.setOilMount(100)
alert(car.getOilMount())
//
// Car Car this._oilMount this._power これはjsによって追加されたクラス属性に対するシンタックスであり、jsエンジンは現在部分的にサポートされています.
class Car{
#oilLimit = 100
#checkOil(value){
if(value>0) throw Error('Negative oil')
if(value > this.#waterLimit) throw new Error('Too much oil')
}
}
let car = new Car()
car.#checkOil() //error
car.#waterLimit = 1000 //Error
class BWMCar extends Car{
methods(){
alert(this.#oilLimit) // Error: can only access from Car
}
}class User{
sayHi(){
let filedName = 'Darkcod'
alert(`Hello,${this.filedName}`)
}
}
new User().sayHi()