ホームページ >ウェブフロントエンド >jsチュートリアル >JavaScript プロトタイプのプロパティの説明 object_javascript スキル

JavaScript プロトタイプのプロパティの説明 object_javascript スキル

WBOY
WBOYオリジナル
2016-05-16 18:32:291063ブラウズ

一、什么是JavaScript中对象的prototype属性
  JavaScript中对象的prototype属性,是用来返回对象类型原型的引用的。我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会”继承”赋予该对象原型的操作。但是这个prototype到底是怎么实现和被管理的呢?
对于对象的prototype属性的说明,JavaScript手册上如是说:所有 JavaScript内部对象都有只读的 prototype 属性。可以向其原型中动态添加功能(属性和方法),但该对象不能被赋予不同的原型。然而,用户定义的对象可以被赋给新的原型。

  在JavaScript中,prototype对象是实现面向对象的一个重要机制。每个函数就是一个对象(Function),函数对象都有一个子对象prototype对象,类是以函数的形式来定义的。prototype表示该函数的原型,也表示一个类的成员的集合。在通过new创建一个类的实例对象的时候,prototype对象的成员都成为实例化对象的成员。
  1、该对象被类所引用,只有函数对象才可引用;
  2、在new实例化后,其成员被实例化,实例对象方可调用。
  同时,函数是一个对象,函数对象若直接声明成员,不用被实例化即可调用。
JavaScript通过一种链接机制来支持继承,而不是通过完全面向对象语言(如Java)所支持的基于类的继承模型。每个JavaScript对象都有一个内置的属性,名为prototype。prototype属性保存着对另一个JavaScript对象的引用,这个对象作为当前对象的父对象。 
 

オブジェクトの関数または属性がドット表記法で参照される場合、その関数または属性がオブジェクトに存在しない場合は、オブジェクトのプロトタイプ属性が使用されます。これが発生すると、オブジェクトのプロトタイプ プロパティによって参照されるオブジェクトがチェックされ、要求されたプロパティまたは関数が存在するかどうかが確認されます。プロトタイプ属性によって参照されるオブジェクトに必要な機能または属性がない場合、このオブジェクト (プロトタイプ属性によって参照されるオブジェクト) のプロトタイプ属性がさらにチェックされ、要求された機能または属性が見つかるまでチェーンが検索されます。または、要求された関数または属性がチェーンの終端に到達しても見つからない場合は、unknown が返されます。この意味で、この継承構造は、「である」関係ではなく、「ある」関係である必要があります。
神様、何も理解できません。どうすればよいでしょうか?すごいことになっているようですが、正直、私にも理解できません! ^_^ ^_^ ^_^
2. プロトタイプ属性の適用例
一般的なクラスには、配列変数 (Array)、論理変数 (Boolean)、日付変数 (Date) が含まれます。 、構造変数 (Function)、数値変数 (Number)、オブジェクト変数 (Object)、文字列変数 (String) など、および関連するクラス メソッドもプログラマによってよく使用されます (ここではクラスを区別する必要があります)。配列のpushメソッド、日付のget seriesメソッド、文字列のsplitメソッドなど
しかし、実際にプログラミングしてみると、既存のメソッドの欠点を感じることはありませんか?プロトタイプ方式が誕生しました!以下では、例を通してプロトタイプの使い方を簡単なものから奥深いものまで説明します。
まず愚かな例を見てみましょう:

JavaScript コード
function func(){
func.prototype。 name = “func のプロトタイプ”;
var f = new func();
alert(f.name); // func オブジェクトを作成し、名前を設定します。属性、インスタンス化 f;

1. いくつかの簡単な例:
(1) 数値の加算:
JavaScript コード
Number.prototype.add=function(num){
return (this num); //これは数値
} を指します
alert((3).add(15));//18
(2) Boolean.rev() : 関数、否定ブール型変数の
実装メソッド: Boolean.prototype.rev = function(){return(!this);}
テスト:alert((true).rev()) -> false を表示
2既存メソッドの実装と拡張。最初のプロトタイプの紹介:
(1) Array.push(new_element)
関数: 配列の最後に新しい要素を追加します。
実装メソッド:
配列.prototype.push = function(new_element){
this[this.length]=new_element;
return this.length;
}
一度実行できるようにさらに強化してみましょう 追加複数の要素!
実装方法:
Array.prototype.pushPro = function() {
var currentLength = this.length;
for (var i = 0; i This[currentLength i] = argument[i];
}
return this.length;
}
理解するのは難しくないはずですよね。類推すると、Array.pop を拡張することで、任意の位置の任意の数の要素を削除する方法を検討できます (具体的なコードについては詳しく説明しません)

3. 新しい関数の実装、詳細なプロトタイプ: とは実際のプログラミングで使用されるのは、既存のメソッドの強化だけではなく、より多くの機能要件も含まれることは明らかです。以下に、実際的な問題を解決するためにプロトタイプを使用する 2 つの例を示します。
(1) String.left()
問題: VBを使ったことがある人ならご存知かと思いますが、文字列の左側からn文字を取り出す関数は、全角も半角も1文字とみなされ、インターセプトできないという欠点があります。中国語と英語の混合レイアウト。長い文字列
機能: 文字列の左側から n 文字をインターセプトし、全角文字と半角文字の区別をサポートします。
実装方法:
文字列。 prototype.left = function(num,mode){
if(!/d /.test(num))return(this);
var str = this.substr(0,num);
if (!mode) return str;
var n = str .Tlength() – str.length;
num = num – parseInt(n/2);
return this.substr(0,num);
}
テスト:alert(“aa Laaa”.left(4)) -> aa lala を表示
alter("aalalaaa".left(4,true)) -> aa lala を表示
このメソッドは上記の String.Tlength() メソッドを使用します。また、いくつかの優れた新しいメソッドをカスタム メソッド間で組み合わせることができます。
(2) Date.DayDiff()
機能:2つの日付変数間の間隔(年、月、日、週)を計算
実装方法:
Date.prototype.DayDiff = function(cDate ,mode){
cDate.get Year(); varbase =60* 60*24*1000;
var result = Math.abs(this – cDate);
switch(モード){
case “y”:
result/=base*365;
Break;
case “m”:
result/=base*365/12;
Break;
case “ w”:
result/=base*7;
ブレーク;
デフォルト:
result/=base;
ブレーク;
}
return(Math.floor(result) ));
}
テスト:alert((new Date( )).DayDiff((new Date(2002,0,1)))) -> 329
alert((new Date( )).DayDiff((new Date(2002,0,1)),” m”)) -> Display 10
もちろん、さらに拡張して応答の時間、分、さらには秒を取得することもできます。 。
(3) Number.fact()
関数:ある数値の階乗
実装方法:
Number.prototype.fact=function(){
var num = Math.floor( this);
if(num if(num==0 || num==1)
return 1;
else
return (num*(num -1).fact());
}
テスト:alert((4).fact()) -> 表示 24
このメソッドは主にプロトタイプでも再帰メソッドが使用されていることを示しています方法 それはうまくいきます!
例:
配列の最大値を取得します:
JavaScript コード
var oArr=new Array();prototype.MAX=function(){
var i,max=this[ 0];
for(i=1;i if(max max=this[i]; 🎜> }
return max;
}
alert(oArr.MAX());
インスタンスはユーザー定義のクラス追加メソッドです:
JavaScript コード
function TestObject()
{
this.m_Name = “ffffffffff”;
}

TestObject.prototype.ShowName = function()
{
alter(this.m_Name); > };
var f=new TestObject();
f.ShowName();
カスタム クラスのプロトタイプを更新します:

JavaScript コード
function TestObjectA()
{
this.MethodA = function()
{
alert('TestObjectA.MethodA()');
}
}

function TestObjectB()
{
this.MethodB = function()
{
alert('TestObjectB.MethodB()');
}
}

TestObjectB.prototype = new TestObjectA();
これは誤解された継承だと聞きました。今後ゆっくり学習していきます。
別の例を見てください。あなたも私もおかしくなったと思います:

JavaScript コード
function RP()
{
RP.PropertyA = 1;
RP。 MethodA = function()
{alert(“RP.MethodA”);

this.PropertyA = 100;
this.MethodA = function()
{ 🎜 >{
alert(“RP.prototype.MethodA”);
//以下が実行されます
rp = new RP(); / /警告結果は 1
RP.MethodA();//警告結果は RP.MethodA
alert(rp.PropertyA);//警告結果は 100
rp. MethodA(); //警告の結果は次のとおりです: this.MethodA
delete RP.PropertyA;
alert(RP.PropertyA); //警告の結果は次のとおりです: unknown

delete rp.PropertyA; ;
alert( rp.PropertyA);// 警告結果は次のとおりです: 100
delete rp.MethodA;
rp.MethodA();// 警告結果は次のとおりです: RP.prototype.MethodA
パラメーターを使用して別のものを見て、円の面積を計算します:

JavaScript コード
; This.y = y の定義には構造的な違いはありません。 , したがって、すべての関数がそのような隠し属性を持っていると言えます。 */
alert(parseInt(Circ.area()));

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