ホームページ  >  記事  >  ウェブフロントエンド  >  JS はオブジェクト指向プログラミングをどのように実装するのでしょうか? js オブジェクト指向プログラミングの原理の紹介

JS はオブジェクト指向プログラミングをどのように実装するのでしょうか? js オブジェクト指向プログラミングの原理の紹介

不言
不言オリジナル
2018-08-18 16:53:143576ブラウズ

この記事の内容は、JSでオブジェクト指向プログラミングを実装する方法についてです。 js オブジェクト指向プログラミングの原理の紹介は、必要な方に参考にしていただけると幸いです。

1. オブジェクト指向プログラミングとは

それは、現実世界のモデルに基づいて、抽象的な方法を使用してプログラミングモデルを作成することです(データとプログラム命令をオブジェクトに結合します)。プログラミング

プログラミングにおいて 柔軟性と保守性が向上し、大規模なソフトウェア プロジェクトで広く普及しています。

3. オブジェクト指向プログラミングの利点 (継承、ポリモーフィズム、カプセル化)

継承: 親クラスのすべてのデータと関数を取得し、コピーを実現します。

ポリモーフィズム: 同じメソッド名でも、そのメソッドを実装するオブジェクトに応じて動作が異なります。
カプセル化: オブジェクトのデータと関数を集約し、外部との接触 (アクセス権) を制限します。

JSでオブジェクト指向プログラミングを実装する方法(参考)

1.プロトタイプチェーンの継承

function Person() {
    this.name = 'per'
    this.obj = {
        name: ''
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    
}
Student.prototype = new Person()

const stu1 = new Student()
const stu2 = new Student()

stu1.setName('stu')
stu1.getName()
stu2.getName()

欠点:参照型が変更されると、すべてのサブクラスに同期されます

2. : 親クラス 関数はサブクラスで共有されません。これはコードのコピーを動的にコピーするのと同じです

3. 結合継承

function Person() {
    this.obj = {
        name: 'a'
    }
    this.setName = name => {
        this.obj.name = name
    }
    this.getName = () => {
        return this.obj.name
    }
}
function Student() {
    Person.call(this)
}
const stu1 = new Student()
const stu2 = new Student()
stu1.setName('stu')
stu1.getName()
stu2.getName()
欠点: 親クラスでの属性のコピーが 2 回実行されます

4.

function Person() {
    this.obj = {
        name: 'a'
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    // 继承属性
    Person.call(this)
}
// 继承方法
Student.prototype = new Person()
これにより、結合継承における親クラスのコードの二次実行の問題が解決されます

5. クラス実装の継承 (参考)

function Person() {
    this.obj = {
        name: 'a'
    }
}
Person.prototype.getName = function() {
    return this.obj.name
}
Person.prototype.setName = function(name) {
    this.name = name
    // 引用类型的赋值会同步给所有子类
    this.obj.name = name
}
function Student() {
    // 继承属性
    Person.call(this)
}
// 这里实现方法的继承
function inherit(sub, parent) {
    sub.prototype = Object.create(parent.prototype)
    sub.prototype.constructor = sub       
}
inherit(Student, Person)
関連する推奨事項:

js オブジェクト指向の複数の作成方法のまとめ_js オブジェクト指向

javascript オブジェクト指向プログラミング code_js オブジェクト指向

以上がJS はオブジェクト指向プログラミングをどのように実装するのでしょうか? js オブジェクト指向プログラミングの原理の紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。