ホームページ  >  記事  >  ウェブフロントエンド  >  jsプロトタイプチェーンと継承解析(初体験)_javascriptスキル

jsプロトタイプチェーンと継承解析(初体験)_javascriptスキル

WBOY
WBOYオリジナル
2016-05-16 09:00:252411ブラウズ

最初にオブジェクト obj を定義します。オブジェクトのプロトタイプは obj._proto_ です。es5 の getprototypeof メソッドを使用して、obj のプロトタイプをクエリできます。obj のプロトタイプが object.prototype と等しいかどうかを判断します。 . obj のプロトタイプが存在するかどうかを証明します。答えは true を返すので、プロトタイプは存在します。次に、関数 foo() を定義します。どの関数にも、関数のプロトタイプであるプロトタイプ オブジェクトがあります。関数のプロトタイプに任意の属性を追加でき、インスタンス化されたオブジェクトは new (下記) を通じてその属性を共有できます。 2つの例を詳しく紹介します)。

function foo(){}
foo.prototype.z = 3;
var obj = new foo();
obj.x=1;
obj.y=2;
obj.x //1
obj.y //2
obj.z //3
typeof obj.tostring; //function
obj.valueof(); // foo {x: 1, y: 2, z: 3}
obj.hasownproperty('z'); //false

ここで、obj のプロトタイプ (_proto_) は foo 関数のプロトタイプ属性を指し、foo.prototype のプロトタイプは object.prototype を指し、プロトタイプ チェーンの終わりは null です。 z 属性が obj. にあるかどうかを確認すると、 false が表示され、obj に z 属性はありませんが、そのプロトタイプ チェーンを検索すると、 foo.prototype に見つかります。したがって、最初の場合は obj.z=3 になります。たとえば、obj.valueof() と tostring は両方とも object .prototype であるため、オブジェクトのプロトタイプは object.prototype であるため、すべてのオブジェクトはこれら 2 つのプロパティを持ちます。もちろん、次の特殊な場合を除きます。 p>

<span>var</span> obj2 = object.create(<span>null</span><span>);obj2.valueof(); </span><span>//</span><span>undefined</span>

object.create() は空のオブジェクトを作成し、このオブジェクトのプロトタイプはパラメータを指します。次の包括的な例は、クラスを実装して別のクラスを継承する方法を示しています。

//声明一个构造函数person
function person(name,age){
  this.name = name;
  this.age = age;
}
person.prototype.hi = function (){
  console.log('hi,my name is ' + this.name +',my age is '+this.age);
};
person.prototype.legs_num=2;
person.prototype.arms_num=2;
person.prototype.walk = function (){
  console.log(this.name+' is walking !');
};
function student(name,age,classnum){
  person.call(this,name,age);
  this.classnum = classnum;
}
//创建一个空对象
student.prototype = object.create(person.prototype);
//constructor指定创建一个对象的函数。
student.prototype.constructor = student;
student.prototype.hi = function (){
  console.log('hi,my name is ' + this.name +',my age is '+this.age+' and my class is '+this.classnum);
};
student.prototype.learns = function (sub){
  console.log(this.name+' is learning '+sub);
};
//实例化一个对象bosn
var bosn = new student('bosn',27,'class 3');
bosn.hi(); //hi,my name is bosn,my age is 27 and my class is class 3
bosn.legs_num; //2
bosn.walk(); //bosn is walking !
bosn.learns('math'); //bosn is learning math

コンストラクター person と student の this はインスタンス化されたオブジェクト (bosn) を指し、このオブジェクトのプロトタイプはコンストラクターのプロトタイプを指します。

空のオブジェクトを作成するには、object.create() メソッドを使用します。このオブジェクトのプロトタイプは、person.prototype です。この方法で記述する利点は、person.prototype に影響を与えることなく、studnet を自分たちで作成できることです。プロパティ。.prototype の任意の属性。サブクラス student は基本クラス person を継承するため、person.prototype の元の属性を継承できます。直接 person.prototype = student.prototype と書くと、両方とも同じオブジェクトを指すことになり、student.prototype に属性を追加すると、同じ属性が person のプロトタイプ チェーンに追加されます。

コンストラクター student の call メソッドの場合、この内部は新しく作成された student のインスタンス化されたオブジェクトを指し、呼び出しを通じて継承が実装されます。

student.prototype.constructor = student、この文の意味は、student.prototype オブジェクトを作成する関数として student を指定することです。この文が書かれていない場合、オブジェクトの関数は person のままです。

継承を実装するには 3 つの方法があります。

function Person(name,age){
  this.name = name;
  this.age = age;
}
function Student(){

}
Student.prototype = Person.prototype; //1
Student.prototype = Object.create(Person.prototype); //2
Student.prototype = new Person(); //3

上記のjsプロトタイプチェーンと継承解析の記事(初体験)は編集者が共有した内容ですので、ご参考になれば幸いです、またscript homeをもっと応援していただければ幸いです。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。