zoukankan      html  css  js  c++  java
  • [Javascript] Understanding the difference between .prototype and .__proto__ in JavaScript

    It can be confusing to understand when and how the .prototype and .proto properties are created and used. They both seem to imply having something to do with prototypal inheritance. This is true but possibly not how you think. We'll review each of these properties' role within prototypal inheritance and how they are used in everyday code.

    You can create a constructor function in Javascript:

    function foo () {}

    Once you do it, Javascript will automatcilly create 'prototype' for you:

    It contians two things by defaults:

    • constructor function which points to foo itself.
    • dunder proto: __proto__, it inherent some methods form Object.

    Now if we add this code:

    foo.prototype.test = "testing"

    Now let's try to guess what's the output for following code?

    console.log(foo.test)

    ..

    ..

    ..

    OK, the Answer is 'undefined'.

    So, why? we have defined on its prototype, why it is still undefined. It might confuse a lot of people come to Javascript.

    Let's use OOP approach to explain what you have done:

    class foo {
    
      public test = 'testing';  
    
       constructor() {}
    }

    So, now, if I ask you what's the output of 'foo.test'? You might know the correct answer.

    If you want to access 'test' prop, you have to do:

    const ifoo = new foo()
    console.log(ifoo.test) // testing

    OK, what's happen in Javascript? 

    In short, the answer is, when you use 'new' keyword to make a new instance 'ifoo'.

    Javascript copy the 'foo.prototyp' which contains {test: 'testing', constructor: foo() {}} to __proto__.

    And __proto__ is accessable by instanse which is 'ifoo'.

    foo.prototype === ifoo.__proto__
    // true

    Take away: foo.prototype just like define some methods or props inside a Class. The props and methods you have defined cannot be directly access by foo.<prop|method>; To access those, you need to create a new instance, Then the new instance can access it via __proto__

  • 相关阅读:
    css 重新学习系列(1)
    sublime Text 使用
    值得收藏的前端大牛博客
    javascript中最常用的方法
    ie6,ie7兼容性总结
    jQuery学习笔记(二)
    jQuery学习笔记(一)
    php smarty
    javascript DOM(2) 一个网页上切换显示不同的图片或文本
    effective c++ 8: Prevent exceptions from leaving destrctors
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12342947.html
Copyright © 2011-2022 走看看