前端 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. 猴子补丁

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


目录
相关文章
|
1月前
|
JavaScript 前端开发 程序员
前端原生Js批量修改页面元素属性的2个方法
原生 Js 的 getElementsByClassName 和 querySelectorAll 都能获取批量的页面元素,但是它们之间有些细微的差别,稍不注意,就很容易弄错!
|
1月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
JavaScript 前端开发
JavaScript中的原型 保姆级文章一文搞懂
本文详细解析了JavaScript中的原型概念,从构造函数、原型对象、`__proto__`属性、`constructor`属性到原型链,层层递进地解释了JavaScript如何通过原型实现继承机制。适合初学者深入理解JS面向对象编程的核心原理。
26 1
JavaScript中的原型 保姆级文章一文搞懂
|
1月前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
45 5
|
1月前
|
缓存 前端开发 JavaScript
JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式
本文深入解析了JavaScript前端路由的实现原理及其在单页应用中的重要性,涵盖前端路由概念、基本原理、常见实现方式(Hash路由和History路由)、优点及挑战,并通过实际案例分析,帮助开发者更好地理解和应用这一关键技术,提升用户体验。
73 1
|
1月前
|
JSON 前端开发 JavaScript
聊聊 Go 语言中的 JSON 序列化与 js 前端交互类型失真问题
在Web开发中,后端与前端的数据交换常使用JSON格式,但JavaScript的数字类型仅能安全处理-2^53到2^53间的整数,超出此范围会导致精度丢失。本文通过Go语言的`encoding/json`包,介绍如何通过将大整数以字符串形式序列化和反序列化,有效解决这一问题,确保前后端数据交换的准确性。
39 4
|
7月前
|
前端开发 JavaScript 网络协议
前端最常见的JS面试题大全
【4月更文挑战第3天】前端最常见的JS面试题大全
112 5
|
7月前
|
JavaScript 前端开发
web前端JS高阶面试题(1),高级开发工程师面试
web前端JS高阶面试题(1),高级开发工程师面试
|
7月前
|
JSON JavaScript 前端开发
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
web前端入门到实战:32道常见的js面试题,2024年最新秋招是直接面试吗
|
7月前
|
XML 前端开发 JavaScript
2022 前端JavaScript高频手写面试题大全,助你查漏补缺
2022 前端JavaScript高频手写面试题大全,助你查漏补缺
2022 前端JavaScript高频手写面试题大全,助你查漏补缺