オブジェクト指向プログラミングの簡単な紹介

オブジェクト指向プログラミング入門

1つのオブジェクト指向プログラミングoop(オブジェクト指向プログラミング)

オブジェクト指向は、物事をオブジェクトに分解し、次にオブジェクト間の分業によって行うことです。
例:象を冷蔵庫に入れ、3つのステップに分けます
1。23オブジェクト指向は、問題を次の機能で分割することです。ステップではなくオブジェクト
(トラクター)
オブジェクト指向プログラミングには、柔軟性、コードの再利用性、保守と開発が容易であるという利点があり、複数の人が協力する大規模なソフトウェアプロジェクトに適しています。

オブジェクト指向の3つの特徴

  • カプセル化
  • 継承
  • ポリモーフィズム

オブジェクト指向思考

  1. オブジェクトの一般的な属性と動作を抽出(抽象化)し、それらをクラス(テンプレート)にカプセル化します。
  2. クラスをインスタンス化し、クラスのオブジェクトを取得します

例えば

例:携帯電話は、(一般的には、明確ではないという)を抽象される
。小米科技(アップル)、携帯電話、特定の(特に)
の両方の携帯電話の小米科技とAppleあり、そのような重量や材料などの多くの類似点があります。
私たちはできますこれらの同じポイントを抽出し、テンプレートにカプセル化すると、携帯電話を作成する必要がある場合は、このテンプレートを使用するだけで済みます

オブジェクト指向プログラミングでは、どのオブジェクトが存在するかを考慮するだけで済みます。オブジェクト指向の考え方に従って、私たちは常にオブジェクトを作成し、オブジェクトを使用し、それらに物事を実行するように指示します。

2つのクラスとオブジェクト

オブジェクト

実生活では、すべてがオブジェクトであり、オブジェクトは特定のものであり、あなたが見たり触れたりできるものはすべて、紙などのオブジェクトです。
jsでは、オブジェクトは関連するプロパティとメソッドの順序付けられていないコレクションのセットであり、すべてのものは文字列などのオブジェクトです。

  • 属性:オブジェクトの属性で表されるものの特性
  • メソッド:オブジェクト内のメソッドによって表される、物事の動作

クラス

classキーワードを使用してクラスを宣言し、このクラスを使用してオブジェクトをインスタンス化できます。
クラスはオブジェクトのパブリック部分を抽象化します。一般に大きなクラスを参照し、
オブジェクトは特定のオブジェクトを具体的に参照します。特定のオブジェクトはクラスを通じてインスタンス化されます。

たとえば、BMWの車を作りたい場合、図面は単なるクラスであり、より抽象的なものです。この図面から多くのBMWの車を作ることができます。

クラスコンストラクタコンストラクタ

コンストラクタ()メソッドは、クラスのコンストラクタ(デフォルトメソッド)です。パラメータを渡し、インスタンスオブジェクトを返すために使用されます。オブジェクトインスタンスは、新しいコマンドによって生成されます。このメソッドは自動的に呼び出されます。表示宣言がない場合、constructor()はクラス内に自動的に作成されます。

  • クラスを作成する
//创建一个类  
class Star {
    
    
   constructor (name){
    
    
     this.name=name
   }
}

//利用类创造对象 new 
var star = new Star('没头发')
console.log(star.name);//没头发
//通过class 关键字创建类  类名要首字母大写
// 类里面有个constructor函数,可以接受传递进来的参数,同时返回实例对象
// constructor 函数,只要new生成实例,就会自动调用,就算不写,类也会自动生产
//创建类时,不加小括号,生成实例加 构造函数不需要加 function

  • クラスに共通のメソッドを追加します
class Star {
    
    
    constructor (name){
    
    
        this.name=name
    }
    sing(song){
    
    
          console.log(this.name+' 唱的 '+song);
    }
}
var star = new Star('没头发')star.sing('冰雨') // 没头发 唱的 冰雨
//类里所有的方法都不需要写function
//多个函数方法之间不加,

3種類の継承

クラスはextendsキーワードとsuperキーワードを継承します

実生活での継承、父親のビジネス
の継承、プログラムの継承は、親クラスのいくつかのメソッドとプロパティを継承します

class Father {
    
    
    constructor(x,y){
    
    
        this.x=x
        this.y=y
    }
    money(){
    
    
        console.log(100);
    }
    sum(){
    
    
        console.log(this.x+this.y);
    }
}
class Sonextends Father{
    
    
    constructor(x,y){
    
    
        this.x=x
        this.y=y
    }
}
var son = new Son(1,2)
son.money() //100
son.sum()  //Must call super constructor in derived class before accessing 'this' or returning from derived constructor
// this指向问题   因为sum中的this指向的是父类不是子类
class Father {
    
    
    constructor(x,y){
    
    
        this.x=x
        this.y=y
    }
    sum(){
    
    
        console.log(this.x+this.y);
    }
}
class Sonextends Father{
    
    
    constructor(x,y){
    
    
        super() //调用了父类的构造函数
    }
}
var son = new Son(1,2)
son.sum()  //3

Superは、親クラスの通常の関数と、継承で属性を見つけるためのルールを呼び出します

extendsが書かれていない場合

class Father {
    
    
    say(){
    
    
        return '父类 '
    }
}
class Son{
    
    
    say(){
    
    
        console.log('儿子');
        //super.say() 就是调用父亲中的函数 say()
    }
}
var son = new Son()
son.say()//儿子

延長がある場合、近接の原則

class Father {
    
    
    say(){
    
    
        return '父类 '
    }
}
class Son extends Father{
    
    
    say(){
    
    
        console.log('儿子');
    }
}
var son = new Son()
son.say()  //儿子

  • 継承では、サブクラスがメソッドを出力したい場合は、まずサブクラスにそのようなメソッドがあるかどうかを調べ、ある場合はサブクラスのメソッドを実行します。
  • サブクラスにない場合は、親クラスで検索し、ある場合は、親クラスでメソッドを実行します(近接の原則)

スーパーの注目
スーパーは、サブクラスでこの前に配置する必要があります

4クラスを使用する際の2つの注意点

  • es6では、変数の昇格がないため、オブジェクトをクラスでインスタンス化する前に、クラスを定義する必要があります。
var star = new Star('没头发')

class Star {
    
    
    constructor (name){
    
    
        this.name=name
    }
    sing(song){
    
    
        console.log(this.name+' 唱的 '+song);
    }
}
//'Star' before initialization

``

 - 在类中共有的属性和方法,一定要加this才能使用

```javascript
var star = new Star('没头发')

class Star {
    
    
    constructor (name){
    
    
        this.name=name
        song() // sing is not defined
    }
    sing(song){
    
    
        console.log(this.name+' 唱的 '+song);
    }
}
var star = new Star()

これは5つのカテゴリで問題を示していることに注意してください

次に、ページのボタンをクリックして、親クラスのメソッドを呼び出します。

<button>点击</button>

このエラー、未定義の出力

class Star {
    
    
    constructor(uname) {
    
    
        this.uname = uname
        this.btn=document.querySelector('button')
        this.btn.onclick=this.sing
    }
    sing() {
    
    
        //方法sing里面的this指向的是btn这个按钮,因为这个按钮调用了这个函数
        console.log(this.uname);  //undefined
    }
}
var star = new Star('没头发')

これを変える

vat _that;
class Star {
    
    
    constructor(uname) {
    
    
        _that=this
        this.uname = uname
        this.btn=document.querySelector('button')
        this.btn.onclick=this.sing
    }
    sing() {
    
    
        //方法sing里面的this指向的是btn这个按钮,因为这个按钮调用了这个函数
        console.log(_that.uname);  //没头发
    }
}
var star = new Star('没头发')

おすすめ

転載: blog.csdn.net/weixin_45972345/article/details/114991587