你们真的理解prototype和__proto__嘛?

本文从工厂模式的局限性入手,介绍了原型模式的实现方式及其优势。通过具体示例对比了工厂模式与原型模式的不同,并详细解释了prototype的作用及其实现原理。

前言

一般我们看到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__来支持访问,这么一说,相信大家应该能明白吧

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值