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

JS夯实基础系列之原型与原型链

程序员文章站 2022-05-08 16:43:53
...

本篇为网络教学视频自学做的笔记。
视频地址:JavaScript高级–15.函数的prototype

原型prototype

prototype是函数的属性,每一个函数内置(隐含)都有一个prototype属性,它默认指向一个Object空对象。

测试1:打印内置的prototype

console.log(Date.prototype);

打印结果(显示不全):
JS夯实基础系列之原型与原型链

测试2:打印一个自定义函数的prototype

function fn1(){

}
console.log(fn1.prototype);

打印结果:
JS夯实基础系列之原型与原型链
constructor指向函数自己
JS夯实基础系列之原型与原型链

prototype的作用

在函数的prototype上添加的属性(或函数方法)可以直接被函数的实例调用。

function Fn(){

}
Fn.prototype.showMsg = function(msg){
    alert(msg)
}

var fn= new Fn();
fn.showMsg("Hello prototype");

显式原型与隐式原型

  • 每一个函数都有一个prototype属性,即为显示原型;
  • 每一个实例对象都有一个__proto__属性,即为隐式原型;
    JS夯实基础系列之原型与原型链
    内存示意图:
    JS夯实基础系列之原型与原型链

JS夯实基础系列之原型与原型链

原型链(隐式原型链)

解释:

访问一个对象的属性时:

  • 首先在自身属性中查找,找到返回
  • 如果自身属性没有,沿着__proto__这条链逐级向上查找,找到返回
  • 如果一直查找到Object的__proto__,返回undefined
    JS夯实基础系列之原型与原型链

JS夯实基础系列之原型与原型链

JS夯实基础系列之原型与原型链
原型链的尽头:Object的__proto__:null。
JS夯实基础系列之原型与原型链

JS夯实基础系列之原型与原型链

JS夯实基础系列之原型与原型链

Object()是Function()的一个实例。
JS的所有函数都是Function()的一个实例。

果然函数是JS的一等公民

原型链的应用

基于原型链的继承

因为创建实例就会继承隐式原型(构造函数的显示原型),就可以访问其原型上的属性(或方法),所以基于此可以实现一种类似父类到子类的继承关系。

原型链的属性问题

JS夯实基础系列之原型与原型链
因为原型链的属性问题,所以一般将属性都写在对象自身上,而不是写在原型上。
JS夯实基础系列之原型与原型链

instanceof

JS夯实基础系列之原型与原型链