前端 JS 经典:原型和原型链

简介: 前端 JS 经典:原型和原型链

1. 前言

这个前言很重要,要理解原型、原型链,就需要理解前言里面的一些定义。开始!

所有对象都是通过 new 一个函数去创建的,而这个函数通常首字母大写,被称为构造函数。我们也可以通过自定义构造函数,去 new 一个对象。平时,我们通过语法糖直接赋值对象,但他本质是通过 new Object 来创建对象的。数组同理。函数也同理,但是不推荐通过 new Function 去创建函数。

所有的函数也是对象,包括构造函数,本质是通过 new Function 创建,那 Function 又是怎么来的呢,是直接放到内存里面的,就是 JS 引擎启动的时候,直接将 Function 放入内存中。不通过任何东西来创建。

所有对象都是引用类型,什么是引用类型呢,就是保存的是地址,赋值的也是地址,它们是引用传递。

// 创建对象
let obj = { name: "yqcoder" };
// 本质如下
let obj = new Object({
  name: "yqcoder",
});
 
// 创建数组
let arr = [1, 2, 3];
// 本质如下
let arr = new Array(1, 2, 3);
 
// 创建函数
let fn = function (str) {
  return str;
};
// 本质如下,不建议这样去创建
let fn = new Function("str", "return str");
 
// 自定义构造函数创建对象
let Person = function (name, age) {
  this.name = name;
  this.age = age;
};
let yq = new Person("yqcoder", 18);
console.log(yq); // {name: 'yqcoder', age: 18}

2. 原型 prototype

所有函数都有一个属性 prototype,称之为函数原型。默认情况下,prototype 是一个对象,所以 prototype 是通过 new Object 创建的。而这个 prototype 对象里面默认有一个 constructor 属性,它也是一个对象,它指向构造函数本身。

let fn = function () {};
fn.prototype.constructor == fn; // true

3. 隐式原型 __proto__

所有对象都有一个属性 __proto__,称之为隐式原型。默认情况下,隐式原型指向创建该对象的构造函数的原型。

let Person = function (name, age) {
  this.name = name;
  this.age = age;
};
let yq = new Person("yqcoder", 18);
 
yq.__proto__ === Person.prototype; // true

通过同一个构造函数产生的对象,它们有一块内存空间是公用的,哪一块空间共用呢,就是它们的隐式原型指向的内存空间是共用的。换句话说,就是它们的构造函数的原型是共用的。构造函数里共用的方法,一般写在 prototype 里,这样构建的对象,生成的方法是指向同一个地址的,节约了内存空间。同时还可以使用 this,谁调用这个方法,这个 this 就指向谁。效果如下:

// 构造函数 Person
let Person = function (name, age) {
  this.name = name;
  this.age = age;
};
Person.prototype.sayHello = function () {
  console.log(`${this.name} say hello`);
};
 
let user1 = new Person("yy", 18);
let user2 = new Person("qq", 18);
user1.__proto__.sayHello == user2.__proto__.sayHello; // true
 
user1.sayHello(); // yy say hello
user2.sayHello(); // qq say hello

4. 原型链

什么叫原型链,就是每一个对象都有隐式原型 __proto__,隐式原型的指向就形成了一个链条,可以称之为原型链。而 Function 的__proto__指向自身的原型。前言说过 Function 的特殊。Object 的 prototype 的__proto__指向 null。

当访问一个对象的成员时,访问步骤:先访问对象自身是否拥有该成员,如果有,直接使用,如果没有,再看该对象的隐式原型上有没有该成员,如果有直接使用。如果也没有,在原型链中依次查找。如上例子,为什么 user1 可以访问 sayHello,因为在隐式原型中有 sayHello。所以可以访问。

如下例子:先在自身找 sex,没有,然后在 yq.__proto__ 里找,因为 yq.__proto__ == Person.prototype,所以也没有,再在 Person.prototype.__proto__ 里找,因为 Person.prototype.__proto__ == Object.prototype,还是没有,最后在 Object.prototype.__proto__ 里找,因为 Object.prototype.__proto__ == null,所以 yq.sex == undefined;

let Person = function (name, age) {
  this.name = name;
  this.age = age;
};
let yq = new Person("yq", 18);
yq.sex; // undefined

5. 猴子补丁

什么叫猴子补丁,就是在函数原型中加入成员,以增强其对象的功能,但是猴子补丁会导致原型污染,所以使用需谨慎。


目录
相关文章
|
JSON 自然语言处理 前端开发
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
817 72
【01】对APP进行语言包功能开发-APP自动识别地区ip后分配对应的语言功能复杂吗?-成熟app项目语言包功能定制开发-前端以uniapp-基于vue.js后端以laravel基于php为例项目实战-优雅草卓伊凡
|
JavaScript 前端开发 API
|
前端开发 JavaScript 数据可视化
58K star!这个让网页动起来的JS库,前端工程师直呼真香!
Anime.js 是一款轻量级但功能强大的JavaScript动画引擎,它能够以最简单的方式为网页元素添加令人惊艳的动效。这个项目在GitHub上已经获得58,000+星标,被广泛应用于电商页面、数据可视化、游戏开发等场景。
825 8
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
16251 23
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
1308 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
数据采集 JavaScript 前端开发
一站搞定原型链:深入理解JavaScript的继承机制
综上所述,可以得出: 1. 原型链是对象通过原型实现属性和方法继承的一种机制。 2. 每个对象都有一个 __proto__ 属性,指向它的原型对象。 3. 每个函数(包括构造函数)都有一个 prototype 属性,指向一个对象,这个对象的属性和方法可以被实例共享。 4. 构造函数创建对象时,新对象的 __proto__ 属性指向构造函数的 prototype 对象。 5. 继承可以通过设置原型对象实现,也可以使用 ES6 的 class 语法糖。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一
|
前端开发
前端学习笔记202306学习笔记第三十七天-js-原型链继承4
前端学习笔记202306学习笔记第三十七天-js-原型链继承4
262 0
|
开发者 图形学 iOS开发
掌握Unity的跨平台部署与发布秘籍,让你的游戏作品在多个平台上大放异彩——从基础设置到高级优化,深入解析一站式游戏开发解决方案的每一个细节,带你领略高效发布流程的魅力所在
【8月更文挑战第31天】跨平台游戏开发是当今游戏产业的热点,尤其在移动设备普及的背景下更为重要。作为领先的游戏开发引擎,Unity以其卓越的跨平台支持能力脱颖而出,能够将游戏轻松部署至iOS、Android、PC、Mac、Web及游戏主机等多个平台。本文通过杂文形式探讨Unity在各平台的部署与发布策略,并提供具体实例,涵盖项目设置、性能优化、打包流程及发布前准备等关键环节,助力开发者充分利用Unity的强大功能,实现多平台游戏开发。
1469 1
|
JavaScript 前端开发
JavaScript进阶-原型链与继承
【6月更文挑战第18天】JavaScript的原型链和继承是其面向对象编程的核心。每个对象都有一个指向原型的对象链,当查找属性时会沿着此链搜索。原型链可能导致污染、效率下降及构造函数与原型混淆的问题,应谨慎扩展原生原型、保持原型结构简洁并使用`Object.create`或ES6的`class`。继承方式包括原型链、构造函数、组合继承和ES6的Class继承,需避免循环引用、方法覆盖和不当的构造函数使用。通过代码示例展示了这两种继承形式,理解并有效利用这些机制能提升代码质量。
389 5
|
JavaScript 前端开发 开发者
揭开JavaScript的神秘面纱:原型链背后隐藏的继承秘密
【8月更文挑战第23天】原型链是JavaScript面向对象编程的核心特性,它使对象能继承另一个对象的属性和方法。每个对象内部都有一个[[Prototype]]属性指向其原型对象,形成链式结构。访问对象属性时,若当前对象不存在该属性,则沿原型链向上查找。
231 0