详解链表在前端的应用,顺便再弄懂原型和原型链!

简介: 该文章深入解析了链表在前端开发中的应用,并详细阐述了JavaScript中的原型和原型链的概念及其工作原理。

链表 在前端中的应用常用于原型和原型链当中。在接下来的这篇文章中,将讲解关于 链表 在前端中的应用。

一、链表VS数组

  • 数组:增删非首尾元素时往往需要移动元素
  • 链表:增删非首尾元素,不需要移动元素,只需要更改 next 的指向即可。

二、JS中的链表

  • Javascript中没有链表;
  • 可以用Object模拟链表。

三、前端与链表:JS中的原型链

1、原型是什么?

  • Javascript 中,每个对象都会在其内部初始化一个属性,这个属性就是原型对象(简称原型)。

2、原型链是什么?

  • 当我们访问一个对象的属性时,如果这个对象内部不存在这个属性,那么它就会去 prototype 里找这个属性,这个 prototype 又会有自己的 prototype ,于是就这样一直找下去,这样逐级查找形似一个链条,且通过 [[prototype]] 属性连接,这个连接的过程被称为原型链
  • 原型链的本质是链表,且原型链上的节点是各种原型对象,如: Function.prototypeObject.prototype ……。
  • 原型链通过 __proto__ 属性连接各种原型对象。

3、原型链长啥样?

(1)arr → Array.prototype → Object.prototype → null

  • arr.__ proto __ = Array.prototype;
  • Array.__ proto __= Object.prototype;
  • Object.__ proto __= null。

先用代码来演示这段关系:

let arr = [];
console.log(arr.__proto__ === Array.prototype);    //  true
console.log(arr.__proto__.__proto__ === Object.prototype);    //  true
console.log(arr.__proto__.__proto__.__proto__);  //null

解释说明:

假设我们定义了一个对象,名字叫 arr ,那么 arr.__proto__ 表示的是arr这个对象的原型,在这个例子中 let arr = [] 间接调用了 new Array ,所以我们通过 Array.prototype 来表示 Array 这个构造函数的原型对象,通过对 arr.__proto__Array.prototype 进行比较,发现两者相等,所以说, arr 的原型属性就是构造函数 Array 的原型对象。

与上述类似的,我们发现 arr.__proto__Array.prototype 相等,那么继续往源头查找下去, Array 又有它自己的原型属性,那么这个时候 Array 的原型属性 arr.__proto__.__proto__ 又会等于什么呢?

其实,在 js 当中, Object 是所有对象的父对象,也就是说绝大多数的对象都有一个共同的原型 Object.prototype 。所以,这个时候 Array 的原型属性 arr.__proto__.__proto__ 就等于 Object.prototype ,到此为止,找到最原始的对象 Object 的原型之后,基本就快结束了。我们最后再检验 Object 的原型属性 arr.__proto__.__proto__.__proto__ ,发现是 null 空值,也就意味着原型链已经走到了最源头的位置。

总结:

  • Object 是所有对象的父对象
  • 从上面例子中可以看到,所有原型对象都会先指向自己的 __proto__ 属性,之后再指向自己的原型,最后指向父对象 Object 的原型。

下面再给出两个例子,大家可以依据(1)的方法进行检验。

(2)obj → Object.prototype → null

  • obj.__ proto __ = Object.prototype;
  • Object.__ proto __= null。

用代码来演示这段关系:

let obj = {
   };
console.log(obj.__proto__ === Object.prototype);    //  true
console.log(obj.__proto__.__proto__);  //null

(3)func → Function.prototype → Object.prototype → null

  • func.__ proto __ = Function.prototype;
  • Function.__ proto __= Object.prototype;
  • Object.__ proto __= null。

用代码来演示这段关系:

let func = function(){
   

};
console.log(func.__proto__ === Function.prototype);    //  true
console.log(func.__proto__.__proto__ === Object.prototype);    //  true
console.log(func.__proto__.__proto__.__proto__);  //null

(4)class中的原型

1)先来看第一段代码。

//父类
class People{
   
    constructor(){
   
        this.name = name;
    }
    eat(){
   
        console.log(`${
     this.name} eat something`);
    }
}

//子类
class Student extends People{
   
    constructor(name, number){
   
        super(name);
        this.number = number;
    }
    sayHi(){
   
        console.log(`姓名:${
     this.name},学号:${
     this.number}`);
    }
}

console.log(typeof Student); //function
console.log(typeof People); //function

let xialuo = new Student('夏洛', 10010);
console.log(xialuo.__proto__);
console.log(Student.prototype);
console.log(xialuo.__proto__ === Student.prototype); //true

从上面代码中可以看到, typeof Studenttypeof People 的值是 function ,所以 class 实际上是函数,也就是语法糖。

再看下面三个 console.log 打印的值,我们来梳理一个原型间的关系。首先 Student 是一个 class ,那么每个 class 都有它的显式原型 prototype ,而 xialuo 是一个实例,每个实例都有它的隐式原型 __proto__ 。它们两者之间的关系就是,实例 xialuo__proto__ 指向对应的 class (即 Student )的 prototype

因此,对于class中的原型,可以得出以下结论:

  • 每个 class 都有显式原型 prototype
  • 每个实例都有隐式原型 __proto__ ;
  • 实例的 __proto__ 指向对应 classprototype

2)再来看第二段代码。

//父类
class People{
   
    constructor(){
   
        this.name = name;
    }
    eat(){
   
        console.log(`${
     this.name} eat something`);
    }
}

//子类
class Student extends People{
   
    constructor(name, number){
   
        super(name);
        this.number = number;
    }
    sayHi(){
   
        console.log(`姓名:${
     this.name},学号:${
     this.number}`);
    }
}

let xialuo = new Student('夏洛', 10010);
console.log(xialuo.name); //夏洛
console.log(xialuo.number); //10010
console.log(Student.sayHi()); //姓名:夏洛,学号:10010

从上面代码中可以得出, Student 类本身有 number 这个属性,所以它会直接读取自身 number 的值。同时,它是没有 name 这个属性的,但是由于它继承自父类 People ,所以当它找不到 name 则个属性时,它会自动的往 __proto__ 中查找,于是就往它的父类 People 进行查找。

所以,从上面的演示中可以得出基于原型的执行规则:

  • 先获取属性(比如 xialuo.namexiaoluo.number ) 或者获取执行方法 (比如 xialuo.sayhi() );
  • 获取后,先在自身属性和方法上寻找;
  • 如果找不到则自动去 __proto__ 中查找。

(5)new Object() 和 Object.create() 区别

  • {} 等同于 new Object() ,原型为 Object.prototype
  • Object.create(null) 没有原型;
  • Object.create({...}) 可指定原型。

4、原型链知识点

1)如果 A 沿着原型链能找到 B.prototype ,那么 A instanceof Btrue

举例1:

let obj = {
   };
console.log(obj instanceof Object); //true

对于 obj instanceof Object 进行左右运算, obj instanceof Object 的意思是查询 obj 的原型链上是否有 Object 的原型对象,即 obj 是否是 Object 的实例。

举例2:

let func = function(){
   

};
console.log(func instanceof Function); //true
console.log(func instanceof Object); //true

对于 func 来说, func 既是 Function 的实例,也是 Object 的实例。

2)如果 A 对象上没有找到 x 属性,那么会沿着原型链找 x 属性。

举例:

const obj = {
   };

Object.prototype.x = 'x';

console.log(obj.x); //x

从上述代码中可以看到,obj 在自己的区域内没有找到x的值,则会继续往它的原型链找,最终找到 Object.prototype.x ,所以 obj.x = x

接下来我们用两道常见的面试题来回顾这两个知识点。

5、常见面试题

(1)instanceof原理

知识点:如果 A 沿着原型链能找到 B.prototype ,那么 A instanceof Btrue

解法:遍历 A 的原型链,如果找到 B.prototype ,返回 true ,否则返回 false

代码演示:

// 判断A是否为B的实例
const instanceOf = (A, B) => {
   
    // 定义一个指针P指向A
    let p = A;
    // 当P存在时则继续执行
    while(p){
   
        // 判断P值是否等于B的prototype对象,是则说明A是B的实例
        if(p === B.prototype){
   
            return true;
        }
        // 不断遍历A的原型链,直到找到B的原型为止
        p = p.__proto__;
    }
    return false;
}

(2)看代码,得出输出结果。

看下面一段代码,请给出4个 console.log 打印的值。

let foo = {
   };
let F = function(){
   };
Object.prototype.a = 'value a';
Function.prototype.b = 'value b';

console.log(foo.a); //value a
console.log(foo.b); //undefind

console.log(F.a); //value a
console.log(F.b); //value b

知识点:如果在 A 对象上没有找到 x 属性,那么会沿着原型链找 x 属性。

解法:明确 fooF 变量的原型链,沿着原型链找 A 属性和 B 属性。

解析:从上面一段代码中可以看到, foo 是一个对象,那么它的 __proto__ 属性指向 Object.prototype ,所以此时 foo.a 会往它的原型链上面找具体的值,也就是 Object.prototype.a 的值。同理, foo.b 会往它的原型链找值,但是找不到 Object.prototype.b 的值,所以最终返回 undefinedF.aF.b 也是同样的道理,大家可以进行一一验证。

四、写在最后

原型和原型链在前端中是再基础不过的知识了!我们平常所写的每一个对象中,基本上都有它的原型和原型链。因此,对于前端来说,如果原型和原型链的关系都不明白的话,不知不觉中很容易写出各种各样的bug,这对于后续维护和程序来说都是一个巨大的灾难。所以,了解原型和原型链,对于前端来说是一项必备的技能。

链表在前端中的应用就讲到这里啦!如果有不理解或者有误的地方也欢迎私聊我或加我微信指正~

  • 公众号:星期一研究室
  • 微信:MondayLaboratory

创作不易,如果这篇文章对你有用,记得点个 Star 哦~

相关文章
|
10天前
|
移动开发 缓存 前端开发
深入理解前端路由:原理、实现与应用
本书《深入理解前端路由:原理、实现与应用》全面解析了前端路由的核心概念、工作原理及其实现方法,结合实际案例探讨了其在现代Web应用中的广泛应用,适合前端开发者和相关技术人员阅读。
|
13天前
|
存储 缓存 算法
在C语言中,数据结构是构建高效程序的基石。本文探讨了数组、链表、栈、队列、树和图等常见数据结构的特点、应用及实现方式
在C语言中,数据结构是构建高效程序的基石。本文探讨了数组、链表、栈、队列、树和图等常见数据结构的特点、应用及实现方式,强调了合理选择数据结构的重要性,并通过案例分析展示了其在实际项目中的应用,旨在帮助读者提升编程能力。
33 5
|
20天前
|
前端开发 项目管理
Gitflow分支策略及其在前端工程化中的应用
Gitflow 分支策略也并非适用于所有项目。对于一些小型或简单的前端项目,可能会显得过于复杂。在实际应用中,需要根据项目的具体情况和团队的需求进行适当调整和优化。
|
16天前
|
自然语言处理 前端开发 JavaScript
深入理解前端中的 “this” 指针:从基础概念到复杂应用
本文全面解析前端开发中“this”指针的运用,从基本概念入手,逐步探讨其在不同场景下的表现与应用技巧,帮助开发者深入理解并灵活掌握“this”的使用。
|
20天前
|
前端开发
结合具体案例分析Gitflow分支策略在大型前端项目中的应用优势
通过这个具体案例可以看出,Gitflow 分支策略在大型前端项目中能够提供有条不紊的开发环境,保障项目的稳定性和持续发展。
|
16天前
|
存储 前端开发 JavaScript
前端中对象的深度应用与最佳实践
前端对象应用涉及在网页开发中使用JavaScript等技术创建和操作对象,以实现动态交互效果。通过定义属性和方法,对象可以封装数据和功能,提升代码的组织性和复用性,是现代Web开发的核心技术之一。
|
19天前
|
缓存 JavaScript 前端开发
JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用
本文深入讲解了 JavaScript 与 DOM 交互的基础及进阶技巧,涵盖 DOM 获取、修改、创建、删除元素的方法,事件处理,性能优化及与其他前端技术的结合,助你构建动态交互的网页应用。
29 5
|
22天前
|
前端开发 开发者
本文将深入探讨 BEM 的概念、原理以及其在前端开发中的应用
BEM(Block-Element-Modifier)是一种前端开发中的命名规范和架构方法,旨在提高代码的可维护性和复用性。通过将界面拆分为独立的模块,BEM 提供了一套清晰的命名规则,增强了代码的结构化和模块化设计,促进了团队协作。本文深入探讨了 BEM 的概念、原理及其在前端开发中的应用,分析了其优势与局限性,为开发者提供了宝贵的参考。
40 8
|
17天前
|
JavaScript 前端开发 测试技术
构建高效可维护的前端应用
构建高效可维护的前端应用
|
17天前
|
编解码 监控 JavaScript
打造高效前端应用
打造高效前端应用
32 1