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

原型与原型链

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

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为a

a.fn.call ({name : "B"}) // this === {name : "B"} 使用call(),将this的值指定为{name:"B"}

var fn1 = a.fn

fn1() // this === window虽然指定fn1 = a.fn,但是调用是有window调用,所以this 为window

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

  1. 作为构造函数执行
function  Student(name,age) {
    this.name = name  // this === s
    this.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.mfbz.cn/a/211770.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Android HCI日志分析案例2

案例1--蓝牙音箱电量用完后,配对一直失败,提示PIN码不正确 基于MTK平台,通过MTKLogger开启保存HCI日志 问题定位分析 Android日志查看logcat 搜索到关键log 01-20 10:07:55.403760 978 1075 V bt_stack: [VERBOSE2:btm_inq.cc(2032)] …

二维粒子群算法航线规划

GitHub - gabrielegilardi/PathPlanning: Implementation of particle swarm optimization (PSO) for path planning when the environment is known.

GPC-SCP03安全通道协议

概述: 规范全称: GlobalPlatform Technology Secure Channel Protocol 03 Card Specification V2.3 - Amendment D Version 1.1.2 安全通道的建立的标志即通讯双方都形成三个安全通道共享密钥(Derived Session Key),它们是Kmac, Krmac, Kenc…

Feign代替RestTemplate发起http请求

RestTemplate代码: // public Order queryOrderById(Long orderId) {// // 1.查询订单// Order order orderMapper.findById(orderId);// //String url "http://localhost:8081/user/" order.getUserId();// String url "htt…

Redis hash表源码解析

整体数据结构:链式hash解决hash冲突、采用渐进式hash来完成扩容过程。 /** 哈希表节点*/ typedef struct dictEntry {// 键void *key;// 值union {void *val;uint64_t u64;int64_t s64;} v;// 指向下个哈希表节点,形成链表struct dictEntry *next;} dict…

生成带依赖Jar 包的两种常用方式:IDEA打包工具:Artifacts 和 maven-shade-plugin

文章目录 前言1、IDEA打包工具:Artifacts1.1 创建Artifacts1.2 选择第三方jar文件1.3 打包Artifacts1.4 测试jar包 2、maven-shade-plugin2.1、pom文件添加2.2、打包2.3、测试jar包 总结 前言 当我们编写完Java程序后,为了提高执行效率通常会将应用程序…

浅析 TLS(ECDHE)协议的握手流程(图解)

浅析 TLS(ECDHE)协议的握手流程(图解) 通过 wireshark 抓取 HTTPS 包,理解 TLS 1.2 安全通信协议的握手流程。 重点理解几个点: TLS 握手流程:通过 wireshark 抓取 HTTPS 包理解。协商加密&a…

经典文献阅读之--Traversability Analysis for Autonomous Driving...(Lidar复杂环境中的可通行分析)

0. 简介 对于自动驾驶来说,复杂环境的可通行是最需要关注的任务。《Traversability Analysis for Autonomous Driving in Complex Environment: A LiDAR-based Terrain Modeling Approach》一文提出了用激光雷达完成建图的工作,其可以输出稳定、完整和精…

RHEL8更新安全补丁,删除旧内核

# 查看高危漏洞公告 dnf updateinfo list# 对高危漏洞公告的某一项进行单独升级 dnf update --advisoryFEDORA-EPEL-2022-3c43a57d41# 检查安全更新 dnf --security check-update# 只安装最安全的安全更新,忽略所有可能包含不安全新功能的包 dnf --security update-…

大文件分片上传、分片进度、断点续传的原理(一)

大文件分片上传 效果展示 前端 思路 前端的思路&#xff1a;将大文件切分成多个小文件&#xff0c;然后并发给后端。 页面构建 先在页面上写几个组件用来获取文件。 <body><input type"file" id"file" /><button id"uploadButton…

古琴零基础自学考级入门,从初级到高级古琴教学全集

一、教程描述 本套教程是古琴的组合教程&#xff0c;内容是超级齐全的&#xff0c;包括了很多套完整的古琴教程&#xff0c;来自国内知名的古琴教师、专家&#xff0c;教授等&#xff0c;都是从零基础开始讲起的&#xff0c;而且理论与实践相结合&#xff0c;对于刚学古琴入门…

【WPF.NET开发】WPF.NET桌面应用开发概述

本文内容 为何从 .NET Framework 升级使用 WPF 进行编程标记和代码隐藏输入和命令控件布局数据绑定图形和动画文本和版式自定义 WPF 应用 Windows Presentation Foundation (WPF) 是一个与分辨率无关的 UI 框架&#xff0c;使用基于矢量的呈现引擎&#xff0c;构建用于利用现…

SHAP(六):使用 XGBoost 和 HyperOpt 进行信用卡欺诈检测

SHAP&#xff08;六&#xff09;&#xff1a;使用 XGBoost 和 HyperOpt 进行信用卡欺诈检测 本笔记本介绍了 XGBoost Classifier 在金融行业中的实现&#xff0c;特别是在信用卡欺诈检测方面。 构建 XGBoost 分类器后&#xff0c;它将使用 HyperOpt 库&#xff08;sklearn 的 …

26. 深度学习进阶 - 深度学习的优化方法

Hi, 你好。我是茶桁。 上一节课中我们预告了&#xff0c;本节课是一个难点&#xff0c;同时也是一个重点&#xff0c;大家要理解清楚。 我们在做机器学习的时候&#xff0c;会用不同的优化方法。 SGD 上图中左边就是Batch Gradient Descent&#xff0c;中间是Mini-Batch Gra…

【Linux】Ubuntu添加root用户

在Ubuntu中&#xff0c;默认情况下是禁用了root用户的登录。如果仍然想要启用root用户&#xff0c;并设置root用户的密码&#xff0c;应按照以下步骤进行操作&#xff1a; 一、输入sudo passwd root设置root用户密码 二、切换root用户 sudo -i su root 这两条命令均可却换至…

python+pytest接口自动化(6)-请求参数格式的确定

我们在做接口测试之前&#xff0c;先需要根据接口文档或抓包接口数据&#xff0c;搞清楚被测接口的详细内容&#xff0c;其中就包含请求参数的编码格式&#xff0c;从而使用对应的参数格式发送请求。例如某个接口规定的请求主体的编码方式为 application/json&#xff0c;那么在…

在linux服上部署vue+springboot+nginx项目

一、环境准备 1、安装winscp便于可视化操作linux&#xff1a;winscp安装及关联putty使用_putty.exe没有找到_cherishSpring的博客-CSDN博客 2、安装jdk&#xff1a;linux系统安装jdk-CSDN博客 3、安装mysql&#xff1a;Linux7安装mysql数据库以及navicat远程连接mysql-CSDN博…

K8S客户端二 使用Rancher部署服务

Rancher容器云管理平台 本博客中使用了四台服务器&#xff0c;如下 rancher服务器k8s-masterk8s-worker01k8s-worker02 一、主机硬件说明 序号硬件操作及内核1CPU 4 Memory 4G Disk 100GCentOS72CPU 4 Memory 4G Disk 100GCentOS73CPU 4 Memory 4G Disk 100GCentOS74CPU 4 …

剑指 Offer(第2版)面试题 15:二进制中1的个数

剑指 Offer&#xff08;第2版&#xff09;面试题 15&#xff1a;二进制中1的个数 剑指 Offer&#xff08;第2版&#xff09;面试题 15&#xff1a;二进制中1的个数解法1&#xff1a;位运算解法2&#xff1a;n & (n - 1)相关题目 剑指 Offer&#xff08;第2版&#xff09;面…

Java数据结构之《希尔排序》题目

一、前言&#xff1a; 这是怀化学院的&#xff1a;Java数据结构中的一道难度中等的一道编程题(此方法为博主自己研究&#xff0c;问题基本解决&#xff0c;若有bug欢迎下方评论提出意见&#xff0c;我会第一时间改进代码&#xff0c;谢谢&#xff01;) 后面其他编程题只要我写完…