1. オブジェクト指向
(1) オブジェクトとは何ですか? なぜオブジェクト指向なのか?
コードの抽象化を通じて、単一タイプのオブジェクトの方法を記述します。
(2) 特徴: オブジェクト指向ロジックの移行がより柔軟で、コードの再利用性が高く、モジュール性が高い。
(3) 対象の理解
1. オブジェクトは、単一のオブジェクトを単純に抽象化したものです。
2. オブジェクトはプロパティとメソッドをカプセル化するコンテナです
**プロパティ: オブジェクトの状態
**メソッド: オブジェクトの能力/動作
//简单对象
const Course = {
teacher: 'tom',
leader: 'xh',
startCourse: name => {
return `开始${name}课`
}
}
//A同学
Course.teacher = 'xxx'
Course.startCourse('react')
//B同学
Course.startCourse('vue') //发现即使课变了,但是老师也被修改了
//引出函数对象
function Course(){
this.teacher='tom'
this.leader='xh'
this.startCourse= name => {
return `开始${name}课`
}
} ＃＃コンストラクタ
####テンプレートが必要です - オブジェクトのクラスの共通プロパティを特徴付けてオブジェクトを生成します。
#### クラスはオブジェクト テンプレートです
#### js の本質はクラスベースではなく、コンストラクター + プロトタイプチェーンに基づいています
### コースは本質的にコンストラクターです
*1. 関数本体で使用される this は生成されるインスタンスを指します。
2. 生成されたオブジェクトは new でインスタンス化されます。
3. パラメータを初期化できます。
function Course() {
this.teacher = 'tom' //这里的this其实指向course 这个实例对象
this.leader = 'xh'
this.startCourse = name => {
return `开始${name}课`
}
}
const course = new Course(args)####質問: コンストラクターが初期化されていない場合、同じ機能を持つことができますか? -> 持つことはできません
####プロジェクトで使用する必要があり、外部に認識されたくない場合、外部はどのようにしてインスタンス化されたオブジェクトを直接取得できますか? =>シングルトン モード
function Course() {
const _isClass = this instanceof Course
//未实例化
if (!_isClass) {
return new Course
}
this.teacher = 'tom'
this.leader = 'xh'
this.startCourse = name => {
return `开始${name}课`
}
}
//使用方
const course=Course()インスピレーション: 基礎となる API コードを記述するときは、外部の世界が内部の型を認識および区別できないようにしてください。
####思考: 新しいとは何ですか?/新しい原理とは何ですか?/新人の頃何をしていましたか?
function Course() { }
const course = new Course()*概要: 1. 構造的に: 返されたオブジェクト インスタンスとして空のオブジェクトが作成されます。
2. 属性について: 空のオブジェクトを生成するプロトタイプ オブジェクトをコンストラクターのプロトタイプ属性にポイントします。
3. 関係: 現在のインスタンス オブジェクトが内部の this に割り当てられます。
4. ライフサイクル内: コンストラクターの初期化コードが実行されます。
#### フォローアップ: インスタンス属性の効果 - 独立
function Course(teacher, leader) {
this.teacher = teacher
this.leader = leader
}
const course1 = new Course('tom', 'xh')//course1.teacher ->tom
const course2= new Course('steven', 'bubu')//course2.teacher ->steven
course2.teacher='xxx'//course.teacher=>tom
//分析过程:course1 是构造函数的实例化对象,而this指向了这个实例化对象,所以this.teacher和this.leader
//是实例化对象上的属性,而构造函数new Course时,调用了Course()这个函数传入的参数,所以实例化对象的teacher
//属性也就指向了调用Course()这个函数传入的参数.
###重要なこと: js で新しいものを手書きする
function usernew(obj, ...args) {
const newObj = Object.create(obj.prototype)
const result = obj.apply(newObj, args)
return typeof result === 'object' ? result : newObj
}### コンストラクターとは何ですか?
function Course(teacher, leader) {
this.teacher = teacher
this.leader = leader
}
const course1 = new Course('tom', 'xh')//course1.teacher ->tom*1. 各オブジェクトが作成されると、自動的にコンストラクタ属性コンストラクタが設定されます。
2. コンストラクターはプロトタイプ オブジェクトから派生し、コンストラクターの参照を指します。
※インスタンスはテンプレートのプロパティを取得 => (太字) クラスのプロパティを継承
#### プロトタイプ オブジェクト
function Course(){}
const course1 = new Course()
const course2 = new Course()
//1.Course - 用来初始化创建对象的函数 | 类
course1.__proto__===Course.prototype
//2.course1 - 根据原型创建出来的实例
course1.constructor===Course*プロトタイプとは何ですか？
function Course() {
this.teacher = 'tom'
this.leader = 'xh'
}
Course.prototype.startCourse = name => {
return `开始${name}课`
}
const course1 = new Course()*質問: プロトタイプ オブジェクトには独自のプロトタイプ チェーンがありますか?
course1.__proto__.__proto__ === Object.prototype
Course.prototype.__proto__ === Object.prototype
course1.__proto__.__proto__.__proto__ === nullプロトタイプチェーン
完全なプロトタイプ図:
**継承する
js はどのように継承を実装するのでしょうか?
####プロトタイプ オブジェクト内のすべての属性メソッドはインスタンスで共有できます
function Game() {
this.name = 'lol'
}
Game.prototype.getName = function () {
return this.name
}
//LOL
function LOL() { }
LOL.prototype = new Game()//将LOL的原型对象指向Game的实例
LOL.prototype.constructor = LOL
const game = new LOL()本質: プロトタイプ オブジェクトのメソッドを書き換え、親オブジェクトのプロパティ メソッドを自己プロトタイプ オブジェクトのプロパティ メソッドとして使用し、同時にコンストラクターを書き換えます。
####質問: プロトタイプ チェーンの直接継承の欠点は何ですか?
function Game() {
this.name = 'lol'
this.skin=['s']
}
Game.prototype.getName = function () {
return this.name
}
function LOL() { }
LOL.prototype = new Game()//将LOL的原型对象指向Game的实例
LOL.prototype.constructor = LOL
const game1 = new LOL()
const game2 = new LOL()//game2也会拿到新添加的属性值
game1.skin.push('ss')*1. 親クラスの属性をサブクラスのプロトタイプ属性に代入すると、その時点でその属性はサブクラスの共有属性に属します。
*2. サブクラスをインスタンス化する場合、要素は親クラスにパラメータを渡すことはできません。
###解決策: コンストラクターの継承
####クラシック継承: サブクラスのコンストラクター内で親クラスのコンストラクターを使用します。
function Game(args) {
this.name = 'lol'
this.skin = ['s']
}
Game.prototype.getName = function () {
return this.name
}
function LOL(args) {
Game.apply(this, args)//调用Game的this,并传递参数
}
const game3 = new LOL('args')共有属性の問題 + 子から親へのパラメータの受け渡しの問題を解決しました。
###質問:: プロトタイプ チェーン上の共有メソッドを読み取って継承することができません。どうすれば解決できますか?
#### 構成の継承
function Game(args) {
this.name = 'lol'
this.skin = ['s']
}
Game.prototype.getName = function () {
return this.name
}
function LOL(args) {
Game.apply(this, args)//调用Game的this,并传递参数
}
LOL.prototype = new Game()//调用
LOL.prototype.constructor = LOL
const game4 = new LOL('args')//调用###フォローアップ: 結合継承の欠点? 問題は、シナリオが何であっても、親クラスのコンストラクターが 2 回呼び出されることです。
### 解決策: 寄生構成の継承
function Game(args) {
this.name = 'lol'
this.skin = ['s']
}
Game.prototype.getName = function () {
return this.name
}
function LOL(args) {
Game.apply(this, args)//调用Game的this,并传递参数
}
LOL.prototype =Object.create(Game.prototype)//关键点
LOL.prototype.constructor = LOL
const game5 = new LOL('args')//调用###Baogao: 多重継承を実現するにはどうすればよいですか?
function Game(args) {
this.name = 'lol'
this.skin = ['s']
}
Game.prototype.getName = function () {
return this.name
}
function Store() {
this.shop = 'steam'
}
Game.prototype.getPlatform = function () {
return this.shop
}
function LOL(args) {
Game.apply(this, args)//调用Game的this,并传递参数
Store.apply(this, args)
}
LOL.prototype = Object.create(Game.prototype)//关键点
// Store.prototype =Object.create(Game.prototype)会冲掉 LOL.prototype
Object.assign(Store.prototype, LOL.prototype)
LOL.prototype.constructor = LOL