高级前端面试中的三个 “送命题” !!!

原型与原型链

说到原型,就不得不提一下构造函数,首先我们看下面一个简单的例子:

function Dog(name,age){this.name = name;this.age = age;
}let dog1 = new Dog("哈士奇",3);
let dog2 = new Dog("泰迪",2);

首先创造空的对象,再让 this 指向这个对象,通过 this.name 进行赋值,最终返回 this,这其实也是 new 一个对象的过程。

其实:

  • let obj = {}let obj = new Object() 的语法糖;
  • let arr = []let arr = new Array() 的语法糖;
  • function Dog(){...}let Dog = new Fucntion() 的语法糖。

那什么是原型那?

在 js 中,所有对象都是 Object 的实例,并继承 Object.prototype 的属性和方法,但是有一些是隐性的。

我们来看一下原型的规则:

var obj = {};
obj.attribute = "三座大山";
var arr = [];
arr.attribute = "三座大山";
function fn1 () {}
fn1.attribute = "三座大山";
  1. 所有的引用类型(包括数组,对象,函数)都有隐性原型属性( proto ), 值也是一个普通的对象。
console.log(obj.__proto__);
  1. 所有的函数,都有一个 prototype 属性,值也是一个普通的对象。
console.log(obj.prototype);
  1. 所有的引用类型的 proto 属性值都指向构造函数的 prototype 属性值。
console.log(obj.__proto__ === Object.prototype); // true
  1. 当试图获取对象属性时,如果对象本身没有这个属性,那就会去他的 proto(prototype)中去寻找。
function Dog(name){this.name = name;
}Dog.prototype.callName = function (){console.log(this.name,"wang wang");
}let dog1 = new Dog("Three Mountain");
dog1.printName = function (){console.log(this.name);
}dog1.callName();  // Three Mountain wang wang
dog1.printName(); // Three Mountain

**原型链:**如下图。

在这里插入图片描述

我找一个属性,首先会在 f.proto 中去找,因为属性值为一个对象,那么就会去 f.proto.proto 去找,同理如果还没找到,就会一直向上去查找,直到结果为 null 为止。这个串起来的链即为原型链。

作用域及闭包

讲到作用域,你会想到什么?

当然是执行上下文

每个函数都有自己的 excution context,和 variable object。这些环境用于储存上下文中的变量函数声明参数等。只有函数才能制造作用域。

PS:for if else 不能创造作用域。

console.log(a) ; // undefined
var a = 1;
//可理解为
var a;
console.log(a);  // undefined
a = 1;

执行 console.log 时,a 只是被声明出来,并没有赋值;所以结果当然是 undefined

本质上来说,在 js 里 this 是一个指向函数执行环境的指针

this 永远指向最后调用它的对象,并且在执行时才能获取值,定义是无法确认他的值。

var a = {name : "A",fn : function (){console.log (this.name)}
}a.fn() // this === a a 调用了fn() 所以此时this为aa.fn.call ({name : "B"}) // this === {name : "B"} 使用call(),将this的值指定为{name:"B"}var fn1 = a.fnfn1() // this === window虽然指定fn1 = a.fn,但是调用是有window调用,所以this 为window

this 有多种使用场景,下面我会主要介绍 4 个使用场景:

  1. 作为构造函数执行
function  Student(name,age) {this.name = name  // this === sthis.age = age    // this === s//return  this
}var s = new Student("前端开发爱好者",30)

首先 new 字段会创建一个空的对象,然后调用 apply() 函数,将 this 指向这个空对象。这样的话,函数内部的 this 就会被空对象代替。

  1. 作为普通函数执行

    function  fn () {console.log (this)  // this === window
    }fn ()
    
  2. 作为对象属性执行

    var obj = {name : "A",printName : function () {console.log (this.name)  // this === obj}
    }obj.printName ()
    
  3. call(),apply(),bind() 三个函数可以修改 this 的指向,具体请往下看:

    var name = "小明" , age = "17"var obj = {name : "安妮",objAge : this.age,fun : function () {console.log ( this.name + "今年" + this.age )}
    }
    console.log(obj.objAge) // 17
    obj.fun() // 安妮今年undefined
    
    var name = "小明" , age = "17"
    var obj = {name : "安妮",objAge :this.age,fun : function (like,dislike) {console.log (this.name + "今年" + this.age ,"喜欢吃" + like + "不喜欢吃" + dislike)}}var a = { name : "Jay", age : 23 }obj.fun.call(a,"苹果","香蕉") // Jay今年23 喜欢吃苹果不喜欢吃香蕉
    obj.fun.apply(a,["苹果","香蕉"]) // Jay今年23 喜欢吃苹果不喜欢吃香蕉
    obj.fun.bind(a,"苹果","香蕉")() // Jay今年23 喜欢吃苹果不喜欢吃香蕉
    

    首先 call,apply,bind 第一个参数都是 this 指向的对象,callapply 如果第一个参数指向 nullundefined 时,那么 this 会指向 windows 对象。

    call,apply 都是改变上下文中的 this,并且是立即执行的。

    bind 方法可以让对应的函数想什么时候调用就什么时候调用。

    闭包

    闭包的概念很抽象,看下面的例子你就会理解什么叫闭包了:

    function a(){var n = 0;this.fun = function () {n++;console.log(n);};
    }var c = new a();c.fun();  //1
    c.fun();  //2
    

    闭包就是能够读取其他函数内部变量的函数。

    在 js 中只有函数内部的子函数才能读取局部变量。

    所以可以简单的理解为:定义在内部函数的函数

    用途主要有两个:

    • 前面提到的,读取函数内部的变量。
    • 让变量值始终保持在内存中

    异步和单线程

    我们先感受下异步。

    console.log("start");
    setTimeout(function () {console.log("medium");
    }, 1000);
    console.log("end");
    

    使用异步后,打印的顺序为 start->end->medium 。因为没有阻塞。

    为什么会产生异步呢?

    首先因为 js 为单线程,也就是说 CPU 同一时间只能处理一个事务。得按顺序,一个一个处理。

    如上例所示,

    • 第一步:执行第一行打印 “start”;
    • 第二步:执行 setTimeout,将其中的函数分存起来,等待时间结束后执行;
    • 第三步:执行最后一行,打印 “end”;
    • 第四部:处于空闲状态,查看暂存中,是否有可执行的函数;
    • 第五步:执行分存函数。

    为什么 js 引擎是单线程?

    js 的主要用途是与用户互动,以及操作 DOM,这决定它只能是单线程。

    例:一个线程要添加 DOM 节点,一个线程要删减 DOM 节点,容易造成分歧

    为了更好使用多 CPU,H5 提供了 web Worker 标准,允许 js 创建多线程,但是子线程受到主线程控制,而且不得操作 DOM。

    任务列队

    单线程就意味着,所有的任务都要排队,前一个结束,才会执行后面的任务。

    如果列队是因为计算量大,CPU 忙不过来,倒也算了。

    但是更多的时候,CPU 是闲置的,因为 IO 设备处理得很慢,例如 ajax 读取网络数据。

    js 设计者便想到,主线程完全可以不管 IO 设备,将其挂起,然后执行后面的任务。

    等后面的任务结束掉,在反过头来处理挂起的任务。

    好,我们来梳理一下:

    • 所有的同步任务都在主线程上执行,形成一个执行栈。
    • 除了主线程之外,还存在一个任务列队,只要任务有了运行结果,就在任务列队中植入一个时间。
    • 主线程完成所有任务,就会读取队列任务,并将其执行。
    • 重复上面三步。
    • 只要主线程空了,就会读取任务列队,这就是 js 的运行机制,也被称为 event loop(事件循环)。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/190576.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机械臂运动规划、抓取末端执行器、抓取开源项目

运动规划 1.1已有抓取点 假设抓取点已检测到。这些方法设计了从机器人手到目标物体抓取点的路径。这里运动表示是关键问题。虽然存在从机器人手到目标抓握点的无限数量的轨迹,但是由于机器人臂的限制,许多区域无法到达。因此,需要对轨迹进行…

python etree.HTML 以及xpath 解析网页的工具

文章目录 导入模块相关语法实战 导入模块 from lxml import etree相关语法 XPath(XML Path Language)是一种用于在XML文档中定位和选择元素的语言。XPath的主要应用领域是在XML文档中进行导航和查询,通常用于在XML中选择节点或节点集合。以…

UiPath学习笔记

文章目录 前言RPA介绍UiPath下载安装组件内容 前言 最近有一个项目的采集调研涉及到了客户端的采集,就取了解了一下RPA和UIPATH,记录一下 RPA介绍 RPA(Robotic Process Automation:机器人处理自动化),是…

pta模拟题(7-15 BCD解密、7-16 数列求和-加强版、7-17 出租、7-18 反向数相加、7-19 一帮一、7-20 连续因子)

7-15 BCD解密 BCD数是用一个字节来表达两位十进制的数,每四个比特表示一位。所以如果一个BCD数的十六进制是0x12,它表达的就是十进制的12。但是小明没学过BCD,把所有的BCD数都当作二进制数转换成十进制输出了。于是BCD的0x12被输出成了十进制…

JS 实现一键复制文本内容

1、演示&#xff1a; 2、代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>一键复制</title&g…

羊大师分析,鲜羊奶对健康的影响与作用

羊大师分析&#xff0c;鲜羊奶对健康的影响与作用 你是否曾经听到过“羊奶比牛奶更健康”的说法&#xff1f;而鲜羊奶作为最纯正的羊奶形式&#xff0c;其营养价值更是不可小觑。除了拥有传统奶类所包含的营养成分外&#xff0c;鲜羊奶还含有更多人体必需的氨基酸和微量元素&a…

更有效的问卷发布方法与必备问卷工具推荐

问卷怎么发&#xff1f;通过哪些渠道发&#xff1f;怎么发收集的数量更多&#xff1f;怎么获得有效数据&#xff1f;这些是做问卷的调查人员经常会遇到的问题。的确&#xff0c;问卷的发放是否有效不仅会影响到收集数据的体量&#xff0c;更会影响到最终结论的真实性。所以&…

centos7 yum安装mysql5.7

1.获取源 wget http://dev.mysql.com/get/mysql57-community-release-el7-11.noarch.rpm 2.安装源 yum -y install mysql57-community-release-el7-11.noarch.rpm 3.安装mysql yum -y install mysql-server 4.如果出现下面错误&#xff0c;没有错误就忽略 使用以下命令解决…

数据结构-带头双向循环链表

文章目录 一.头结点二.双链表1双链表的概念与结构2.与单链表相比 三.循环链表1.关于循环链表2.循环链表的优点 四.带头双向循环链表1.带头双向循环链表2.结构图3.实现 五.代码一览 一.头结点 在链表中设置头结点的作用是什么 标识链表:头结点是链表的特殊节点,它的存在能够明确…

Mongodb安装及其使用

1.Linux系统上安装Mongodb 在usr/local文件夹下创建mongo文件夹 下载mongodb包 wget https://fastdl.mongodb.org/linux/mongodb-linux-x86_64-rhel70-6.0.5.tgz解压mongodb tar -zxvf mongodb-linux-x86_64-rhel70-6.0.5.tgz更改文件夹的名字 mv mongodb-linux-x86_64-rh…

RCE绕过

1.[SCTF 2021]rceme 总结下获取disabled_funciton的方式 1.phpinfo() 2.var_dump(ini_get(“disable_functions”)); 3.var_dump(get_cfg_var(“disable_functions”)); 其他的 var_dump(get_cfg_var(“open_basedir”)); var_dump(ini_get_all()); <?php if(isset($_POS…

蓝桥杯算法心得——小郑躲太阳(思维推导)

大家好&#xff0c;我是晴天学长&#xff0c;一道与平时的题型截然不同的题型&#xff0c;需要的小伙伴可以关注支持一下哦&#xff01;后续会继续更新的。&#x1f4aa;&#x1f4aa;&#x1f4aa; 1) .小郑躲太阳 问题描述 小郑一觉醒来发现起晚啦!现在需要从家里飞速前往公司…

B026-MySQL基础

目录 数据库概述数据库概念数据库的由来和发展常见的关系型数据库服务器&#xff08;DBMS&#xff09;SQL概述表的概念 数据库的安装与配置安装启动和连接MySQL启动MySQL服务连接MySQL MySQL图形化管理软件-Navicat数据库安装失败解决方案 MySQL数据库操作数据库操作和存储引擎…

8.ROS的TF坐标变换(二):动态坐标变换、多坐标变换代码讲解(以LIO-SAM为例)

目录 1 ROS的动态坐标变换及代码解释 1.1 什么是ROS的动态坐标变换 1.2 CMakeLists.txt、package.xml基础配置 1.3 发布方代码实现 1.4 接收方代码实现 2 ROS的多坐标变换及代码解释 2.1 什么是ROS的多坐标变换 2.2 发布方代码实现 2.3 接收方代码实现 3 L…

图解系列--功能追加协议,构建Web内容

功能追加协议 1.消除 HTTP 瓶颈的 SPDY 1.1.HTTP 的瓶颈 使用 HTTP 协议探知服务器上是否有内容更新&#xff0c;就必须频繁地从客户端到服务器端进行确认。如果服务器上没有内容更新&#xff0c;那么就会产生徒劳的通信。 若想在现有 Web 实现所需的功能&#xff0c;以下这些…

线程与多线程编程

1. 线程 1.1 概念 线程又可以称为轻量级进程 &#xff0c;在进程的基础上做出了改进。 一个进程在刚刚启动时&#xff0c;做的第一件事就是申请内存和资源&#xff0c;进程需要把依赖的代码和数据&#xff0c;从磁盘加载到内存中这件事是比较耗费时间的&#xff0c;有的业务…

matlab simulink 永磁同步电机PI调速控制

1、内容简介 略 27-可以交流、咨询、答疑 2、内容说明 永磁同步电机调速控制 永磁同步电机PI调速控制 永磁同步电机PI调速控制、PMSM 3、仿真分析 略 4、参考论文 略 链接&#xff1a;https://pan.baidu.com/s/1AAJ_SlHseYpa5HAwMJlk1w 提取码&#xff1a;rvol 路…

科研者的福利!一个集论文、代码、数据集为一体的网站

Papers with Code 是一个总结了机器学习论文及其代码实现的网站。大多数论文都是有GitHub代码的。这个网站最好的地方就是对机器学习做了任务分类&#xff0c;检索对应的模型非常方便。早在18年Paper With Code创立时就轰动一时&#xff0c;仅创立一年就被Facebook收购。 Pape…

Spring AOP记录接口访问日志

Spring AOP记录接口访问日志 介绍应用范围组成通知&#xff08;Advice&#xff09;连接点&#xff08;JoinPoint&#xff09;切点&#xff08;Pointcut&#xff09;切面&#xff08;Aspect&#xff09;引入&#xff08;Introduction&#xff09;织入&#xff08;Weaving&#x…

Linux--初识和基本的指令(3)

目录 1.前言 1.指令 1.1 cat指令 1.2 echo指令 1.3 more 指令 1.4 less指令 1.5 什么时候使用less和more 1.6 head指令 1.7 tail指令 1.8 wc指令 1.9 与时间相关的指令 1.9.1 date指令 1.9.2 cal指令 1.10 16.find指令&#xff1a;&#xff08;灰常重要&#x…