什么是原型,为什么要有原型,形象例子带你迅速搞懂

什么是原型

我们创建的每一个函数(普通函数,构造函数都算),解析器都会向函数中添加一个属性-prototype

而这个prototype,是以对象的形式存储的,所以叫它原型对象

    function fun() {
    }
    console.log(fun.prototype);

在这里插入图片描述

每一个函数都有自己独一无二的prototype

    function fun() {
    }
    function fn() {
    }
    console.log(fun.prototype == fn.prototype);//false

如果函数作为普通函数调用prototype,则没啥作用

但是当函数通过构造函数调用时,它所创建的对象中都会有一个隐含的属性,指向该构造函数的原型对象,正常浏览器不给我们看但是我们可以通过__proto__来访问该属性

    function Fun() {
    }
    var fun = new Fun()
    console.log(fun.__proto__)

为什么JS要有原型这个东西呢

我们举一个例子好吧

假设我们每个人都是一个构造函数构造出来的对象

假如,我们现在都是学生

而且我们是一个班的

可不可以先理解为:这个班级就是这个构造函数,我们这些学生是这个班级的构造函数创建出的对象

我们每个人,在班级里,都有自己的书,自己的私人物品,可不可以先理解为,这些私人物品,就是自己的属性和方法

但是,班级这个大家庭,是不是有一个公共物品,比如:拖布,大屏幕

我们班级这个构造函数,有个地方,用来放这个拖布和大屏幕

这个地方,就是原型,一块共有的区域

我们总不能人手一个拖布,人手一个屏幕吧

是不是班级,这个公共的区域,提供给我们,一些可以公用的东西,不需要我们自己携带

翻译到代码里

是不是这个公共区域,就是原型对象!

拖布,大屏幕是不是就是原型对象里的,班级这个构造函数里的我们这些对象的,共有的属性和方法

也就是原型对象的属性和方法

为啥要有这个原型,是不是因为,我们不能人手一个拖布啊,是不是人手一个的话,不仅没必要,而且占地方啊

在代码里,是不是就是占内存啊

所以说,就会有原型这个东西

    function Fun() {
    }
    var fun = new Fun()
    var fun2 = new Fun()
    console.log(fun.__proto__ == fun2.__proto__)//true

我们思考为什么结果是true,是不是可以理解为,这两个对象(人),是一个班的

原型对象就相当于一个公共的区域,所有同一个类的实例都可以访问到这个原型对象

我们可以将对象中共有的内容,统一设置到原型对象中

    function Fun() {
    }
    Fun.prototype.a = 123
    console.log(Fun.prototype);
    function Fun() {
    }
    Fun.prototype.a = 123
    console.log(Fun.prototype);
    var fun = new Fun()
    console.log(fun.a);

我没有给fun加属性,看看fun有没有a

fun去原型对象里去找a了

当我们访问对象的一个属性和方法时,它会现在对象自身(人,自己)中寻找,如果有则直接使用 如果没有,就去原型对象(班级)中寻找

以后我们创建构造函数时,可以将这些对象共有的属性和方法(拖布,大屏幕),统一添加到构造函数的原型对象(班级)中去

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

林多多@

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值