JavaScript，面向对象，原型、原型链(prototype chain)，代码
yuyutoo 2024-10-11 23:54 13 浏览 0 评论
概念
原型（prototype）：
JavaScript中，万物皆对象，对象可以区别为：普通对象和函数对象。
Object ，Function是JavaScript自带的函数对象，每个对象都有原型（null和undefined除外），可以把它理解为对象的默认属性和方法。
原型链（prototype chain）
JavaScript中，每个对象都有一个指向它的原型（prototype）对象的内部链接，这个原型对象又有自己的原型，直到某个对象的原型为null为止（也就是不再有原型指向），组成这条链的最后一环。这种一级一级的链结构就称为原型链（prototype chain）。
当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依此层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。
__proto__和prototype
__proto__：隐式原型，prototype：显式原型。
显式原型（explicit prototype property）：每一个函数在创建之后都会拥有一个名为：prototype的属性，这个属性指向函数的原型对象；显式原型用来实现基于原型的继承与属性的共享。
隐式原型（implicit prototype link）：任意对象都有一个内置属性[[prototype]]，在ES5之前没有标准的方法访问这个内置属性，然大多数浏览器都支持通过__proto__来访问，ES5中有了对于这个内置属性标准的Get方法Object.getPrototypeOf()。隐式原型，构成原型链，同样用于实现基于原型的继承。
以上概念用以下的代码案例来表达，以下的下案体现出以上的概念。
代码案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no">
<script type="text/javascript">
// Object：Object是一个函数对象，Object的原型就是一个Object对象，它里面存在着一些对象的方法和属性
console.log("Object",Object.prototype); // {constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?, __lookupGetter__: ?, …}
console.log("Object",Object.prototype.prototype); // undefined
// Array也是一个函数对象，它的原型就是Array.prototype，它里面存在着一些数组的方法和属性
console.log("Array",Array.prototype); // [constructor: ?, concat: ?, copyWithin: ?, fill: ?, find: ?, …]
console.log("Array",Array.prototype.prototype); // undefined
// Function也是一个函数对象，但它有点特殊，它的原型就是一个function空函数。
console.log("Function",Function.prototype); // ? () { [native code] }
console.log("Function",Function.prototype.prototype); // undefined
// 用new Object或者{}创建的对象是普通对象，它没有prototype属性，只有__proto__属性，它指向Object.prototype。
var o = new Object();
console.log("new Object()",o.prototype); // undefined
console.log("new Object()",o.__proto__); // {constructor: ?, __defineGetter__: ?, __defineSetter__: ?, hasOwnProperty: ?, __lookupGetter__: ?, …}
// 自定义函数的原型就是给它指定的内容。如果不指定，那它的原型就是一个Object.prototype。
function XiaoFenDou(){
console.log("小奋斗");
}
console.log("自定义函数",XiaoFenDou.prototype); // {constructor: ?}
XiaoFenDou.prototype = "小奋斗&&IT";
console.log("自定义函数",XiaoFenDou.prototype); // 小奋斗&&IT
</script>
</head>
<body>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="viewport" content="width=device-width;initial-scale=1.0;maximum-scale=1;user-scalable=no">
<script type="text/javascript">
var obj = {
a:1,
b:2
};
// obj上没有toString方法，但是Object上有
console.log(obj.toString()); // [object Object]
console.log(obj.__proto__);
// 报错，obj上没有这个方法，Object上也没有这个方法
// console.log(obj.push("c")); // Uncaught TypeError: obj.push is not a function
console.log(obj.a); // 1
console.log(obj.c); //undefined
</script>
</head>
<body>
</body>
</html>相关推荐
- 全局和隐式 using 指令详解（全局命令）
-
1.什么是全局和隐式using？在.NET6及更高版本中，Microsoft引入了...
- 请停止微服务，做好单体的模块化才是王道:Spring Modulith介绍
-
1、介绍模块化单体是一种架构风格，代码是根据模块的概念构成的。对于许多组织而言，模块化单体可能是一个很好的选择。它有助于保持一定程度的独立性，这有助于我们在需要的时候轻松过渡到微服务架构。Spri...
- ASP.NET程序集引用之痛:版本冲突、依赖地狱等解析与实战
-
我是一位多年后端经验的工程师，其中前几年用ASP.NET...
- .NET AOT 详解（.net 6 aot）
-
简介AOT（Ahead-Of-TimeCompilation）是一种将代码直接编译为机器码的技术，与传统的...
- 一款基于Yii2开发的免费商城系统（一款基于yii2开发的免费商城系统是什么）
-
哈喽,我是老鱼，一名致力于在技术道路上的终身学习者、实践者、分享者！...
- asar归档解包（游戏arc文件解包）
-
要学习Electron逆向，首先要有一个Electron开发的程序的发布的包，这里就以其官方的electron-quick-start作为例子来进行一下逆向的过程。...
- 在PyCharm 中免费集成Amazon CodeWhisperer
-
CodeWhisperer是Amazon发布的一款免费的AI编程辅助小工具，可在你的集成开发环境（IDE）中生成实时单行或全函数代码建议，帮助你快速构建软件。简单来说，AmazonCodeWhi...
- 2014年最优秀JavaScript编辑器大盘点
-
1.WebstormWebStorm是一种轻量级的、功能强大的IDE，为Node.js复杂的客户端开发和服务器端开发提供完美的解决方案。WebStorm的智能代码编辑器支持JavaScript,...
- 基于springboot、tio、oauth2.0前端vuede 超轻量级聊天软件分享
-
项目简介：基于JS的超轻量级聊天软件。前端：vue、iview、electron实现的PC桌面版聊天程序，主要适用于私有云项目内部聊天，企业内部管理通讯等功能，主要通讯协议websocket。支持...
- JetBrains Toolbox推出全新产品订阅授权模式
-
捷克知名软件开发公司JetBrains最为人所熟知的产品是Java编程语言开发撰写时所用的集成开发环境IntelliJIDEA，相信很多开发者都有所了解。而近期自2015年11月2日起，JetBr...
- idea最新激活jetbrains-agent.jar包，亲测有效
-
这里分享一个2019.3.3版本的jetbrains-agent.jar，亲测有效，在网上找了很多都不能使用，终于找到一个可以使用的了，这里分享一下具体激活步骤，此方法适用于Jebrains家所有产品...
- CountDownTimer的理解（countdowntomars）
-
CountDownTimer是android开发常用的计时类，按照注释中的说明使用方法如下：kotlin:object:CountDownTimer(30000,1000){...
- 反射为什么性能会很慢?（反射时为什么会越来越长）
-
1.背景前段时间维护一个5、6年前的项目，项目总是在某些功能使用上不尽人意，性能上总是差一些，仔细过了一下代码发现使用了不少封装好的工具类，工具类里面用了好多的反射，反射会影响到执行效率吗？盲猜了一...
- btrace 开源!基于 Systrace 高性能 Trace 工具
-
介绍btrace（又名RheaTrace）是抖音基础技术团队自研的一款高性能AndroidTrace工具，它基于Systrace实现，并针对Systrace不足之处加以改进，核心改进...
欢迎 你 发表评论:
- 一周热门
- 最近发表
-
- .NET 奇葩问题调试经历之3——使用了grpc通讯类库后，内存一直增长......
- 全局和隐式 using 指令详解（全局命令）
- 请停止微服务，做好单体的模块化才是王道:Spring Modulith介绍
- ASP.NET程序集引用之痛:版本冲突、依赖地狱等解析与实战
- .NET AOT 详解（.net 6 aot）
- 一款基于Yii2开发的免费商城系统（一款基于yii2开发的免费商城系统是什么）
- asar归档解包（游戏arc文件解包）
- 在PyCharm 中免费集成Amazon CodeWhisperer
- 2014年最优秀JavaScript编辑器大盘点
- 基于springboot、tio、oauth2.0前端vuede 超轻量级聊天软件分享
- 标签列表
-
- mybatis plus (70)
- scheduledtask (71)
- css滚动条 (60)
- java学生成绩管理系统 (59)
- 结构体数组 (69)
- databasemetadata (64)
- javastatic (68)
- jsp实用教程 (53)
- fontawesome (57)
- widget开发 (57)
- vb net教程 (62)
- hibernate 教程 (63)
- case语句 (57)
- svn连接 (74)
- directoryindex (69)
- session timeout (58)
- textbox换行 (67)
- extension_dir (64)
- linearlayout (58)
- vba高级教程 (75)
- iframe用法 (58)
- sqlparameter (59)
- trim函数 (59)
- flex布局 (63)
- contextloaderlistener (56)