引用
ベングアは、常に学習が一晩で達成することができるものではないと信じています。私の使用のために、統合の程度を達成するために、長期的には、常に再形成を破る、繰り返し咀嚼し、ピンポイントの知識ポイントの学習者に必要とされなければなりません。いわゆる：過去から学ぶ、幸せではない？
JSスキルの所有者にとって、プロトタイプの概念は心に刻まれ、何度も何度も遊ぶべきものに違いありません。この記事では、JSのプロトタイプについてもう一度考えてみましょう。
なかなか書けませんねまだまだ励ましが必要です小さな手頑張って(*^^*)
プロトタイプの意図
プロトタイプのコンセプト
JavaScriptはよくプロトタイプベースの言語と言われます。各オブジェクトにはプロトタイプオブジェクトがあり、オブジェクトはそのプロトタイプからメソッドやプロパティを継承します。
JavaScriptのほとんどすべてのオブジェクトは、プロトタイプチェーンの一番上にあるObjectsのインスタンスです。
原型とは自然思考の産物。瓢箪から駒」「猫から虎」ということわざがあるように、ここでは「瓢箪」が「駒」の原型であり、「猫」が「虎」の原型です。ここでは「ひょうたん」がテントウムシの原型であり、「猫」が「虎」の原型。
プロトタイプとクラス
すべてがオブジェクト？JavaScriptはオブジェクト指向言語なのでしょうか？なぜJavaのようなクラスの概念がないのでしょうか？
彼のデザイン思考はこうでした：
- C言語の基本構文を利用；
- データ型とメモリ管理にはJava言語を使用しています；
- Schemeの言葉を借りれば、ファンクションは「第一級市民」の地位に昇格したのです；
- プロトタイプベースの継承メカニズムを採用しています。
したがって、JavaScriptは厳密にはオブジェクト指向ではなく、プロトタイプベースの継承メカニズムは、魂に組み込まれたJSの機能です。
- 注意: ECMAScript 2015 で導入された JavaScript クラスは、本質的には JavaScript の既存のプロトタイプベースの継承のための構文上の砂糖です。このクラス構文は、JavaScript に新しいオブジェクト指向継承モデルを導入するものではありません。
TypeScript
小広告:このメロンが最近TypeScriptの浅い深みにはまり、記事の一部を書いていますが、その注目、続報をクリックしてみてはいかがでしょうか。
TypeScriptはJavaScriptのスーパーセットで、クラスやインターフェイスといったオブジェクト指向の機能をすべてサポートしています。
ここではその一例をご紹介します：
// TypeScript
class Car {
//
engine:string;
// コンストラクター
constructor(engine:string) {
this.engine = engine
}
// 方法
disp():void {
console.log("エンジンは : "+this.engine)
}
}
// JavaScriptにコンパイル
var Car = /** @class */ (function () {
// コンストラクター
function Car(engine) {
this.engine = engine;
}
// 方法
Car.prototype.disp = function () {
console.log("エンジンは : " + this.engine);
};
return Car;
}());
このように、TypeScriptのクラス定義はJavaと非常によく似ており、JavaScriptにコンパイルされた後も、プロトタイプチェーン上で動作するように変換されます。
ここでベン・グアは小さな疑問を投げかけます：クラスベースは必ずしもプロトタイプベースより優れているのか？それぞれの利点は何ですか？自由に議論してください！
callってな感じです。
プロトタイプベースの継承を語る上で、まずこの3つを知ることが重要です。この3つを知らない人はいないでしょうし、手にしておくと便利なツールです。
call(笑)」と、菅野は述懐。
callとapplyは thisを動的に変更するために使用されます。あるオブジェクトがあるメソッドを持っておらず、他の関数が持っている場合、callやapplyの助けを借りて他のオブジェクトのメソッドを使用することができます。
function Free() {
this.free="free"
}
function Food(name1,name2) {// call 別パラメーターで受け取る
Free.call(this, name1,name2);
}
console.log(new Food('banana','apple').free);
function Foods(arr){ // apply アレイを受け取る
Free.apply(this, arr);
}
console.log(new Food(['banana','apple']).free);
bind
bindはcallと似ていますが、bindを呼び出した直後にメソッドを実行することはできません。
var food={name:"apple",func:function(val){console.log(this.name + val)}}
var banana=food.func.bind({name:'banana'},'good taste')
banana()
ここにコリエリゼーションのための穴が掘られます。
継承
ここからがキッカケです！JSプロトタイピングの基本をマスターしたいのであれば、ここで5種類の継承を暗記しましょう。自分の手を汚して、コンソールをF12してみませんか？
プロトタイプチェーンの継承
- プロトタイプ・チェーン
試作チェーン？そんな面倒な公式説明は一切なし。
Object.prototype.protoこのメロンは、1つだけ覚えている：彼らは属性/メソッドを持っていない場合、オブジェクトの属性/メソッドを探すとき、彼らは見つけるためにオブジェクトを作成するコンストラクタを探しに行くと、見つけることができない、あなたが見つけるまで、上を見続ける、プロセスを見つけるのようなチェーン、つまり、プロトタイプのチェーン。
let obj = new Object()
obj.__proto__ === Object.prototype // true
Object.prototype.__proto__=null // すべてが空っぽだ。
- プロトタイプチェーンの継承
利点：親クラスのプロトタイプメソッドを継承できること。
デメリット：プロトタイプの属性はすべて共有されるため、プロトタイプの属性を変更したサブクラスのインスタンスは、他のインスタンスが取得した属性の値も変更することになります。
例1。
// 両親が家を持っていれば、あなたも家を持っています。
function Parent(){
this.house='余裕がある。
}
function Son(){
}
Son.prototype = new Parent()
Son.prototype.constructor=Son // デフォルトのリファレンスをより厳密なものに戻した
var son1=new Son()
console.log(son1.house) //
Son.prototype.constructor
例2。
// 息子が2人いて、両親がアパートを1軒しか持っておらず、それぞれ違う色の壁を塗りたいと考えている場合。
function Parent(){
this.houseColor=[]
}
function Son(){
}
Son.prototype = new Parent()
Son.prototype.constructor=Son
var son1=new Son()
son1.houseColor.push('白い壁を塗る）
var son2=new Son()
son2.houseColor.push('赤い壁を磨け）
console.log(son1.houseColor) // ["刷白墙", "刷红墙"]
これはたぶん戦争になりますよ年長者がペンキを塗ったばかりの白い壁が、2回目には赤く染まりました。
コンストラクトの継承
長所：親クラスの属性がすべてのインスタンスで共有される参照型である問題と、サブクラスにパラメータを渡す問題を解決します。
デメリット：親スーパータイプのプロトタイプメソッドを継承できません。
例3
// 二人の息子が壁を塗る問題を解決
function Parent(){
this.houseColor=[]
}
function Son(){
Parent.call(this) // 更改 this 指向
}
var son1 = new Son()
son1.houseColor.push('白い壁を塗る）
var son2 = new Son()
son2.houseColor.push('赤い壁を磨け）
console.log(son1.houseColor) // ["白い壁を塗る"]
これで長男も、自分が塗った白い壁がまだ白いことに腹を立てることはないでしょう。
例4
// あることが別のことにつながっています。今、継承されたプロトタイプ・オブジェクトはありません。
function Parent(){
}
function Son(){
Parent.call(this) // 更改 this 指向
}
Parent.prototype.getCar = function(){
return '私は車を持っている』。
}
var son1 = new Son()
son1.getCar() // getCar is not a function
組み合わせの継承
組合せ継承 == プロトタイプ連鎖継承 + コンストラクト継承
利点：両方の利点
短所：親クラスのコンストラクタが2回実行される問題。
例5：
// 複合相続：全部欲しい。
function Parent(){
this.houseColor=[]
}
function Son(){
Parent.call(this) // 更改 this 指向
}
Parent.prototype.getCar = function(){
return '私は車を持っている』。
}
Son.prototype = new Parent()
Son.prototype.constructor = Son
var son1 = new Son()
son1.houseColor.push('白い壁を塗る）
var son2 = new Son()
son2.houseColor.push('赤い壁を磨け）
console.log(son1.houseColor,son1.getCar()) // ["白い壁を塗る"] "私は車を持っている"
console.log(son2.houseColor,son2.getCar()) // ["赤い壁を磨く"] "私は車を持っている"
こうして壁は塗り直され、車も手に入りました。家族は幸せですが、両親にとってはちょっとしたストレスです。
寄生的組み合わせ継承
組合せ継承の欠点に対処するために、寄生組合せ継承が生まれました。
要は、Object.create(obj)を使って、サブクラスのプロトタイプにobjを代入した空のオブジェクトを作るということです。
例6
function Parent(){
this.houseColor=[]
}
function Son(){
Parent.call(this) // 更改 this 指向
}
Parent.prototype.getCar = function(){
return '私は車を持っている』。
}
Son.prototype = Object.create(Parent.prototype)
Son.prototype.constructor = Son
var son1 = new Son()
son1.houseColor.push('白い壁を塗る）
var son2 = new Son()
son2.houseColor.push('赤い壁を磨け）
console.log(son1.houseColor,son1.getCar()) // ["白い壁を塗る"] "私は車を持っている"
console.log(son2.houseColor,son2.getCar()) // ["赤い壁を磨く"] "私は車を持っている"
ES6
継承は、クラス、extendsキーワードを通して実装されます。ES6のクラスは構文糖であり、本質的にはES5と同じ構文であることを理解することが重要です。
例7
class Parent{
constructor(){
this.houseColor = []
}
getCar(){
return '私は古い車の
}
}
class Son extends Parent{
constructor(color){
super()
this.houseColor = color
}
getCar(){
return "新しい車を手に入れた"
}
}
const son1 = new Son("白い壁を塗る")
const son2 = new Son("赤い壁を塗る")
console.log(son1.houseColor,son1.getCar()) // ["白い壁を塗る"] "私は車を持っている"
console.log(son2.houseColor,son2.getCar()) // ["赤い壁を磨く"] "私は車を持っている"
パブリッシング・サブスクリプション・モード
なぜここでパブリッシュ・サブスクライブ・モデルを指摘するのですか？
複数の状況が絡んでくるからです。
- 複数の人がリリースを購読しています。
- 複数のリリースに対する複数のサブスクリプション。
- 1回のサブスクリプションで1回のリリースが可能です。
- 一人が複数のリリースを購読しています。
どれも手を汚して、いくつか書いて遊んでみる価値があります。
例8
/*paper*/
var paper={
listen:'',
addlisten:function(fn){//購読者を追加する
this.listenList=fn;
},
trigger:function(){//メッセージを投稿する
this.listenList.apply(this,arguments);
}
}
/* */
paper.addlisten(function(val){
console.log("リトルキングはこのニュースを購読している。+val);
});
/* */
paper.trigger("ニューズウィークがやってきた」);
ここに24のデザインパターンの穴があります。
まとめ
これはTSの深さに浅い このメロンのプロセスの誘導体であり、これらの決まり文句は、時折取り出し、再び見て、実際には、本当に良い感じ！最も重要なことは、私はコンソールにそれについて書くことができるということです。古い知識と新しい知識の衝突は収穫の時です。
いわば、1インチでも前進する喜びがあるのです。
