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__

  • 相关阅读:
    进阶新的阶段--LCD
    UART的调试
    s5pv210的定时器
    s5pv210的外部中断
    按键的轮询
    点亮指路灯
    队列里面的二级指针
    链表实现学生成绩管理系统
    链表基本功能
    new的用法
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12342947.html
Copyright © 2011-2022 走看看