JavaScript基本知识点补充01(详细解释何为原型对象)

前端基础系列目录

HTML相关知识点整理

CSS相关知识点整理(超详解高度塌陷)

JavaScript基本知识整理(循序渐进,有条不紊)

---

本文承接自JavaScript基本知识整理(循序渐进,有条不紊)继续帮助大家快速回顾JavaScript的一些重要知识点,毕竟是前端中最最需要重视的一部分,事不宜迟,快速开始吧( •̀ ω •́ )✧

1.原型对象

每当我们定义一个函数,如function fun(){},解析器会默认给它添加一个属性,就是prototype。
打印这个属性,console.log(fun.prototype)我们能明显的看到属性值是一个对象，该对象也被称为这个函数的原型对象
我们可以把原型对象看作这个函数的爸爸。作为该函数的原型对象他有什么特点:
1.爸爸所拥有的属性,儿子都会继承到
如果fun.prototype.name = 'name'，那么fun.name = 'name'
2.如果我们自定义一个函数,那么一般它的原型对象是个空对象,也就是没有属性
3.我们可以自定义函数的原型对象的属性和属性值。
4.作为该函数的爸爸,他也有一个爸爸,我们可以一直找他的爸爸直到找到一个对象叫做Object

2. 原型链

当我们调用一个函数的某一方法时，如果它自身并没有定义该方法,那么解析器会追根溯源,寻找他的原型对象有没有这个方法,如果他的爸爸有同名方法,那么会直接调用他爸爸的这个方法,没有,那么会找爸爸的爸爸,直到找到老祖宗Object为止。
因为从Object到一开始的那个函数的联系都是通过prototype联系起来的，我们也就称这个联系叫做原型链。

3.实例对象

我们定义一个函数一般都会把他赋值给一个变量上。
如var a = new function fun(){}
此时,函数fun有的方法,a也会具备。
我们把a称作这个函数的实例对象,那么实例对象是否能找到函数的爸爸呢?
答案是可以的。
解析器在赋值fun给a的时候会给a添加一个__proto__的属性
通过打印a.__proto__这个属性,我们惊奇的发现!(好吧不是很惊奇╮(╯-╰)╭)
该属性也指向了函数的原型对象。也就是a.__proto__ = fun.prototype

4.constructor属性

以上3条都是基于儿子找爸爸怎么找,那么爸爸能不能找到儿子呢?答案是可以的
通过constructor这个属性，爸爸就能找到儿子。
也就是说fun.prototype.constructor还是fun本身

5.谈一谈什么时候要用到函数?

当我们需要定义大量具有相同类似属性的对象的时候
我们可以通过定义一个函数,
那么我们可以将这个函数的相同属性赋值给大量的实例对象,
节约了代码量和时间成本。同时原型对象这个概念能够帮助我们更加合理的控制儿子和爸爸的属性。
顺带一提,儿子是可以随时换爸爸的哦,也就是fun.prototype可以随时找一个更加合适自己的爸爸。
下面是一张帮助大家更好理解原型链的图:

6.事件冒泡和事件捕获是什么?

我们对网页的各种操作(点击,滚轮滚动,鼠标平移等)在页面中都会被捕获到,并且是由外向内捕获。此为捕获阶段
当捕获阶段完成后,会依次从内向外判断是否我们做的操作符合了开发者规定的事件,如果我们做的操作符合,那么就会执行相应事件的代码。
此为冒泡阶段
冒泡很容易让本不想被操作的父元素因为子元素的操作而被误触发,开发者因此想了一些方法来避免这种情况的出现。通过添加 e.stopPropagation();
当解析器读到这段代码就能够阻止继续产生冒泡

总结

至此,对于基础Javascript还有一点小尾巴没有解决,下一周我还会更新一次基础知识点的整理。即时帮助自己梳理,也是帮助大家,前路还是相当漫长的,大家一起努力吧！