[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__
相关文章
- 【说站】JavaScript for-in和for-of的不同点
- JavaScript案例:倒计时
- JavaScript 时间戳格式化日期
- ORA-01719: outer join operator (+) not allowed in operand of OR or IN ORACLE 报错 故障修复 远程处理
- ORA-31053: The value of the depth argument in the operator cannot be negative ORACLE 报错 故障修复 远程处理
- ORA-38408: The ADT “string” does not exist in the current schema. ORACLE 报错 故障修复 远程处理
- ORA-48414: The string in the execution option exceeds maximum length [string] ORACLE 报错 故障修复 远程处理
- javascript 正则表达式之分组与前瞻匹配详解编程语言
- Oracle替代in:抛弃IN,开启新的查询方式(oracle代替in)
- Oracle游标IN模式使用指南(oracle游标in)
- MySQL中的IN运算符技巧(mysql查in)
- 查询解锁Oracle多条件In查询的机密(oracle多条件in)
- Oracle Achieves 100% Success: The Strongest Database System in the Market(oracle100)
- 语句SQL Server中使用IN语句处理多值查询(sqlserver中in)
- 如何在MySQL中代替IN关键字(mysql中代替in)
- MySQL中的Out和In操作一个简单的指南(mysql中out in)
- MySQL中使用IN关键字时,字符串的长度有限制吗(mysql中in长度)
- MySQL中的IN语句是否能够走索引(mysql中in走索引么)
- 解析MySQL中IN操作符的实现原理(mysql中in的原理)
- MySQL中的IN查询的性能优化(mysql中in性能)
- 中利用IN语句检索Oracle数据库中的数据(in在oracle数据库)
- 以Oracle IN查询精准定位你要的信息(oracle使用in查询)
- 深入理解Oracle中IN运算符的用法(oracle中的in用法)
- Oracle数据库中的IN关键字深度剖析(oracle中in的详解)
- 查询Oracle中使用IN关键字查询多个值的方法(oracle中in多个值)
- Oracle中两个IN叠加的查询技巧(oracle两个in叠加)
- Javascript阻止javascript事件冒泡,获取控件ID值
- JavaScript控制文本框的值连续加减
- JavaScript动态添加表格行使用模板、标记
- JavaScript自动分号插入(JavaScriptsynat:autosemicoloninsertion)
- 讨论javascript(一)工厂方式js面象对象的定义方法
- javascript循环语句while、do-while、for-in、for用法区别
- javascript针对DOM的应用分析(五)
- javascript动态加载实现方法一
- Javascript中的回调函数和匿名函数的回调示例介绍
- javaScript使用EL表达式的几种方式
- JavaScript语言对Unicode字符集的支持详解
- Javascript中3种实现继承的方法和代码实例
- JavaScript实现从数组中选出和等于固定值的n个数