[JavaStript学习记录] 对原型链的一些理解

news/2024/7/19 13:20:25 标签: js, javascript

回忆一下昨天的学习内容,梳理一些疑惑

先写了一个简单的构造函数

javascript">function A(){
    var num=0;
}

var aa=new A();

查看该函数的实例

 

为什么实例对象没有prototype属性呢?

下面是经过查证后我的理解

 发现

1.aa 是 A 的一个实例,但是不是一个函数,所以没有prototype; A是Function的一个实例,而Function是一个函数,他的实例A也是一个函数,所以他们都有prototype。此外Object ,Array, RegExp等也是函数。Math就仅仅是一个new Object() ,不是函数。

2.构造函数的prototype,默认情况下就是一个new Object()还额外添加了一个constructor属性。

3.除了Object.prototype这个对象,其他所有的对象都会有__proto__属性,之后函数才会有prototype属性。

 

在创建对象的时候会自动创建一个__proto__属性,指向它构造函数的prototype,当访问这个对象的属性的时候会顺带访问__proto__中对应的属性,也就是构造函数prototype这样实现了继承。
只有创建函数的时候才会创建一个prototype属性,目的就是为了完成上面的继承方式。

总结:

每个构造函数[自动带有一个prototype属性,该属性是一个指针,指向一个对象(即原型对象)]都有一个原型对象,原型对象上包含着一个指向构造函数的指针(constructor),而实例都包含着一个指向原型对象的内部指针(_proto_)。通俗的说,实例可以通过内部指针访问到原型对象,原型对象可以通过constructor找到构造函数。

回顾原型链

javascript">function People(){
    this.type = '人';
}

People.prototype.showType = function(){
    alert(this.type);
}

function Man(){
    this.sex='♂';
    this.age=18;
}

Man.prototype=new People();

var boy=new Man();

console.log('大家好,我'+boy.age+'岁啦,性别为'+boy.sex+'我是'+boy.type+'族的一员');


>>大家好,我18岁啦,性别为♂我是人族的一员

将Man构造函数的prototype指向了People实例对象,从而覆盖了Man的原型对象当Man的实例对象boy去访问type属性时,js首先在Man实例属性中查找,发现没有定义,接着去Man的原型对象上找,Man的原型对象此时已被改成了People实例,那就是去People实例上去找。先找People的实例属性,发现没有type,最后去People的原型对象上去找,找到了。这个查找就是这么一级一级的往上查找。

javascript">function People(){
    this.type = '人';
}

People.prototype.showType = function(){
    alert(this.type);
}

function Man(){
    this.sex='♂';
    this.age=18;
    this.type = '狂战士';//此处定义了type属性,就不会向上层级查找;
}

Man.prototype=new People();

var boy=new Man();

console.log('大家好,我'+boy.age+'岁啦,性别为'+boy.sex+'我是'+boy.type+'族的一员');


>>大家好,我18岁啦,性别为♂我是狂战士族的一员

我们通过原型链的方式,实现 Man继承 People 的所有属性和方法。

总的来说:就是当重写了Man.prototype指向的原型对象后,实例的内部指针也发生了改变,指向了新的原型对象,然后就能实现类与类之间的继承了。


http://www.niftyadmin.cn/n/816856.html

相关文章

[JavaStript学习记录] 模块/封装私有变量

模块(用软件工程的方法,管理网页的业务逻辑) "立刻执行函数" 为了不暴露私有成员,使用"立刻执行函数",将有关的属性、方法封装在一个函数的作用域中 var m (function () {var count 0;var f1 function () {//...};var f2 function () {/…

2018-2019-1 20165333 《信息安全系统设计基础》第六周学习总结

2018-2019-1 20165333 《信息安全系统设计基础》第六周学习总结 教材内容总结 Unix I/O 打开文件。一个应用程序通过要求内核打开相应的文件,来宣告它想要访问一个I/O设备。Linux shell创建的每个进程开始都有三个打开的文件:标准输入(0&…

[JavaScript学习记录] 首次运用于网页,做一个简易利息计算器!!!

目录 事件 错误处理 1.隐藏/显示文字 2.简单的加法计算器 效果: ★★★3.简易利息计算器 效果: ​​​​​​​ 事件 javascript允许html与用户交互的行为 例如:鼠标点击事件 <script> function sayHello{alert(Hello World ppp!); } </script><button …

ubuntu 手动修改分辨率为1920 X 1080 的两种方式

方案一&#xff08;临时性&#xff0c;重启会失效&#xff09;&#xff1a; 1、打开终端。输入&#xff1a;cvt 1920 1080 出现有modeline 的提示。 2、使用 xrandr 创建新的 mode&#xff0c;--newmode 后面跟刚刚 cvt 产生的 modeline 后面的信息&#xff0c;如果去掉“_60.0…

[JavaScript学习记录] BOM小记

浏览器对象模型(Browser Object Model) 浏览器对象包括 Window(窗口) Navigator(浏览器) Screen (客户端屏幕) History(访问历史) Location(浏览器地址) 目录 History Nevigator 弹框 警告框alert​ 确认框conform 输入框 History history.go(-2); //-1表示上次&#xf…

模板:缩点

翻之前记录翻出来缩点的板子 正好今天语文课看tarjan睡着了…… https://www.luogu.org/problemnew/show/P3387 1 #include<iostream>2 #include<cstdio>3 #include<queue>4 using namespace std;5 const int maxn1000010;6 int n, m, cnt, num, s, top;7 in…

[JavaScript学习记录] 异步操作

JavaScript 引擎有多个线程&#xff0c;单个脚本只能在主线程运行,其他线程都在后台配合. 单线程模型虽然对 JavaScript 构成了很大的限制&#xff0c;但也因此使它具备了其他语言不具备的优势。如果用得好&#xff0c;JavaScript 程序是不会出现堵塞的&#xff0c;这就是为什…

[c++] 一个支持安装卸载,复杂运算的简易计算器

这是大一放假前最后做的一个小玩意,现在抽空整理了一下,纪念自己第一个作品 目录 一.技术栈,开发工具 二.需求分析 三.核心算法 四.成果展示 五. 遇到的问题 没加标准表达式 打包过程中的问题 添加卸载的功能 七.安装包获取以及代码 Calculator.h Calculator.cpp m…