JSプロトタイプの詳細説明

この記事では、JS プロトタイプの詳細な説明とプロトタイプの 5 つのルールを主に説明します。この記事が役立つことを願っています。

• すべての参照型 (配列、オブジェクト、関数) はオブジェクト特性、つまり自由に拡張可能な属性 ("null" を除く) を持ちます

var obj ={};obj.a=100//100var arr=[];arr.a=100//100function fn(){}
fn.a=100//100

• すべてのアプリケーション型は proto 属性 (暗黙的なプロトタイプ) を持ちます、属性値は通常のオブジェクトです

console.log(obj.__proto__);//{constructor: ƒ, __defineGetter__: ƒ, __defineSetter__: ƒ, hasOwnProperty: ƒ, __lookupGetter__: ƒ, …}console.log(arr.__proto__);//[constructor: ƒ, concat: ƒ, pop: ƒ, push: ƒ, shift: ƒ, …]console.log(fn.__proto__);
//ƒ () { [native code] }

• すべての関数はプロトタイプ属性（明示的プロトタイプ）を持ち、属性値も通常のオブジェクトです

console.log(fn.prototype)
//{constructor: ƒ}

• All The proto属性値は、参照型がそのコンストラクターのプロトタイプ属性値を指す (つまり、すべての参照型の暗黙的なプロトタイプがそのコンストラクターの明示的なプロトタイプを指す)

console.log(obj.__proto__===Object.prototype);  //true//Object是一个构造函数

• オブジェクトの特定の属性を取得しようとするとき、オブジェクト自体がこの属性を持たない場合、その proto (つまり、そのコンストラクターのプロトタイプ) で

/*测试*/function Foo(name,age){
    this.name = name;
}
Foo.prototype.alertName = function(){//由于Foo.prototype本身也是一个对象，而对象是可以自由扩展属性的
    alert(this.name);
}var f = new Foo('zhan');
f.printName = function(){
    console.log(this.name);
}
f.printName();//zhan 可以直接在这个对象中找到这个属性f.alertName();//alert弹出zhan 这时候在这个对象本身找不到这个属性，去Foo.prototype找,得到值/*******************************//*之前在牛可网碰到到一道面试题*/var A = {n:4399};var B = function(){
    this.n = 9999;
}var C = function(){
    var n = 8888;
}
B.prototype = A;
C.prototype = A;var b = new B();var c = new C();
A.n++;
console.log(b.n);//9999console.log(c.n);//4400//先从他的实例中找，找不到去它的构造函数的prototype中找

this

を検索します。上記のテスト コードでは、常に を指します。オブジェクト自体なので、 f.alertName
を実行すると、zhan

ループ自体の属性をポップアップできます

または、上記のテストコードの場合、ループすると、name 属性、alertName 属性、printName 属性を見つけることができますが、一般的には、オブジェクト自体によって定義されている属性 (name 属性や printName 属性など) を取得したいだけです

var itemfor(item in f){    if(f.hasOwnProperty(item)){
        console.log(item);     // 高级浏览器已经在forin中屏蔽了来自原型的属性
     //但在这里建议大家还是加上这个判断，保证程序的健壮性（程序对于规范要求以外的输入情况的处理能力）

    }
}

関連する推奨事項:

インスタンス分析 js プロトタイプと call()

JS プロトタイプの 4 つのステップ継承

jsについて プロトタイプチェーンに関するおすすめ記事7選

以上がJSプロトタイプの詳細説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。