IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> JavaScript原型与原型链(总结篇) -> 正文阅读

[JavaScript知识库]JavaScript原型与原型链(总结篇)

系列文章推荐

JavaScript原型与原型链(基础篇)
JavaScript原型与原型链(进阶篇)
JavaScript原型与原型链(总结篇)

1 构造函数和实例对象

构造函数的prototype属性为其实例化对象的原型__proto__

function Cat(name, age) {
  this.name = name
  this.age = age
}
const kat = new Cat('kat', 2)
console.log(kat.__proto__ === Cat.prototype) // true

在这里插入图片描述

2 构造函数属性constructor

constructor属性用于通过实例对象或原型获取其构造函数:

function Cat(name, age) {
  this.name = name
  this.age = age
}
const kat = new Cat('kat', 2)

console.log(kat.__proto__.constructor === Cat) // true
console.log(Cat.prototype.constructor === Cat) // true

在这里插入图片描述


注意:kat.constructor === Cat也是成立的,虽然constructor属性不在实例对象kat上,但是在访问属性时若实例本身不存在,则会在原型链上寻找,所以能在kat.__proto__上找到constructor属性。

3 Object

Object构造函数有两大特点:

  1. 所有构造函数的原型对象都是Object构造函数的实例对象,即满足Func.prototype.__proto__ === Object.prototype,其中Func代指所有构造函数;
  2. Object.prototype.__proto__为原型链的终点,即Object.prototype.__proto__ === null
function Cat(name, age) {
  this.name = name
  this.age = age
}
const kat = new Cat('kat', 2)

console.log(kat.__proto__.__proto__ === Object.prototype) // true
// kat.__proto__ === Cat.prototype
console.log(Cat.prototype.__proto__ === Object.prototype) // true
console.log(Object.prototype.__proto__ === null) // true

在这里插入图片描述

4 Function

Function构造函数有两大特点:

  1. 所有构造函数都是由Function构造函数实例化而来:Func.__proto__ === Function.prototype,其中Func代指所有构造函数;
  2. Function自身是构造函数,且自身又是自身构造函数的实例化对象:Function.__proto__ === Function.prototype
function Cat(name, age) {
  this.name = name
  this.age = age
}

console.log(Cat.__proto__ === Function.prototype) // true
console.log(Function.__proto__ === Function.prototype) // true

在这里插入图片描述

5 ObjectFunction

ObjectFunction两个内置构造函数区别与其他内置构造函数,有如下特点,以下所有的运算结果都为true

Function instanceof Object
Object instanceof Function
Function instanceof Function
Object instanceof Object

根据上述结论还能推导及验证出如下关系:

Function.__proto__.__proto__ === Object.prototype
Object.__proto__ === Function.prototype
Function.__proto__ === Function.prototype
Object.__proto__.__proto__ === Object.prototype

6 function anonymous()

所有构造函数的原型都为function anonymous(),由于所有函数都是由Function构造函数实例化而来,那么最简单的获取function anonymous()的方式为Function.prototype,满足如下关系:

function Cat() {}
console.log(Cat.__proto__ === Function.prototype) // true
console.log(Object.__proto__ === Function.prototype) // true
console.log(Array.__proto__ === Function.prototype) // true
console.log(Number.__proto__ === Function.prototype) // true
console.log(Function.__proto__ === Function.prototype) // true

7 __proto__prototype

__proto__用于实例对象获取原型,prototype用于构造函数获取其实例对象的原型,两者关系如下:

function Cat() {}
const kat = new Cat()
console.log(kat.__proto__ === Cat.prototype) // true
console.log(Cat.__proto__ === Function.prototype) // true
console.log(Function.__proto__ === Function.prototype) // true

对于__proto__,有如下几种情况:

  • 对于一般实例对象来说,如实例对象katkat.__proto__得到的是其构造函数Catprototype属性;
  • 对于一般构造函数来说,如构造函数CatCat.__proto__得到的是其构造函数Functionprototype属性,且这个值是确定的,为function anonymous()
  • 对于构造函数Function来说,Function.__proto__得到的是其构造函数Functionprototype属性,且这个值是确定的,为function anonymous()

对于prototype,有如下几种情况:

  • 对于一般实例对象来说,如实例对象katkat.prototype得到的是undefined,即一般实例对象是没有prototype属性的,只有构造函数才存在prototype属性;
  • 对于一般构造函数来说,如构造函数CatCat.prototype得到的是由该构造函数实例化对象的原型,在本例子中为kat.__proto__
  • 对于构造函数Function来说,Function.prototype得到的是由该构造函数实例化对象的原型Function.__proto__,因为Function自身是构造函数,且自身又是自身构造函数的实例化对象,所以Function.__proto__ === Function.prototype

8 其他内置构造函数

JavaScript中的内置构造函数只有FunctionObject是特殊的,除去FunctionObject以外的其他构造函数,如NumberStringArray等等,都可以当作普通构造函数来看待。

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-04-07 22:34:53  更:2022-04-07 22:38:28 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/24 2:46:35-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码