javascriptこのコラムでは、面接で学ばなければならないプロトタイプと継承について紹介します
#関連する無料学習の推奨事項:この記事は次の側面から始まりますjavascript(ビデオ)
- 0オブジェクト指向を理解する方法
- 1オブジェクトの作成方法
- 2 プロトタイプチェーンを覚えておくためのヒント
- 3シミュレーション実装のインスタンス
- 4新しいキーワード シミュレーションの実装
- 5継承された実装 (段階的な実装)
##1 オブジェクトの作成方法
1. オブジェクト リテラル
var o1 = {name: 'o1'} var o2 = new Object({name: 'o2'})
2. コンストラクターを通じて
var M = function(name){ this.name = name } var o3 = new M('o3')
3.Object.create
var o4 = Object.create(p)
2 プロトタイプ チェーンを覚えておくためのヒント
暗記には必ずルールがあります。例えば、高校で三角関数を習う場合、たくさんの公式を暗記する必要がありますが、無理にすべての公式を覚えようとすると、混乱しやすくなります。ただし、核心部分を暗記すれば、残りの公式は少し導出するだけで済みます。プロトタイプチェーンも同様で、最初にいくつかのポイントを覚えておくと、後で混乱することはありません。プロトタイプ チェーンの主要な概念:constructorインスタンス (オブジェクト) には、instance、constructor、__ proto__、prototype、最初のすべての関係を覚えておいてください
- proto
- があり、インスタンス (オブジェクト) にはプロトタイプがありませんコンストラクターにはプロトタイプがあり、そして、プロトタイプがオブジェクトである場合、プロトタイプは上記のものを満たします。 proto
- を持つことに加えて、コンストラクター も含まれます。プロトタイプのコンストラクターのコンストラクターは、コンストラクター自体を指します。上の例では M.prototype ですconstructor === M
実際には
コンストラクター、インスタンス、コンストラクター、__ プロト__、プロトタイプ上記の例と 3 つのポイントですでに関連しています。導入部は以上です。もう一度確認しましょう
- コンストラクターは通常の関数ですが、先頭に new キーワードがあります
- Through
- new
コンストラクター を追加すると、生成されるオブジェクトはインスタンスになります。
上で生成された o3 インスタンスを例に挙げます。 -
o3.__proto__ === M.prototype //true o3.prototype //undefined o3.__proto__ === M.prototype //true
o3 インスタンス自体にはコンストラクターがありませんが、上向きに検索されます。プロトタイプ チェーンの助けを借りて、つまり -
o3.constructor === M.prototype.constructor // true o3.constructor === M //true
#まとめ これらのキーワード間の関係を明確にすると、プロトタイプ チェーンがより明確になります
[] instanceof Array // true
#3 インスタンスオブシミュレーションの実装
#インスタンスオブの原理は何ですか?まず
[].__proto__ === Array.prototype //true Array.prototype.__proto__ === Object.prototype //true Object.prototype__proto__ //null
の使用を見てみましょう。つまり、左側がオブジェクトで右側が型です。instanceof は、右側の型のプロトタイプが左側のインスタンスのプロトタイプ チェーン上にあるかどうかを判断します。 、次の例に示すように、
function myInstanceof2(left, right){ if(left === null || left === undefined){ return false } if(right.prototype === left.__proto__) { return true } left = left.__proto__ return myInstanceof2(left, right) } console.log(myInstanceof2([], Array))
次に、このアイデアに基づいてinstanceofを実装すると、間違いなくより感動するでしょう
新しいプロセスが発生しました 何が?// 构造函数 function M(name){ this.name = name } // 原生new var obj = new M('123') // 模拟实现 function create() { // 生成空对象 let obj = {} // 拿到传进来参数的第一项,并改变参数类数组 let Con = [].shift.call(arguments) // 对空对象的原型指向赋值 obj.__proto__ = Con.prototype // 绑定this //(对应下面使用来说明:Con是参数第一项M, // arguments是参数['123'], // 就是 M方法执行,参数是'123',执行这个函数的this是obj) let result = Con.apply(obj, arguments) return result instanceof Object ? result : obj } var testObj = create(M, '123') console.log('testObj', testObj)4 新しいシミュレーション実装 (簡易バージョン)
- 空のオブジェクトの生成
- この空のオブジェクトの
- proto
はプロトタイプ##に割り当てられますコンストラクターの ##これをポイントするようにバインドします
-
このオブジェクトを返します
// 构造方法方式 function Parent1(){ this.name = 'Parent1' } Parent1.prototype.say = function () { alert('say') } function Child1(){ Parent1.call(this) this.type = 'type' } var c1 = new Child1() c1.say() //报错
5 継承の実装(段階的な実装)
構築メソッド core Parent1.call(this)
// 原型 function Parent2(){ this.name = 'Parent2' this.arr = [1,2] } Parent2.prototype.say = function () { alert('say') } function Child2(){ // Parent2.call(this) this.type = 'type' } Child2.prototype = new Parent2() var c21 = new Child2() var c22 = new Child2() c21.say() c21.arr.push('9') console.log('c21.arr : ', c21.arr) console.log('c22.arr : ', c22.arr)
- 欠点: 親クラスのコンストラクターの内部プロパティと、親のプロトタイプ オブジェクトのプロパティのみを継承できます。クラス コンストラクターは継承できません
考察: なぜ呼び出しは継承を実装するのでしょうか?呼び出しの本質は何ですか?
プロトタイプ Child2.prototype = new Parent2()
function Parent3(){ this.name = 'Parent3' this.arr = [1,2] } Parent3.prototype.say = function () { alert('say') } function Child3(){ Parent3.call(this) this.type = 'type' } Child3.prototype = new Parent3() var c31 = new Child3() var c32 = new Child3() c31.say() c31.arr.push('9') console.log('c31.arr : ', c31.arr) console.log('c31.arr : ', c32.arr)
- 欠点: c21.arr を通じてのみコアを継承します。と c22.arr は同じ参照に対応します
思考: なぜ同じ参照であるのにこのように書かれているのでしょうか?
#結合継承 1
- 上記 2 つの継承方法の利点を組み合わせ、欠点を破棄します
-
Child3.prototype = new Parent3()
思考:こう書いても問題ないでしょうか?
答 : 生成一个实例要执行 Parent3.call(this) , new Child3(),也就是Parent3执行了两遍。
- 组合继承2
改变上例子 的
Child3.prototype = new Parent3()
为
Child3.prototype = Parent3.prototype
缺点 : 很明显,无法定义子类构造函数原型私有的方法
-
组合继承优化3 再次改变上例子 的
Child3.prototype = Parent3.prototype
为
Child3.prototype = Object.create(Parent3.prototype)
问题就都解决了。 因为Object.create的原理是:生成一个对象,这个对象的proto, 指向所传的参数。
思考 :是否还有疏漏?一时想不起来的话,可以看下这几个结果
console.log(c31 instanceof Child3) // true console.log(c31 instanceof Parent3) // true console.log(c31.constructor === Child3) // false console.log(c31.constructor === Parent3) // true
所以回想起文章开头所说的那几个需要牢记的点,就需要重新赋值一下子类构造函数的constructor: Child3.prototype.constructor = Child3,完整版如下
function Parent3(){ this.name = 'Parent3' this.arr = [1,2] } Parent3.prototype.say = function () { alert('say') } function Child3(){ Parent3.call(this) this.type = 'type' } Child3.prototype = Object.create(Parent3.prototype) Child3.prototype.constructor = Child3 var c31 = new Child3() var c32 = new Child3() c31.say() c31.arr.push('9') console.log('c31.arr : ', c31.arr) console.log('c31.arr : ', c32.arr) console.log('c31 instanceof Child3 : ', c31 instanceof Child3) console.log('c31 instanceof Parent3 : ', c31 instanceof Parent3) console.log('c31.constructor === Child3 : ', c31.constructor === Child3) console.log('c31.constructor === Parent3 : ', c31.constructor === Parent3)
5 es6的继承
class Parent{ constructor(name) { this.name = name } getName(){ return this.name } } class Child{ constructor(age) { this.age = age } getAge(){ return this.age } }
es6继承记住几个注意事项吧
- 1 构造函数不能当普通函数一样执行 Parent() 是会报错的
- 2 不允许重定向原型 Child.prototype = Object.create(Parent.prototype) 无用
- 3 继承写法如下,上面的Child类想继承父类,改成如下写法就好
注意写了extends关键字,constructor中就必须写super()
,打印结果如下:
以上が面接ではJavaScriptのプロトタイプと継承が必須の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

現実世界におけるJavaScriptのアプリケーションには、サーバー側のプログラミング、モバイルアプリケーション開発、モノのインターネット制御が含まれます。 2。モバイルアプリケーションの開発は、ReactNativeを通じて実行され、クロスプラットフォームの展開をサポートします。 3.ハードウェアの相互作用に適したJohnny-Fiveライブラリを介したIoTデバイス制御に使用されます。

私はあなたの日常的な技術ツールを使用して機能的なマルチテナントSaaSアプリケーション(EDTECHアプリ)を作成しましたが、あなたは同じことをすることができます。 まず、マルチテナントSaaSアプリケーションとは何ですか? マルチテナントSaaSアプリケーションを使用すると、Singの複数の顧客にサービスを提供できます

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

Pythonはデータサイエンスや機械学習により適していますが、JavaScriptはフロントエンドとフルスタックの開発により適しています。 1. Pythonは、簡潔な構文とリッチライブラリエコシステムで知られており、データ分析とWeb開発に適しています。 2。JavaScriptは、フロントエンド開発の中核です。 node.jsはサーバー側のプログラミングをサポートしており、フルスタック開発に適しています。


ホットAIツール

Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。

Undress AI Tool
脱衣画像を無料で

Clothoff.io
AI衣類リムーバー

AI Hentai Generator
AIヘンタイを無料で生成します。

人気の記事

ホットツール

WebStorm Mac版
便利なJavaScript開発ツール

SublimeText3 中国語版
中国語版、とても使いやすい

Dreamweaver Mac版
ビジュアル Web 開発ツール

mPDF
mPDF は、UTF-8 でエンコードされた HTML から PDF ファイルを生成できる PHP ライブラリです。オリジナルの作者である Ian Back は、Web サイトから「オンザフライ」で PDF ファイルを出力し、さまざまな言語を処理するために mPDF を作成しました。 HTML2FPDF などのオリジナルのスクリプトよりも遅く、Unicode フォントを使用すると生成されるファイルが大きくなりますが、CSS スタイルなどをサポートし、多くの機能強化が施されています。 RTL (アラビア語とヘブライ語) や CJK (中国語、日本語、韓国語) を含むほぼすべての言語をサポートします。ネストされたブロックレベル要素 (P、DIV など) をサポートします。

AtomエディタMac版ダウンロード
最も人気のあるオープンソースエディター
