js_javascriptスキルの2つの継承方法を詳しく解説

js中继承可以分为两种：对象冒充和原型链方式

一、对象冒充包括三种：临时属性方式、call()及apply()方式
1.临时属性方式

复制代码 代码如下:

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
function F2E(name,id){
     this.temp = Person;
     this.temp(name);
     delete this.temp;
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
var simon = new F2E('Simon',9527);
simon.say();
simon.showId();

2.call()/apply()方式
实质上是改变了this指针的指向

复制代码 代码如下:

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
function F2E(name,id){
     Person.call(this,name); //apply()方式改成Person.apply(this,new Array(name));
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
var simon = new F2E('Simon',9527);
simon.say();
simon.showId();

缺点：先来看这么一张内存分配图：

在OO概念中，new实例化后，对象就在堆内存中形成了自己的空间，值得注意的是，这个代码段。而成员方法就是存在这个代码段的，并且方法是共用的。问题就在这里，通过对象冒充方式继承时，所有的成员方法都是指向this的，也就是说new之后，每个实例将都会拥有这个成员方法，并不是共用的，这就造成了大量的内存浪费。并且通过对象冒充的方式，无法继承通过prototype方式定义的变量和方法，如以下代码将会出错：

复制代码 代码如下:

function Person(name){
     this.name = name;
     this.say = function(){
          alert('My name is '+this.name);
     }
}
Person.prototype.age = 20;
Person.prototype.sayAge = function(){alert('My age is '+this.age)};

function F2E(name,id){
     Person.apply(this,new Array(name));
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}

var simon = new F2E('Simon',9527);
simon.sayAge(); //提示TypeError: simon.sayAge is not a function

二、原型链方式

复制代码 代码如下:

function Person(){
     this.name = 'Simon';
}
Person.prototype.say = function(){
     alert('My name is '+this.name);
}

function F2E(id){
     this.id = id;
     this.showId = function(){
          alert('Good morning,Sir,My work number is '+this.id);
     }
}
F2E.prototype = new Person();

var simon = new F2E(9527);
simon.say();
simon.showId();
alert(simon.hasOwnProperty('id')); //检查是否为自身属性

接下来按照上面的例子来理解以下js原型链概念：

プロトタイプ チェーンは次のように理解できます。js 内の各オブジェクトには隠された __proto__ 属性があり、インスタンス化されたオブジェクトの __proto__ 属性はそのクラスのプロトタイプ メソッドを指し、このプロトタイプ メソッドは別のインスタンス化されたオブジェクトに割り当てることができます。このオブジェクトの __proto__ はそのクラスを指す必要があるため、チェーンを形成します。つまり、

前のコードのコード コードは次のとおりです:

F2E.prototype = new Person()

この文が鍵です。 js オブジェクトが特定の属性を読み取ると、まず独自の属性を検索します。そうでない場合は、プロトタイプ チェーン上のオブジェクトの属性を検索します。つまり、プロトタイプチェーンのメソッドを共有できるため、オブジェクトの偽装やメモリの浪費の問題が解決されます。

欠点について話しましょう:
欠点は明らかです。プロトタイプ チェーンの継承は、サブクラスをインスタンス化するときにパラメーターを親クラスに渡すことができないことを意味します。そのため、関数 person がありません。この例では () パラメータですが、 this.name="Simon" として直接記述されます。次のコードでは期待した結果が得られません:

コードをコピーします コードは次のとおりです:

function person (name){
this.name = name;
}
person.prototype.say = function(){
alert('私の名前は ' this.name);
}

function F2E(name,id){
this.id = id;
this.showId = function(){
alert('おはようございます、先生、仕事です番号は ' this .id);
}
}
F2E.prototype = new Person();

var simon = new F2E("Simon",9527);
simon.say( );
simon.showId();


関数 人(名前){
this.name = 名前;
}

人.prototype.say = function(){
alert('私の名前は ' this.name);
}

function F2E(name,id){
this.id = id ;
this.showId = function(){
alert('おはようございます、先生、私の仕事番号は ' this.id です);
}
}

F2E.prototype = new Person( ); //ここでは値を渡すことはできません。this.name も name も機能しません。F2E.prototype = new Person('wood') と書くこともできますが、この場合は simon.say() となります。私の名前は木です

var simon = new F2E("Simon",9527);
simon.say(); //ポップアップ 私の名前は未定義です
simon.showId() ;

最後に、継承を実装するためのより良い方法であると考えられるものをまとめてみましょう。メンバー変数はオブジェクト偽装を使用し、メンバー メソッドはプロトタイプ チェーンを使用します。コードは次のとおりです。 🎜>
コードをコピー

コードは次のとおりです:function Person(name){ this.name = name;}

person .prototype.say = function(){
alert('私の名前は ' this.name);
}

function F2E(name,id){
Person.call(this ,name);
this.id = id;
}

F2E.prototype = new Person();
//ここで 1 つの詳細に注意してください。showId F2E.prototype = new Person();front
F2E.prototype.showId = function(){
alert('おはようございます、先生、私の仕事番号は ' this.id);}

var simon = new F2E("Simon",9527);
simon.say();
simon.showId();