Cet article vous aidera à comprendre le prototype et la chaîne de prototypes en JavaScript

Le prototype et la chaîne de prototypes sont des points difficiles et clés en JavaScript. L'article suivant vous aidera à comprendre le prototype et la chaîne de prototypes. J'espère qu'il vous sera utile !

Si votre compréhension des prototypes et des chaînes de prototypes est encore à un stade très superficiel et ambigu, vous souhaiterez peut-être jeter un œil à cet article. Il devrait vous être utile. si vous pouvez m'aider, n'hésitez pas à aimer, commenter et retweet. Si vous avez des questions ou des doutes, vous pouvez laisser un message dans la zone de commentaire. Si vous pensez qu'il y a une erreur de connaissance dans mon article, faites-le-moi savoir. les choses en bonnes choses, ce qui est bénéfique pour notre industrie.

Bien que j'aie souvent répondu à des questions d'entretien sur des prototypes auparavant, je suis toujours resté à un stade très superficiel de points de connaissances vagues, et j'ai souvent oublié (je crois que tout le monde est pareil, hahaha), profitant des vacances du Nouvel An le dernier jour (j'ai enfin touché le clavier), j'ai suivi une vidéo de la Station B pour acquérir quelques connaissances pertinentes, et j'en ai enfin eu une compréhension globale. Ici, ils sont organisés et résumés.

Woo hoo hoo, je le jure ici, peu importe à quel point je suis occupé la semaine prochaine, je dois revoir cet article,
Sinon
Sinon
les Nuggets auront toujours des bugs.

Connaissez d'abord la relation correspondante

prototype : prototype prototype：原型
__proto__：原型链（链接点）

• 从属关系

  • prototype ： 函数的一个属性 -> 不要想的太复杂，其实就是一个普通对象{}
  • __proto__ ： 对象上的一个属性 -> 不要想的太复杂，其实就是一个普通对象{}

• 对象的__proto__保存着对象的构造函数的prototype

• 函数是特殊对象 所以__proto__在函数上也是存在的，且是个function

大家经常忽略忘记的一点：Object是个方法（构造函数），new Object是个实例对象！！！

console.log(Object) //typeof Object ==='function'
console.log(new Object) //typeof new Object ==='object'

constructor

constructor就是实例化对象的构造函数

//test.constructor -> 实例化test对象的构造函数 Test
console.log(test.constructor===Test) //true

//这里个人理解为永无止境的自身调用自身，求解，没找到相关文章。
console.log(test.constructor.prototype.constructor===Test) //true
console.log(test.constructor.prototype.constructor.prototype.constructor===Test) //true
//constructor允许更改
function Test2() {
    this.a=123
}
test.constructor=Test2
console.log(test)

原型

function Test(){}
let test=new Test() //new完之后 test是个实例对象了
console.log(test.__proto__===Test.prototype) //根据上面的对应关系表 可以知道结果为true
//Test.prototype也是一个对象，所以他必须也得有__proto__
//Test.prototype.__proto__已经到达终点了,终点是什么，终点就是Object构造函数，所以下面结果为ture
console.log(Test.prototype.__proto__.constructor===Object)
//且 按照上面对应关系中的规则和上条的结果，下条结果也是ture
console.log(Test.prototype.__proto__===Object.prototype) // 
//终点为null
console.log(Object.prototype.__proto__) //null

能不能描述一下原型链

对象的__proto__保存着对象的构造函数的prototype，prototype又是个对象，所以也有自己的__proto__，这样往复到终点Object.__proto__，这样就形成了一个以__proto__为链接点（为key）值为构造方法的prototype对象的一根链条, 即为原型链。

//__proto__
test{
      b:333,
      a:1,
      __proto__:Test.prototype={
          c:222,
          b:2,
          __proto__:Object.prototype={
              c:3,
              __proto__:null
          }
      }
 }

特殊的函数对象

重点：JS中,函数是一种特殊的对象！！！

记住文章开头的对应关系表

//函数是特殊对象 所以__proto__是存在的，且是个function
console.log(Test.__proto__) //function
console.log(Test.prototype) //object

Test既然是个函数，那么底层必然也是new Function实现的，那么

//对象的__proto__保存着对象的构造函数的prototype
console.log(Test.__proto__===Function.prototype) //true 这里是不是和关系表对应上了，能正常理解

const obj={}
const obj2=new Object()

console.log(Object) //function
console.log(typeof Object) //'function'

Function既然是个构造函数，那么他是不是也应该有__proto__和prototype，是的，但是这里有一个特殊的点需要记住。

底层规则规定 ：Function.__proto__===Function.prototype是相等的,且两者返回的都是一个function，我的理解是Function自己构造了自己。

//正常来说函数的Test.prototype应该是个object，
//Function.prototype是个function,这也是一个特殊的点
typeof Test.prototype==='object' //true

console.log(Function.__proto__) // 一个function
console.log(Function.prototype) // 一个function
//Function既然是函数对象_，那么他的_proto__就指向他的构造函数的prototype，也就是
//Function.__proto__===Function.prototype，自己调自己，这样理解是不是也没毛病。
console.log(Function.__proto__===Function.prototype) //true

//Object既然是个构造方法，那么底层也是new Function
console.log(Object.__proto__===Function.prototype) //true

// 因为Function.__proto__===Function.prototype 所以下面代码是成立的
(Object.__proto__===Function.__proto__)===true

hasOwnProperty和in

hasOwnProperty

hasOwnProperty用来判断是否是对象自身的属性（非原型链继承过来的）

let test={
    a:1,
    b:2
}
Object.prototype.c=3
console.log(test.hasOwnProperty('a')) //true
console.log(test.hasOwnProperty('b')) //true
console.log(test.hasOwnProperty('c')) //false

in

in__proto__ : chaîne de prototypes (point de lien)

• Relation d'affiliation

  • prototype : un attribut de la fonction-> Ne pensez pas trop compliqué, il s'agit en fait d'un objet ordinaire{}
  • __proto__ : Un attribut sur l'objet -> Ne pensez pas trop compliqué, c'est en fait un objet ordinaire{}
< li>object< code>__proto__ prototype

• la fonction est un objet spécial, donc __proto__</ code> existe également sur la fonction, et c'est une <code>fonction🎜

🎜Une chose que les gens négligent et oublient souvent : Object est une méthode (constructeur), new Object</ code> est un objet instance ! ! ! 🎜<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>console.log(&amp;#39;a&amp;#39; in test) //true console.log(&amp;#39;b&amp;#39; in test) //true console.log(&amp;#39;c&amp;#39; in test) //true console.log(&amp;#39;toString&amp;#39; in test) //true console.log(&amp;#39;d&amp;#39; in test) //false</pre><div class="contentsignin">Copier après la connexion</div></div><h2 id="constructor-code-constructor-code-est-le-constructeur-de-l-objet-instancié-rrreee-h-data-id-heading-Prototype-rrreee-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-png-alt-Cet-article-vous-aidera-à-comprendre-le-prototype-et-la-chaîne-de-prototypes-en-JavaScript-h-data-id-heading-Pouvez-vous-décrire-la-chaîne-de-prototypes-Le-code-proto-code-de-l-objet-stocke-le-code-prototype-code-du-constructeur-de-l-objet-code-prototype-code-C-est-encore-un-objet-donc-il-a-aussi-son-propre-code-proto-code-qui-va-et-vient-jusqu-au-point-final-code-Object-proto-code-formant-ainsi-un-point-de-lien-avec-code-proto-code-Une-chaîne-d-objets-code-prototype-code-dont-la-valeur-est-la-méthode-constructeur-est-la-chaîne-de-prototypes-rrreee-img-src-static-imghw-default-png-data-src-https-img-php-cn-upload-image-png-class-lazy-title-png-alt-Cet-article-vous-aidera-à-comprendre-le-prototype-et-la-chaîne-de-prototypes-en-JavaScript-Objet-fonction-spéciale-Point-clé-En-JS-la-fonction-est-un-objet-spécial-Rappelez-vous-le-tableau-de-correspondance-au-début-de-l-article-rrreee-Puisque-code-Test-code-est-une-fonction-la-couche-inférieure-doit-également-être-implémentée-par-code-new-Function-code-alors-rrreee-code-Fonction-code-Puisqu-il-s-agit-d-un-constructeur-devrait-il-également-avoir-code-proto-code-et-code-prototype-code-Oui-mais-il-y-a-un-point-particulier-à-retenir-ici-Les-règles-sous-jacentes-stipulent-que-code-Function-proto-Function-prototype-code-est-égal-et-les-deux-renvoient-une-fonction-Je-crois-comprendre-que-code-Function-code-la-construit-elle-même-rrreee-h-data-id-heading-hasOwnProperty-et-in-span-style-max-width-hasOwnProperty-span-code-hasOwnProperty-code-Pour-déterminer-s-il-s-agit-d-un-attribut-de-l-objet-lui-même-non-hérité-de-la-chaîne-de-prototypes-rrreee-span-style-font-size-px-in-span-code-in-code-Utiliser-Pour-vérifier-si-l-objet-contient-un-certain-attribut-y-compris-les-attributs-sur-la-chaîne-du-prototype-rrreee-Recommandations-associées-Tutoriel-d-apprentissage-Javascript">constructor🎜🎜<code>constructor est le constructeur de l'objet instancié🎜rrreee

Prototype🎜rrreee🎜 🎜

Pouvez-vous décrire la chaîne de prototypes🎜🎜Le __proto__ de l'objet stocke le prototype du constructeur de l'objet, prototype C'est encore un objet, donc il a aussi son propre __proto__, qui va et vient jusqu'au point final Object.__proto__, formant ainsi un point de lien avec __proto__ ( Une chaîne d'objets prototype dont la valeur est la méthode constructeur est la chaîne de prototypes. 🎜rrreee🎜🎜Objet fonction spéciale🎜🎜Point clé : En JS, la fonction est un objet spécial ! ! ! 🎜🎜Rappelez-vous le tableau de correspondance au début de l'article🎜rrreee🎜Puisque Test est une fonction, la couche inférieure doit également être implémentée par new Function, alors 🎜rrreee🎜 FonctionPuisqu'il s'agit d'un constructeur, devrait-il également avoir __proto__ et prototype Oui, mais il y a un point particulier à retenir ici ? 🎜🎜Les règles sous-jacentes stipulent que : Function.__proto__===Function.prototype est égal, et les deux renvoient une fonction. Je crois comprendre que Function la construit elle-même. . 🎜rrreee

hasOwnProperty et in🎜🎜🎜hasOwnProperty🎜🎜🎜hasOwnProperty Pour déterminer s'il s'agit d'un attribut de l'objet lui-même (non hérité de la chaîne de prototypes)🎜rrreee🎜🎜in🎜🎜🎜in Utiliser Pour vérifier si l'objet contient un certain attribut (y compris les attributs sur la chaîne du prototype)🎜rrreee🎜[Recommandations associées : 🎜Tutoriel d'apprentissage Javascript🎜🎜]🎜🎜

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!