プロトタイプチェーンパターン(基本)

プロトタイプチェーンパターン(基本)

案例一
function creat(name, age){
    
    
this.name=name;  
this.age=age;
this.write=function (){
    
    
console.log("i can write"+this.name);
};
}
var p1=new creat("xiaobai",13);
p1.write();
var p2=new creat("xiaohei",15);
p2.write();

console.log(p1.writeJs === p2.writeJs);>>false

コンストラクターパターンにはクラスとインスタンスの概念があり、インスタンスとインスタンスは互いに独立しています。インスタンスの識別

案例一拓展
function creat(name, age){
    
    
this.name=name;  
this.age=age;
creatjsPerson.prototype.writeJs=function(){
    
    
console.log("i can write"+this.name);
};
};
var p1=new creat("xiaobai",13);
p1.write();
var p2=new creat("xiaohei",15);
p2.write();

console.log(p1.writeJs === p2.writeJs);>>true

コンストラクターモードに基づくプロトタイプモードは、パブリックメソッドまたはプロパティの問題を解決します

インスタンス間で同じプロパティとメソッドをパブリックプロパティとメソッドに抽出し、パブリックにする
場合はcreatjsPerson.prototypeに配置します

1.原則

1)、各関数データ型(通常の関数、クラス)には組み込みのプロパティ:prototype(prototype)があり、このプロパティはオブジェクトデータ型の値です
2)、プロトタイプでは、ブラウザーが作成されて次のようになります。彼はプロパティコンストラクター(コンストラクター)を追加しました。プロパティ値は現在の関数(クラス)自体です
3)、各オブジェクトデータ型(通常のオブジェクト、インスタンス、プロトタイプ...)にもプロパティが付属しています:proto、プロパティ値は現在インスタンスが属するクラスのプロトタイプ(プロトタイプ)

案例二
function Fn(){
    
    
this.x=100;
}
Fn.prototype.getX=function (){
    
    
console.log(this.x);
};
var f1=new Fn;
var f2=new Fn;
console.log(Fn.prototype.constructor === Fn);
>>true

ケース2

2. objectは、jsのすべてのオブジェクトデータ型の基本クラス(最上位クラス)です。

1)、f1 instanceof Object >> true >> f1は__proto__を介して上位を検索できるため、レベルがいくつあっても、Objectは常に最後に見つかります
2)、object.prototypeに__proto__属性はありません

3.プロトタイプチェーンモード

f1.hasOwnProperty( "x");
hasOwnPropertyはf1のプロパティです

しかし、f1の私有財産にはそのような方法がないことがわかったので、どのように対処するのでしょうか。

1)「objectname.attribute name」の方法で属性値を取得する場合は、まずオブジェクトのプライベート属性を検索します。この属性がプライベートに存在する場合は、プライベート属性値を取得します。

1.プライベートなものがない場合は、__ proto__を使用して、それが属するクラスのプロトタイプを検索します(クラスのプロトタイプで定義されたプロパティとメソッドはすべて、現在のインスタンスのパブリックプロパティとメソッドです)。プロトタイプが存在する場合、パブリックプロパティ値が取得されます。

2.プロトタイプがない場合は、Object.prototypeが見つかるまで、プロトタイプの__proto__を上向きに検索し続けます
。この検索のメカニズムは、プロトタイプチェーンモードです。

案例三
f1.getX===f2.getX>>true
f1.__proto__.getX===f2.getX
>>true
f1.getX===Fn.prototype.getX
>>true
案例三拓展
function Fn(){
    
    
this.x=100;
this.sum=function(){
    
    };
}
Fn.prototype.getX=function (){
    
    
console.log(this.x);
};
Fn.prototype.sum=function (){
    
    
console.log(this.x);
};
var f1=new Fn;
var f2=new Fn;
f1.sum===f2.__proto__.sum
>>false
f1.sum===Fn.prototype.sum;
>>false

ケース3
2)f1.hasOwnProperty>>f1。プロトproto .hasOwnProperty

IEブラウザーでは、プロトタイプモードは同じ原則ですが、IEブラウザーは、__ proto__を介してパブリックを変更し、__proto__の使用を禁止することを恐れています。

案例四
f1.sum=function(){
    
    
>>修改自己私有的sum
};
f1.__proto__.sum=function(){
    
    
>>修改所属类原型上的sum
};
Fn.prototype.sum=function(){
    
    
>>修改公有的sum
}

おすすめ

転載: blog.csdn.net/yilingpupu/article/details/105486496