js中的原型与原型链

js的学习有三座大山, 原型/原型链作用域/闭包异步/单线程,这三个知识点虽然基础但是入门时理解起来比较困难,本文先整理总结原型和原型链这一知识点。

1. 原型链怎么来的?对象的原型和function的prototype属性有什么关系?

通常我们会这样生成一个自定义对象。

function A(){this.pro = '1';
}A.prototype.getPro = function(){return this.pro;
}var a = new A(); // {pro: '1'}
a.__proto__ === A.prototype; // truevar b = new A();
b.__proto__ === A.prototype; // truea.__proto__ === b.__proto__; // true

上面代码表明了使用new调用函数A生成了一个对象a,对象a__proto__属性被指向了函数Aprototype属性。

原型链

当使用字面量的方式已定义对象的时候也是符合上面的情况:

var a = {}; // 该对象的 __proto__ 指向的 Object.prototype 属性// 等同于var a = new Object();

在js中大部分的对象的原型链末端都是指向了 Objcet.prototype 对象。

Object.prototype 也是一个对象,该对象一定也有一个 __proto__ 属性,那么该属性指向哪里? Object.prototype._proto_ === null,返回值是 true

2. 原型链有什么作用?

在对象中访问一个属性,当该属性a并不在对象自身上,这时候就会到 对象的 __proto__ 属性上寻找,如果对象的 __proto__ 上没有属性a,就会到 __proto__ 的 __proto__ 上去寻找,那么什么时候结束呢?当寻找到 Object.prototype 的 __proto__ 就结束了,因为 Object.prototype.__proto__ === null;

function A(){}
A.prototype.a = 111;var obj = new A();
obj.a // 111

3. 原型链到底是什么?

在ES5中一共有6种数据类型,分为两大类基本类型引用类型

基本类型: String, Number, Boolean, Null, Undefined

引用类型: Object

而js中唯一的引用类型对象就具有原型属性(__proto__),该属性的值通常情况下是一个对象,既然是一个对象那就必然也有一个原型属性(__proto__),就这样许多原型就组成了一条原型链。

完整的原型链

注: __proto__属性并不在标准内,但是大部分浏览器都实现了这个属性。使用

使用new调用函数生成对象的步骤

  1. 新建一个对象 new Object()
  2. 关联对象的原型到构造函数的原型属性上
  3. 将构造函数的this指向新建的对象
  4. 执行构造函数
  5. 如果构造函数没有返回值,就返回新建的对象

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/362245.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

线性表--算法设计题2.29

已知A,B和C为三个递增有序的线性表,现要求对A表作如下操作:删去那些既在B表中出现又在C表中出现的元素。试对顺序表编写实现上述操作的算法.(注意:题中没有特别指明同一表中的元素值各不相同)。C code: #in…

HTML5 audio 如何实现播放多个MP3音频

<audio>标签是HTML5中的新标签&#xff0c;定义声音用于嵌入音频内容&#xff0c;比如音乐或其他音频流。用的比较多音频格式是.mp3。 <audio>标签常用属性如下表 属性值描述autoplayautoplay添加该属性后&#xff0c;音频会自动播放controlscontrols设置后&…

Java代码中的典型错误

该页面包含在与我一起工作的人的Java代码中看到的最典型的错误。 静态分析&#xff08;出于明显的原因&#xff0c;我们使用查询无法捕获所有错误&#xff0c;这就是为什么我决定在此处列出所有错误的原因。 如果您要在此处添加其他内容&#xff0c;请告诉我&#xff0c;我们将…

windwos下ntp服务器配置 arm平台ntp客户端获取同步时间

项目需要使用同步时间&#xff0c;在arm-linux开发板上&#xff0c;移植了ntp客户端&#xff0c;查看了一些资料&#xff0c;最终发现使用windows自带的ntp服务器比较方便&#xff0c;而且很靠谱&#xff0c;使用配置了一番&#xff0c;已经能够正常使用 详细步骤&#xff1a; …

css 控制图片最大宽度

CSS 限制图片最大宽度 (本文来自本站原创&#xff0c;转载请务必注明出处&#xff01;)我们在制作一个网页的时候&#xff0c;经常要对一个区域里可能出现的图片的宽度进行限制&#xff0c;不然它可能会把页面撑得很烂很烂。如果你采用固定宽度&#xff0c;长度来设置的话&…

BOM(Browser Object Model)

BOM&#xff08;浏览器对象模型&#xff09;&#xff0c;提供了一系列操作浏览器&#xff0c;获取浏览器信息的接口。这些接口在平时的工作中会经常用到&#xff0c;例如当前页面的刷新&#xff0c;获取url的参数等等。 注&#xff1a;图片来自 http://www.dreamdu.com/javascr…

入门 IT 行业,该具备哪些技能?

对于刚开始进入IT的新人来说&#xff0c;“必备技能”往往意味着一个长长的、标有重要度的学习列表&#xff0c;但是过长的列表通常会导致新人不知如何开始学习&#xff0c;压力倍增。本文尝试列举出最重要的几个技能&#xff0c;也期望通过此列表能给新人一个比较明确的学习重…

实验七作业

Part 1:验证性实验 将line29&#xff1a;for(i0;i<N;i)改为while(!feof(fp)) // 从文本文件file1.dat中读取数据&#xff0c;找出最高分和最低分学生信息&#xff0c;并输出在屏幕上 #include <stdio.h> #include <stdlib.h>#define N 10// 定义一个结构体类型…

块级格式化上下文(Block Formatting Context)

CSS块级格式化上下文是块级盒子的一种能力&#xff0c;这种能力并不是直接通过css属性声明而获得的&#xff0c;而是添加css的一部分相关属性之后自动获得的能力&#xff0c;也就是说没有一个明确的属性就是生成块级格式化上下文的。 块级格式化上下文的能力就是让具有该能力的…

这是最后的讨论!

Pun打算……让我们讨论Java final 。 最近&#xff0c;我们广受欢迎的博客文章“编码Java时的十个微妙的最佳实践”在JavaWorld的摘要和链接中有了很大的复兴&#xff0c;并提出了一组新的评论。 尤其是&#xff0c;JavaWorld编辑对我们对Java关键字“ final ”的观点提出了质…

前端性能优化方法总结

一个网站前端性能的好坏很大程度上影响了用户愿不愿意使用访问这个网站&#xff0c;因此对前端进行性能优化是个很重要的事情。  对于前端性能优化这个问题&#xff0c;主要学习自yahoo前端性能团队总结的35条黄金定律总结&#xff0c;觉得很全很赞&#xff0c;做个学习总结和…

JS中的数据类型转换

ES5中一共有6种数据类型&#xff0c;其中5种基本类型&#xff08;String、Number、Boolean、Null、Undefined&#xff09;&#xff0c;1种引用类型&#xff08;Object&#xff09;。基本类型值可以相互换转换&#xff0c;并且引用类型值也可以通过某种方式转换成基本类型值。 …

拯救我的操作系统

最近公司新装操作系统image都强制装win7&#xff0c;公司电脑一直拖着没有升级&#xff0c;家里也一直是用番茄花园版的xp&#xff0c;突然心血来潮去买了个win7的碟&#xff0c;心想最好是破解版的&#xff0c;回来一装&#xff0c;发现是所谓的旗舰版的&#xff0c;可恶的是这…

Hazelcast的MapLoader陷阱

Hazelcast提供的核心数据结构之一是IMap<K, V> &#xff0c;它扩展了java.util.concurrent.ConcurrentMap它基本上是一个分布式地图&#xff0c;通常用作缓存。 您可以将此类地图配置为使用自定义MapLoader<K, V> -每次尝试从该地图&#xff08;通过键&#xff09;…

《Android开发从零开始》——22.数据存储(1)

本节课的主要内容有&#xff1a;1.介绍Android中数据存储方式2.介绍SQLite3.讲解SQLite数据类型4.讲解基本SQL命令 课程下载地址&#xff1a;http://u.115.com/file/clc4te8w课件及源码下载地址&#xff1a;http://u.115.com/file/clc41tt5转载于:https://www.cnblogs.com/cool…

计划Java EE 7批处理作业

Java EE 7添加了使用JSR 352以标准方式执行批处理作业的功能。 <job id"myJob" xmlns"http://xmlns.jcp.org/xml/ns/javaee" version"1.0"><step id"myStep"><chunk item-count"3"><reader ref"…

webpack配置说明

webpack是一个现代JavaScript应用程序的静态模块打包器。 它有几个核心概念&#xff1a; 一、entry&#xff08;入口&#xff09; 指示webpack应该使用哪个模块&#xff0c;来作为构建其内部依赖图的开始&#xff0c; 可以在webpack.config.js中配置entry属性&#xff0c;来指…

poj 2137

题目大意&#xff1a; 农夫FJ想把他所有的牛在它们吃草的时候用一根绳子连起来&#xff08;就是1-2-3-1按顺序连接起来&#xff09;&#xff0c;每头牛有若干个吃草的位置&#xff0c;它们必须要在这些位置吃草。 用绳子连接两头牛需要绳子的长度公式为 Sqrt( Sqr( x1-x2 ) Sq…

JS中捉摸不透的==(宽松等于)

首先来看一个有意思的面试题&#xff1a; if(a 3 && a 4){//... }第一眼看到这个面试题我是拒绝的&#xff0c;这个等式根本不会成立&#xff0c;怎么会存在一个值既等于3并且还同时等于4呢&#xff1f;根本不可能。 但是在神奇的javascript中这个a是存在的。&…

vue脚手架的使用

安装&#xff1a;1.全局安装脚手架&#xff1a;cnpm install -g vue/cli 使用&#xff1a;2.新建文件夹,在当前目录执行命令 vue create "项目名称"3.配置&#xff1a;选择Manually select feautures--》空格选择Babel和CSS Pre-procesors--》选择Sass/SCSS(with dar…