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__

  • 相关阅读:
    PHP 命名空间
    使用 htaccess 重写 url,隐藏查询字符串
    HTML 长文本换行
    Mac OS X 上的Apache配置
    无法debug断点跟踪JDK源代码——missing line number attributes的解决方法
    根据多条件删除还能这样写
    wm_concat()函数
    spring 事务-使用@Transactional 注解(事务隔离级别)
    spring 中常用的两种事务配置方式以及事务的传播性、隔离级别
    oracle 中SQL 语句开发语法 SELECT INTO含义
  • 原文地址:https://www.cnblogs.com/Answer1215/p/12342947.html
Copyright © 2011-2022 走看看