原型和原型链

一、术语介绍

1. 原型:

  • 对于对象,都有一个隐藏属性 "[[Prototype]]",可以通过 "proto" 来访问。可以叫做对象的原型

2. 原型链

  • 对象的原型属性指向另一个对象。层层向上访问组成了原型链

二、原型的作用

  1. 实现属性在对象间的重用
jsx 复制代码
const person = { prop2: 'personal prop' };
const son = {
	prop: 'kid prop',
	__proto__: person,
};

console.log(son.prop2) // personal prop

三、原型和构造函数的关系

  1. js中每声明一个函数,该函数都有一个prototype属性。
jsx 复制代码
function x() {};
console.log(x.prototype);
/*
默认情况下 x.prototype等于
{
  constructor: f x()
  [[Prototype]]: Object
}
*/
  1. 当new一个函数的时候,会发生什么
    1. 创建一个全新的对象
    2. 将对象内部的 [[Prototype]]指向该函数的prototype属性
    3. 新对象绑定到函数调用的this
    4. 判断函数返回值,如果是对象,这返回该对象,否则返回this。(注意:如果返回的是自定义的对象,则该对象的 [[prototype]] 指向object )

总结:没有自定义构造函数返回对象的情况下,构造函数返回的对象 [[Prototype]]属性指向函数的prototype。

四、关于继承

js中,可以通过原型链来实现function原型属性的继承。

js中的继承

参考数据:

  • 1\] \[你不知道的JavaScript

  • 2\] \[JavaScript高级程序设计

  • 3\] \[[mdn](https://developer.mozilla.org/)\](https://developer.mozilla.org/)

相关推荐
今天又是充满希望的一天18 分钟前
C++分布式系统知识
开发语言·c++
zth41302128 分钟前
SegmentSplay‘s Super STL(v2.2)
开发语言·c++·算法
悟空瞎说44 分钟前
深度解析:Vue3 为何弃用 defineProperty,Proxy 到底强在哪里?
前端·javascript
leafyyuki1 小时前
告别 Vuex 的繁琐!Pinia 如何以更优雅的方式重塑 Vue 状态管理
前端·javascript·vue.js
沐知全栈开发1 小时前
《jEasyUI 格式化列》
开发语言
0xDevNull1 小时前
JDK 25 新特性概览与实战教程
java·开发语言·后端
某人辛木1 小时前
nodejs下载安装
开发语言·前端·javascript
笨笨饿1 小时前
34_数据结构_栈
c语言·开发语言·数据结构·人工智能·嵌入式硬件·算法
爱码驱动1 小时前
文件操作和IO
java·开发语言·io·文件操作
坊钰1 小时前
Java 反射机制
java·开发语言