当前位置: 首页 > news >正文

JavaScript函数之prototype原型和原型链

文章目录

  • 1. 原型
  • 2. 显式和隐式原型
  • 3. 原型链
    • 3.1 访问顺序
  • 4. instanceof
    • 4.1 如何判断

1. 原型

函数的prototype属性

  • 每个函数都有一个prototype属性,它默认指向一个Object空对象(即:原型对象)。
  • 原型对象中有一个属性constructor,它指向函数对象。

在这里插入图片描述
Person的prototype指向了它的Person Prototype,Person Prototype的constructor指向了Person 。


// 用户对象
function Person() {};console.log(Person.prototype);Person.prototype.getMoney = function() {return 5000000;console.log("身价500w");
}console.log((new Person()).getMoney());

在这里插入图片描述

给原型对象添加属性(一般都是方法)

  • 作用:函数的所有实例对象自动拥有原型中的属性(方法)

2. 显式和隐式原型

每个函数function都有一个prototype,即显式原型(属性)

每个实例对象都有一个__proto__,称为隐式原型(属性)。

对象的隐式原型的值为其对应构造函数的显式原型的值。

内存结构


// 第1步,内部语句:this.prototype = {}
function Fn() {};console.log(Fn.prototype);// 第2步,内部语句:this.__proto__ = Fn.prototype
let fn = new Fn();console.log(fn.__proto__);
console.log(fn.__proto__ === Fn.prototype);// 在原型上添加方法
Fn.prototype.test = function () {console.log("invoke test...");
}
fn.test();

以上代码对应内存结构如下:
在这里插入图片描述

总结:

  • 函数的prototype属性:在定义函数时自动添加的,默认值是一个空的Object对象。
  • 对象的__proto__属性:创建对象的时候自动添加的,默认值为构造函数的prototype属性值。
  • 可以在程序中直接操作显式原型,但不能直接操作隐式原型(ES6之前)

3. 原型链

3.1 访问顺序

原型链(隐式原型链),主要用于查找对象的属性(方法);访问一个对象的属性时,

  • 先在自身属性中查找,找到则返回
  • 如果没有,在沿着__proto__这条链向上查找,找到返回
  • 如果最终没找到,则返回undefined
            console.log(Object.prototype.__proto__)function Fn() {this.test1 = function() {console.log("test1()")}}Fn.prototype.test2 = function() {console.log("test2()")}let fn = new Fn();fn.test1();fn.test2();console.log(fn.toString);fn.test3();

在这里插入图片描述

输出如下:

在这里插入图片描述

构造函数/原型/实体对象的关系

在这里插入图片描述

函数的显式原型指向的对象默认是空Object实例对象(但是Object不满足)

所有函数都是Function的实例(包含Function)

Object的原型对象是原型链的尽头。

原型链的属性问题
读取对象的属性值时:会自动到原型链中查找
设置对象的属性值时:不会查找原型链,如果当前对象中没有此属性,直接添加此属性并设置其值
方法一般定义在原型中,属性一般通过构造函数定义在对象本身上。


function Fn() {}
Fn.prototype.a = 'xxx';
let fn1 = new Fn();
console.log(fn1.a, fn1);let fn2 = new Fn();
fn2.a = 'yyy';
console.log(fn1.a, fn2.a, fn1)

输出如下:

在这里插入图片描述

4. instanceof

4.1 如何判断

表达式:A instanceof B
如果B函数的显式原型对象在A对象的原型链上,返回true,否则返回false

Function 是通过new 自己产生的实例


function Foo() {}
let f1 = new Foo()
console.log(f1 instanceof Foo) // true
console.log(f1 instanceof Object) // true

在这里插入图片描述
完整的原型关系图:
在这里插入图片描述

http://www.lryc.cn/news/27746.html

相关文章:

  • 从上海分时电价机制调整看转供电用户电能计费
  • TypeScript类型体操:获取数组中元素对象属性的值作为新类型
  • npm,yarn和pnpm
  • 【算法】【数组与矩阵模块】在排好序的矩阵中找数,时间复杂度O(M+N)
  • 【Java|基础篇】计算机中数据的存储规则
  • RestTemplate使用HttpClient连接池
  • Python 操作Redis
  • CEC2020:鱼鹰优化算法(Osprey optimization algorithm,OOA)求解CEC2020(提供MATLAB代码
  • 词对齐 - MGIZA++
  • GUI 之 Tkinter编程
  • 【软件测试】性能测试面试题都问什么?面试官想要什么?回答惊险避坑......
  • 后端开发基础能力以及就Java的主流开发框架介绍
  • H2数据库连接时用户密码错误:Wrong user name or password [28000-214] 28000/28000 (Help)
  • 青岛诺凯达机械盛装亮相2023济南生物发酵展,3月与您相约
  • 【JAVA程序设计】【C00111】基于SSM的网上图书商城管理系统——有文档
  • 基于卷积神经网络CNN的三相故障识别
  • Java工厂设计模式详解,大厂的Java抽象工厂模式分享!
  • Git 企业级分支提交流程
  • C/C++每日一练(20230303)
  • Python3-条件控制
  • KDZD地埋电缆故障测试仪
  • 爆款升级!新系列南卡Neo最强旗舰杀到,业内首款无线充骨传导耳机!
  • 基于Spring Boot+Thymeleaf的在线投票系统
  • 【每日一题Day135】LC1487保证文件名唯一 | 哈希表
  • 计算机系统的基本组成 第一节
  • Scrapy爬虫框架入门
  • 最新使用nvm控制node版本步骤
  • Linux内核4.14版本——drm框架分析(1)——drm简介
  • Google的一道经典面试题 - 767. 重构字符串
  • E8-公共选择框相关的表