你们真的理解prototype和proto嘛？

makeFoxPlay 发布于2019-08-23 10:41 / 2401人阅读

摘要：我们知道创建了一个函数就带了一个属性，创建一个实例就带着一个指针，这个指针是实例和构造函数的原型对象间的联系，这个指针在脚本中是不可见的，也就是你不能访问的，但是在和中，提供了来支持访问，这么一说，相信大家应该能明白吧

前言

一般我们看到prototype就会下意识的说这不就是原型对象嘛？但是你们真的了解prototype嘛？就当你们很了解了，毕竟是基础知识，我就简单说说

正文

先说说工厂模式的由来吧，创建对象我们通常可以用new Object()或者直接对象字面量{}创建，但是要是对象之间又有其他共用的代码块又将如何呢？不错，这会造成大量的代码冗余，因为在JS的世界里没有接口的概念（ES5之前），我们平时在JS所说的类也并非实际意义上的类，很多类的特性JS都没有，我一般就把JS的类称为一个"另类"，虽然ES6有了所谓的接口，但是万变不离其宗。扯得有点远啊,既然普通创建对象会造成冗余，那怎么避免呢？起初用的是工厂模式，如demo1所示：

demo1

function demo1 () {
    this.name = "mirok",
    this.show = show
}
function demo2 () {
    this.name = "july",
    this.show = show
}
function show () {
    console.log(this.name)
}
var name = "global"
new demo1().show() //mirok
new demo2().show() // july
show() //global

虽然demo1解决了问题，但是这样写没有任何封装而言, show函数并不是引用类型特定能访问的，如demo1输出了global一样，为了解决此类问题，便有了原型模式，也就是你们经常用的prototype

demo2

function Demo2 () {
}
Demo2.prototype.show = function() {
    console.log(this.name)
}
var obj1 = new Demo2()
var obj2 = new Demo2()
obj1.name = "mirok"
obj2.name = "july"
obj1.show() //mirok
obj2.show() // july

网上有很多解释了__proto__和prototype的区别，还各自写了例子，虽然说了很多，也是解释得不清不楚。我们知道创建了一个函数就带了一个prototype属性，创建一个实例就带着一个[[prototype]]指针，这个指针是实例和构造函数的原型对象间的联系，这个指针在脚本中是不可见的，也就是你不能访问的，但是在Firefox、Safari 和 Chrome中，提供了__proto__来支持访问，这么一说，相信大家应该能明白吧

云服务器 GPU云服务器 i节点_检查和修复linux 服务器虚拟化_集群和云 prototype_proto __JS

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96599.html

你们真的了解JS的继承嘛？

摘要：这又是什么呢这个相对之前的比较复杂，但是高效的一点是只调用一次被继承者构造函数原理就是通过寄生方式创建一个被继承者的副本，副本和被继承者共用一个这样就解决了之前的问题返回的一个副本设置指向因为新副本的原型对象被重写副本作为的原型对象前言我们学JAVA的时候说到继承就是一个extends ClassName的事情，但是在JS的世界里继承和我们在JAVA所认识的继承实现方法又有一些不同...

ssshooter 2019-08-23 10:51 评论0 收藏0
为啥我要自己实现一个new语法糖？

摘要：为啥我要自己实现一个语法糖为什么要自己实现一个语法糖呢因为之前对于里的语法糖一直是理论理解但是并亲自尝试实现过。直到有一天在头条的面试中我聊了摸着自己的良心说我可以实现一个语法糖面试官嗯那你实现一个吧。我们知道构造函数一般是不写的。为啥我要自己实现一个new语法糖？为什么要自己实现一个new语法糖呢? 因为之前对于JS里的new语法糖一直是理论理解,但是并亲自尝试实现过。直到有一...

andycall 2019-08-22 16:26 评论0 收藏0
[JS相关的记录01] 那什么来面对你，面向对象编程(__proto__,prototype,con

摘要：首先定义空函数这个不用解释，然后把这个空函数的原型指向为的原型，然后再把的原型指向这个新的对象，一个完美传递最后，在把原型的构造方法定义成华丽的转身，结果如下结果还是不对，于是我又在大神的肩膀上垫了一下脚。总是听说面向对象，类，继承，__proto__，prototype，constructor.......于是乎小整理一下。首先说，JS里的继承是怎么弄的呢？首先创建类(Pers...

raledong 2019-08-20 16:44 评论0 收藏0
关於Javascript中的new运算符,构造函数与原型链一些理解

摘要：前言文章主要基于高级程序设计总结的基本重写了全文补充知识点新增实例优化排版新增检测方法技巧用法构造函数创建一个用护定义的对象类型的实例或具有构造函数的内置对象类型之一命令执行构造函数返回一个实例对象构造函数一个指定对象实例的类型的函数传惨一前言文章主要基于>总结的!!!PS: 2018/05/09 基本重写了全文,补充知识点,新增实例,优化排版PS: 2018/05/11 新增检测...

cikenerd 2019-08-26 10:26 评论0 收藏0
如何优雅的理解ECMAScript中的对象

摘要：标准对象，语义由本规范定义的对象。这意味着虽然有，本质上依然是构造函数，并不能像那样表演多继承嵌套类等高难度动作。不过这里的并不是我们所说的数据类型，而是对象构造函数。序 ECMAScript is an object-oriented programming language for performing computations and manipulating computat...

why_rookie 2019-08-20 17:31 评论0 收藏0