欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

理解Javascript的原型

程序员文章站 2022-05-08 11:23:09
...

过去对Javascript语言的认识就是嵌入浏览器的脚本,而且设计得很糟糕。众所周知当初由于时间紧迫,Javascript的作者完全是赶鸭子上架,因此也留下了许多不合理之处。不管怎么说,V8,node这一系列生态成熟以后,JS的地位早就令人刮目相看了,But,终究还是不太喜欢呐,虽说JS是【世界上最被误解的语言】。

最近由于工作中要用到React框架,又随机补充了一些JS的知识。长期使用面向对象的编程语言,不得不重新理解一下JS的原型,毕竟JS里面的类和继承只是一层语法糖,终究还是通过原型系统实现的。过去曾经在【七周七语言】里面看过原型语言Io的介绍,差不多忘掉了。偏偏Javascript也是一种原型语言,尽管细节上和Io不同。若从没接触过这种概念,会下意识的用面向对象的思维去理解。我把下面三篇文章放在一起看,结合里面的图例,总算是有个大致的理解。

https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Inheritance_and_the_prototype_chain

https://segmentfault.com/a/1190000018895543

https://baijiahao.baidu.com/s?id=1604426873229560999

为防止丢失,把里面的图片都贴一下吧。

function Person(){}
var p = new Person();
p.__proto__ === Person.prototype // true
Person.prototype.constructor === Person // true

理解Javascript的原型

原型链可以一直向上搜索直到null为止。

理解Javascript的原型

/** 在已经创建了实例的情况下重写原型,会切断现有实例与新原型之间的联系 */
function Person(){}
var p = new Person();
Person.prototype = {
    name: 'tt',
    age: 18
}
Person.prototype.constructor === Person // false
p.name // undefined

/** 重写原型对象,会导致原型对象的 constructor 属性指向 Object ,导致原型链关系混乱,所以
    我们应该在重写原型对象的时候指定 constructor属性,instanceof 仍然会返回正确的值。*/
Person.prototype = {
    constructor: Person
}

理解Javascript的原型

关于__proto__(图片三连)。

理解Javascript的原型

理解Javascript的原型

理解Javascript的原型

相关标签: 多范式编程