Explication détaillée du prototype JS

Cet article partage principalement avec vous l'explication détaillée du prototype JS et les 5 règles du prototype. J'espère que cet article pourra vous aider.

• Tous les types de référence (tableaux, objets, fonctions) ont des caractéristiques d'objet, c'est-à-dire des attributs librement extensibles (sauf "null")

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

• Tous les types d'applications ont un attribut proto (prototype implicite), et la valeur de l'attribut est un objet ordinaire

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

• Toutes les fonctions ont un attribut prototype (prototype explicite), et la valeur de l'attribut est également un objet normal

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

• Le proto la valeur d'attribut de tous les types de référence pointe vers la valeur d'attribut de prototype de son constructeur (c'est-à-dire que le prototype implicite de tous les types de référence pointe vers le prototype explicite de son constructeur)

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

• Lorsque vous essayez d'obtenir un certain attribut d'un objet, si l'objet lui-même n'a pas cet attribut, alors son proto (c'est-à-dire son constructeur) sera Rechercher

/*测试*/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

pour le code de test ci-dessus, pointe toujours vers l'objet lui-même, donc l'exécution de f.alertName
peut apparaître zhan

Les attributs de la boucle elle-même

Pour le code de test ci-dessus, si vous effectuez une boucle, vous pouvez trouver l'attribut name, l'attribut alertName et l'attribut printName. Mais en général, nous espérons seulement obtenir le. attributs définis par l'objet lui-même, tels que : attribut name et attribut printName

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

    }
}

Recommandations associées :

Analyse d'instance prototype js et appel()

Quatre étapes de l'héritage du prototype JS

7 articles recommandés sur la chaîne de prototypes JS

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!