JavaScipt構文は「クラス」(クラス)[既にES6によってサポートされている]をサポートしていませんが、クラスをシミュレートする方法があります。今日は、主にJavasciptの「クラス」をシミュレートする方法と、JSの継承の要約とレビューについて話します。
JSでの「クラス」と継承を実装することは、鍵と難易度の両方です。多くの学生は、JSの「クラス」と相続についてある程度の理解を持っているかもしれませんが、彼らが深く分析すると、彼らはそうすることができず、あいまいであると感じています。
まず、JSによる「クラス」を定義するためのいくつかの方法を要約しましょう。
方法1:コンストラクターメソッド
この方法は比較的古典的な方法であり、頻繁に表示されます。インスタンスを生成するときは、新しいキーワードを使用します。クラスのプロパティと方法は、コンストラクターのプロトタイプオブジェクトで定義することもできます。
function person(name、age、job){this.name = name; this.age = age; this.job = job;} person.prototype.sayname = function(){alert(this.name);} var person1 = new person( "zhang san"、 "29"、 "web frontpage Manager"); // pop "zhang san" console.log(person2.name)// output "li si"方法2:object.create()メソッド
Method object.creat()新しい演算子の代替としてのcreat()は、ES5後にのみリリースされます。この方法を使用すると、「クラス」は機能ではなくオブジェクトです。
var mymammal = {name: 'herb the mammal'、get_name:function(){return this.name; }、says:function(){return this.saying || ''; }} var mycat = object.create(mymammal); mycat.name = 'henrietta'; mycat.saying = 'meow'; mycat.get_name = function(){console.log(thisasies + '' + this.name + this.says);} mycat.get_name();出力:
function(){return this.saying || ''; } henriettafunction(){return this.saying || ''; }現在、主要なブラウザ(IE9を含む)の最新バージョンがこの方法を展開しています。古いブラウザに遭遇した場合は、次のコードを使用して自分で展開できます。
if(!object.create){object.create = function(o){function f(){} f.prototype = o;新しいf()を返します。 }; }方法3:ミニマリスト法
パッケージ
この方法はこれとプロトタイプを使用しておらず、コードは非常に簡単に展開できます。まず、オブジェクトを使用して「クラス」をシミュレートします。このクラスでは、コンストラクターCreatFn()を定義してインスタンスを生成します。
var dog = {creatfn:function(){//ここにあるコード}};次に、creatfn()で、インスタンスオブジェクトを定義し、このインスタンスオブジェクトを戻り値として使用します。
var dog = {creatfn:function(){var dog = {}; dog.name = "dog"; dog.makesound = function(){ alert("Woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofw oofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo ofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo ofoofwoofwoofoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoo fwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoo fwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoof woofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofw oofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwoofwo使用するときは、creatfn()メソッドを呼び出してインスタンスオブジェクトを取得します。
var dog1 = dog.creatfn(); dog1.makesound(); // woof
このアプローチの利点は、理解しやすく、明確でエレガントな構造を持ち、従来の「オブジェクト指向プログラミング」構造に沿っているため、次の機能を簡単に展開できることです。
継承
次のクラスに1つのクラスを実装するのは非常に便利です。 creatfn()メソッドで後者のcreatfn()メソッドを呼び出すだけです。最初に動物のクラスを定義します。
var animal = {creatfn:function(){var animal = {}; Animal.eat = function(){alert( "Eat Meal"); };動物を返します。 }};次に、犬のcreatfn()メソッドでは、動物のcreatfn()メソッドが呼び出されます。
var dog = {creatfn:function(){var dog = animal.creatfn(); dog.name = "dog"; dog.makesound = function(){alert( "wangwoo"); };犬を返します。 }};この方法で得られた犬のインスタンスは、犬のクラスと動物のクラスを同時に継承します。
var dog1 = dog.creatfn(); dog1.eat(); //食事を食べる
私有地とプライベート方法
dogオブジェクトで定義されていない方法と特性がプライベートである限り、creatfn()メソッドで。
var dog = {creatfn:function(){var dog = {}; var sound = "Woof Woof"; dog.makesound = function(){alert(sound); };犬を返します。 }};上記の例の内部変数音は、外部から読み取ることができず、犬のpublic method makeound()を読むことができます。
var dog1 = dog.creatfn();アラート(dog1.sound); // 未定義
データ共有
場合によっては、同じ内部データを読み書きできるようにすべてのインスタンスオブジェクトが必要です。現時点では、クラスオブジェクト内およびcreatfn()メソッドの外側のこの内部データをカプセル化するだけです。
var dog = {sound: "wowangwoo"、creatfn:function(){var dog = {}; dog.makesound = function(){alert(dog.sound); }; dog.changesound = function(x){dog.sound = x; };犬を返します。 }};次に、2つのインスタンスオブジェクトが生成されます。
var dog1 = dog.creatfn(); var dog2 = dog.creatfn(); dog1.makesound(); // woof
この時点で、インスタンスオブジェクトがあり、共有データが変更された場合、他のインスタンスオブジェクトも影響を受けます。
dog2.changesound( "wuwuwu"); dog1.makesound(); // wuwuwuwu
JS相続
継承に関しては、インターネット上の問い合わせに利用できる多くの情報もありますが、多くの友人はそれを十分に理解していません。継承に関しては、情報を確認せず、突然理由を伝えることができない場合があります。これは、私たちの基本的な知識が十分に堅実ではないことを示しています。完全に理解されていません。今日、私は前任者に基づいて立っており、あなたとのこの相続財産をレビューしましょう。
最も一般的に使用される2つの継承方法は次のとおりです。
プロトタイプチェーンの継承
プロトタイプチェーンの継承とは何ですか?ここでは定義については話しません。実際、プロトタイプを使用して親レベルを継承することです。
例えば:
function parent(){this.name = 'mike';} function child(){this.age = 12;} child.prototype = new parent(); //子は親を継承し、プロトタイプvar test = new child(); alert(test.age); alert(test.name); this.weight = 60;} brother.prototype = new child(); //プロトタイプチェーンを続行するvar兄弟= new brother(); alert(brother.name); //継承親と子、mikealert(brother.age); // pop 12 12上記の例では、プロトタイプを介してチェーンが形成されます。子供は親を継承します。兄弟は子供を継承します。最後に、兄弟は、子供と親の属性の両方を持ち、それ自体の属性を持っています。これが元のチェーンの継承です。
古典的継承(コンストラクターを借りる)
通常、古典的な継承は、コールを使用または適用して、SuperTypeコンストラクターを内部的に呼び出します。例えば:
function parent(age){this.name = ['mike'、 'jack'、 'Smith']; this.age = age;} function child(age){parent.call(this、age);} var test = new child(21); alert(test.age); // 21alert(test.name); // mike、jack、smithtest.name.push( 'bill'); alert(test.name);上記の2つの継承は、最も基本的な2つの継承方法です。
さらに、いくつかの継承方法があります。見てみましょう!
組み合わせ継承
併用継承は通常、上記の2つの継承方法を組み合わせて使用される継承方法です。
例として:
function parent(age){this.name = ['mike'、 'jack'、 'Smith']; this.age = age;} parent.prototype.run = function(){return this.name + 'は' + this.age;}; function child(age){parent.call(this、age); // object forsoneation、pass arguments、pass arguments、pass arguments、supertype alert(test.run()); //マイク、ジャック、スミスは両方21ですプロトタイプの継承
上記の元のチェーン継承とは異なる単語のみですが、同じコンテンツではありません。プロトタイプの継承について私たちが話しているのは、前回のクラスで話したことであり、Object.create()メソッドを介して新しいクラスを作成します。この方法は古いブラウザによってサポートされていないためです。したがって、object.create()を使用しない場合、次のように代替方法もあります。
関数obj(o){function f(){} f.prototype = o;新しいf()を返します。 }この関数は、object.create()でクラスを作成する方法を実装します!
したがって、以下は次のとおりです。
関数obj(o){function f(){} f.prototype = o;新しいf()を返します。 } var box = {name: 'trigkit4'、arr:['brother'、 'sister'、 'baba']}; var b1 = obj(box); alert(b1.name); // trigkit4b1.name = name = 「マイク」;アラート(b1.name); // mikealert(b1.arr); //兄弟、姉妹、babab1.arr.push( 'parents'); alert(b1.arr); //兄弟、姉妹、baba、両親b2 = obj(box); alert(b2.name);寄生性継承
例として:
function creatanother(original){var clone = new object(original); clone.sayhi = function(){alert( "hi")}; return clone;} var person = {name: "haorooms"、friends:["hao123"、 "zhansan"、 "lisi"]} var anotherperson = creatanother(person); antherperson.sayhi(); // hi寄生性の組み合わせ
function enternitprototype(subtype、supertype){var prototype = object.creat(supertype.prototype); prototype.constructor = subtype; subtype.prototype = prototype;}; function supertype(name){this.name = name; this.colors = ['red'、 'blue'、 'green'];} supertype.prototype.sayname = function(){console.log(this.name);} function subtype(name、age){//inheritprototype.call(this name); this.age = age;} // exensitprototype(subtype、supertype); subtype.prototype.sayage = function(){console.log(this.age);} var instance = new subtype();クラスの継承は基本的に上記の方法です。 ES6のクラスクラスについて簡単に話しましょう!
ES6実装クラス
// classクラスポイントを定義します{constructor(x、y){this.x = x; this.y = y; } toString(){return '('+this.x+'、'+this.y+')'; }} var point = new point(2、3); point.tostring()//(2、3)point.hasownproperty( 'x')// truepoint.hasownproperty( 'y')// truepoint.hasownproperty( 'tostring')// falsowpoint .__ proto __。クラスの相続
クラスのカラーポイントはextends point {constructor(x、y、color){super(x、y); //親クラスthis.color = colorのコンストラクター(x、y)を呼び出します。 } toString(){return this.color + '' + super.toString(); //親クラスのtoString()を呼び出す}}