継承とは
率直に言って、オブジェクト間の接続を行うことです
ES5での継承
ES5での継承の考え方は次のとおりです
- 関数をクラスとして使用する
- テンプレートとしてのクラス
- テンプレートに従って作成されたものは、オブジェクトインスタンスと呼ばれます
- オブジェクトインスタンスはクラスと同じものを持っています
- クラスの属性はクラスに直接書き込まれます
- 関数はクラスで書くこともできます
- 関数が多すぎると、各インスタンスに継承されるプロパティが異なる場合がありますが、動作は一貫しています
- したがって、動作をクラスから分離します
- 行動を公共の場に置く
- この領域は、クラスのメソッドのプロトタイプです
- 継承にプロトタイプを使用する
//使用函数作为类
function Animal(name,age){
//把属性放类中
this.name = name
this.age = age
}
//把方法放在类的原型上
Animal.prototype.eat = function(){
console.log(`${
this.name} is eating`)
}
//子类继承父类
function Cat(name,age,color){
Animal.call(this,name,age)
this.color = color
}
Cat.prototype = new Animal()
Cat.prototype.constructor = Cat
//实例化对象
let cat = new Cat('小猫','2','black')
console.log(cat)
console.log(cat.eat())
ES5のクラスの静的プロパティとメソッド
つまり、メソッドはパブリックエリアにハングアップせず、クラスにアタッチされるため、継承されず、インスタンスのオブジェクトから呼び出すことはできません。
//定义
function Animal(name,age){
//把属性放类中
this.name = name
}
//静态属性
Animal.sex = 'female'
//静态方法
Animal.getSex = function(){
console.log('这只动物是雌性的')
}
//调用
console.log(Animal.sex)
Animal.getSex()
ES6での継承
ES5での継承の考え方は次のとおりです
- クラスを使用してクラスを宣言する
- テンプレートとしてのクラス
- テンプレートに従って作成されたものは、オブジェクトインスタンスと呼ばれます
- オブジェクトインスタンスはクラスと同じものを持っています
- クラスの属性は、クラスのコンストラクターに直接書き込まれます
- 関数はクラスにも記述されています
- 使用は継承を拡張します
- スーパーを使用してプロパティを継承する
class Animal {
//把属性放类的构造函数中
constructor(name,age){
this.name = name
this.age = age
}
//直接写方法
eat(){
console.log(`${
this.name} is eating`)
}
}
//使用extends继承,属性继承使用super，方法直接默认，不需要额外操作
class Cat extends Animal{
constructor(name,age,color){
super(name,age)
this.color = color
}
}
//实例化对象
let cat = new Cat('小猫','2','black')
console.log(cat)
console.log(cat.eat())
ES6のクラスの静的メソッドとプロパティ
es5と同じ
ES6のクラスのプライベートプロパティ
getterとsetterを使用して、前のオブジェクトのプライベートプロパティとまったく同じです。
//隐藏真正的属性_age，只能访问age这个接口，每次修改必须经过set
let _age = 18
class People {
constructor(name,sex){
this.name = name
this.sex = sex
this.age = _age
}
set age(val){
if(val < 25 && val>0){
_age = val
}
}
get age(){
return _age
}
}
let people = new People('小明','男')
console.log(people)
people.age = 12
console.log(people)