JavaScript高级教程(javascript实战进阶)

news2024/12/24 8:45:59

javascript高级、面试常问、必备知识点

  • 1.数据类型
  • 2.引用变量赋值问题
  • 3. 对象和函数
  • 4.函数原型与原型链
    • 面试题一
    • 面试题二
    • 面试题一分析
    • 面试题二分析
    • 原型链注意点
  • 5.执行上下文和执行上下文栈
    • 面试题一
    • 面试题二
    • 面试题一分析
    • 面试题二分析
  • 6.作用域
    • 面试题一
    • 面试题二
    • 面试题一分析
    • 面试题二分析
  • 7.闭包
  • 8.线程与事件循环


1.数据类型

分类:

  • 基本数据(值)类型
    • String:任意字符串
    • Number:任意的数字
    • boolean:true/false
    • undefined:undefined
    • null:null
  • 对象(引用)类型
  • Object:任意对象
  • Function:一种特别的对象(可以执行)
  • Array:一种特别的对象(数值下标,内部数据是有序的)

判断:

  • typeof:可以判断undefined、数组、字符串、布尔值、函数
    • 不能判断null和object
  • instanceof:可以判断对象的具体类型
  • ===:可以判断undefined、null( 因为都只有一个值)

undefined衍生至null

console.log(undefined == null) // true

2.引用变量赋值问题

(很重要!)
变量赋值是将一个变量的内容(基本数据类型的值或引用数据类型的地址值)拷贝一份给另一个变量

n个引用变量指向同一个对象,通过一个变量修改对象内部数据,其它所有变量看到的是修改后的数据
2个引用变量指向同一个对象,让其中一个引用变量指向另一个对象,另一引用变量依然指向前一对象

3. 对象和函数

对象:
对象中所有属性名都为字符串,但可以省略属性名的单引号或双引号,例如:name:'张三'
访问对象内部数据:.属性名   [‘属性名’]
只能使用 [‘属性名’]情况:

  1. 当属性名包含特殊字符: -   空格,例如:p[‘content-type’]
  2. 变量名不确定:var propName = 'myAge' var value = 18 p[propName] = value

函数中this问题:
任何函数本质上都是通过某个对象来调用的,如果没有直接指定就是window
所有函数内部都有一个this
它的值是调用函数的当前对象
具体可以看着篇文章

4.函数原型与原型链

函数的prototype属性

  • 每个函数都有一个prototype属性,可称为显示原型(属性),它默认指向一个Object空对象(即称为:原型对象)
  • 原型对象中有一个属性constructor,它指向函数对象
  • 给原型对象添加属性(一般都是方法),作用:让函数的所有实例对象自动拥有原型中的属性(方法)

实例对象的__proto__属性

  • 每个实例对象都有一个__proto__,可称为隐式原型(属性)
  • 对象的隐式原型的值为其对应构造函数的显示原型的值
  • 例:Fn.prototype === fn.__proto__

原型链
访问一个对象的属性时

  • 先在自身属性中查找,找到返回;
  • 如果没有,再沿着__proto__这条链上查找,找到返回;
  • 如果都没有找到,则返回undefined

别名:隐式原型链
作用:查找对象的属性(方法)

在这里插入图片描述

注意点:

  • 所有函数对象的__proto__都是一样的,都指向Function的prototype(都是new Function出来的)
  • 函数的显示原型指向的对象默认是空的Object实例对象,但Object不满足,例:Object.prototype instanceof Object // false(因为A instanceof B,是判断B的显示原型是否在A的原型链上,而Object.prototype指向上图中Object的原型对象,其已经是原型链的尽头了)
  • 所有函数都是Function的实例(包含Function)
  • Object的原型对象是原型链的尽头

面试题一

function A(){

}
A.prototype.n = 1
var b = new A()
A.prototype = {
    n:2,
    m:3
}
var c = new A()
console.log(b.n,b.m,c.n,c.m)

面试题二

function F (){}
Object.prototype.a = function(){
    console.log('66')
}
Function.prototype.b = function(){
    console.log('88')
}
var f = new F()
f.a()
f.b()
F.a()
F.b()

在这里插入图片描述

面试题一分析

输出:1 undefined 2 3
分析:b.n可通过b的隐式原型链查找,而b.m查不到,由于把一个新对象赋值给了A函数的显示原型,因此c的隐式原型指向会发生更改,指向A函数新的显示原型
在这里插入图片描述

面试题二分析

输出:66 报错 66 88
分析:查找f.a时,本身没有,沿着其隐式原型链可查到Object函数的原型对象上,查找成功,执行a函数,但无法查询到f.b,因为此时已是原型链的尽头了,因返回undefined,此执行f.b()报错。同理F.a和F.b都可以通过隐式原型链查询到。
(以下原型对象没有区分名字,且忽略了地址)在这里插入图片描述

原型链注意点

  • 通过图中标记一、二、三,可以得知每个函数都有显示原型和隐式原型(都是new Function()出来的,其都指向Function的显示原型)
  • 标记一可知,Function是特例,其显示原型和隐式原型(也是new Function()出来的)指向相同
  • 标记二可知,Object函数对象也是new Function()出来的,其隐式原型指向Function的显示原型
  • 标记三可知,任何函数其隐式原型都指向Function的显示原型

5.执行上下文和执行上下文栈

变量声明提升

  • 通过var定义(声明)的变量,在定义语句之前就可以访问到
  • 值:undefined

变量提升先于函数提升

函数声明提升

  • 通过function声明的函数,在之前就可以直接调用

全局执行上下文
在执行全局代码前将window确定为全局执行上下文
对全局数据进行预处理

  • var 定义的全局变量,undefined,添加为window的属性
  • function声明的全局函数,添加为window的方法
  • this赋值为window

开始执行全局代码

函数执行上下文
在调用函数,准备执行函数体之前,创建对应的函数执行上下文对象
对局部数据进行预处理
-形参变量赋值为实参,添加为执行上下文的属性

  • arguments赋值实参列表,添加为执行上下文的属性
  • var定义的局部变量,undefined,添加为执行上下文的属性
  • function声明的函数,添加为执行上下文的方法
  • this赋值为调用函数的对象

开始执行函数体代码

面试题一

var a = 3
function fn(){
    console.log(a)
    var a = 4
}
fn()

面试题二

var c =1
function c(c){
    console.log(c)
    var c = 3
}
c(2)

面试题一分析

输出:undefined
分析:在函数体内,使用var定义的变量,声明为局部变量,又由于存在变量提升,因此源代码相当于以下代码

var a = 3
function fn(){
	var a
    console.log(a)
    a = 4
}
fn()

面试题二分析

输出:报错
分析:var定义的变量和函数声明式创建的函数会提升,因此源代码相当于以下代码,c为变量,无法执行c(2)

var c
function c(c){
    console.log(c)
    var c = 3
}
c = 1
c(2)

6.作用域

面试题一

var x = 10
function fn(){
    console.log(x)
}
function show(f){
    var x = 20
    fn()
}
show(fn)

面试题二

 var fn = function(){
     console.log(fn)
 }
 fn()

 var obj = {
     fn2:function(){
         console.log(fn2)
     }
 }
 obj.fn2()

面试题一分析

输出:10
分析:作用域在代码编写完毕时就已经确定了。执行fn(),找到的x为全局作用域x。

面试题二分析

输出:fn函数  报错
分析:第一个输出很好理解。第二个,当执行obj.fn2(),首先在函数内部作用域找fn2,找不到,则去外部全局作用域中找fn2,找不到。若想找到,应该使用this.fn2。这里要区分以下三种输出。

 var obj = {
     fn2:function(){
         console.log(fn2)
         console.log(this.fn2)
         console.log(window.fn2)
     }
 }
 obj.fn2()

7.闭包

//利用闭包实现循环遍历加监听
for(var i = 0,length=btns.length;i<length;i++){
    (function(i){
        var btn = btns[i]
        btn.onclick = function(){
            alert('第'+(i+1)+'个')
        }
    })(i)
}

如何产生闭包?

  • 当一个嵌套的内部(子)函数引用了嵌套的外部(父)函数的变量(或函数)时,就产生了闭包

闭包是什么? 通过chrome浏览器,在debug下查看

  • 理解一:闭包是嵌套的内部函数(绝大部分人)
  • 理解二:闭包是包含被引用变量(或函数)的对象(极少数人)
    注意:闭包存在于嵌套的内部函数中

产生闭包的条件?

  • 函数嵌套
  • 内部函数引用了外部函数的数据(变量/函数)
  • 执行外部函数,也即要执行内部函数定义就会产生闭包(不用执行内部函数)

常见的闭包?

  • 将函数作为另一个函数的返回值
  • 将函数作为实参传递给另一个函数调用

闭包的作用?

  • 使用函数内部的变量在函数执行后,仍然存活在内存中(延长了局部变量的生命周期)
  • 让函数外部可以操作(读写)到函数内部的数据(变量/函数)

闭包的产生和死亡?

  • 产生:在嵌套内部函数定义执行完时就产生了(不是调用,有函数提升)
  • 死亡:在嵌套的内部函数成为垃圾对象时
    注意:产生闭包的个数,看外部函数执行的次数

闭包的缺点?

  • 函数执行完后,函数内的局部变量没有释放,占用内存时间会变长
  • 容易造成内存泄露
    解决:能不用闭包就不用,及时释放

闭包应用:自定义JS模块

具有特定功能的js文件
将所有的数据和功能都封装在一个函数内部(私有的)
只向外暴露一个包含n个方法的对象或函数
模块的使用者,只需要通过模块暴露的对象调用方法来实现对应的功能

内存溢出与内存泄露

内存溢出

  • 一种程序运行出现的错误
    当程序运行需要的内存超过了剩余的内存时,就会抛出内存溢出的错误

内存泄露

  • 占用的内存没有及时释放
  • 内存泄露积累多了就容易导致内存溢出
  • 常见的内存泄露:意外的全局变量、没有及时清理的计时器或回调函数、闭包

8.线程与事件循环

进程与线程

  • 应用程序必须运行在某个进程的某个线程上
  • 一个进程中至少有一个运行的线程:主线程,进程启动后自动创建
  • 一个进程中也可以同时运行多个线程,可说程序是多线程运行的
  • 一个进程内的数据可以供其中的多个线程直接共享
  • 多个进程之间的数据是不能直接共享的
  • 线程池是用来保存多个线程对象的容器,实现线程对象的反复利用

JS单线程,浏览器多线程

具体事件循环面试题可以看篇文章

在这里插入图片描述

若有错误,请即时留言,不胜感激!

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

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

相关文章

git(版本控制)详细解说【工作必备技能】

Git 1 什么是Git Git 是一个开源的分布式版本控制系统&#xff0c;用于敏捷高效地处理任何或小或大的项目。 Git 是 Linus Torvalds 为了帮助管理 Linux 内核开发而开发的一个开放源码的版本控制软件。 Git 与常用的版本控制工具 CVS, Subversion 等不同&#xff0c;它采用…

轻松白嫖GPT-4,已经标星38K,不再害怕高昂的AI模型费用!

文章目录 白嫖GPT-4当前可白嫖站点 白嫖GPT-4 计算机专业学生xtekky在GitHub上发布了一个名为gpt4free的开源项目&#xff0c;该项目允许您免费使用GPT4和GPT3.5模型。这个项目目前已经获得了380000颗星。 开源地址&#xff1a;https://github.com/xtekky/gpt4free 简而言之&a…

软件开发:面向对象设计的七大原则!

七大原则 开闭原则、里氏代换原则、迪米特原则&#xff08;最少知道原则&#xff09;、单一职责原则、接口分隔原则、依赖倒置原则、组合/聚合复用原则。 开闭原则&#xff08;The Open-Closed Principle &#xff0c;OCP&#xff09; 开闭原则&#xff1a;软件实体&#xff…

隐马尔科夫模型

隐马尔可夫模型 隐马尔可夫模型(Hidden Markov Model, HMM)可以由观测序列推断出概率最大的状态序列. HMM中的变量可分为两组: 状态变量(隐变量): { y 1 , y 2 , . . . , y n } \left \{ y_{1},y_{2},...,y_{n}\right \} {y1​,y2​,...,yn​};序列标注问题中的标注. 观察变量…

《Python程序设计与算法基础教程(第二版)》江红 余青松 课后选择题 课后填空题答案

目录 第一章一、选择题二、填空题 第二章一、选择题二、填空题 第三章一、选择题二、填空题 第四章一、选择题二、填空题 第五章一、选择题二、填空题 第八章一、选择题二、填空题 第一章 一、选择题 Python语言属于 C A.机器语言 B.汇编语言 C.高级语言 D.以上都不是 在下列…

【python】数据预处理:分位数归一化 Quantile Normalization + INSCODE AI创作助手测试

文章目录 写在前面标准化/归一化python模块qnorm实现分位数归一化R代码实现分位数归一化分位数归一化 - NSCODE AI创作助手的回答*Q1&#xff1a;Quantile Normalization是什么&#xff1f;**Q2-1: 什么时候用Quantile normalization&#xff1f;**Q2-2: 什么时候做Quantile no…

VScode软件下载与中文设置

目录 一、下载软件 二、中文设置 一、下载软件 1.网站上下载 2.百度网盘链接下载 链接&#xff1a;https://pan.baidu.com/s/1PMhxaExwhurDVVPkkbbYmw?pwd507o 提取码&#xff1a;507o 就选择路径->同意许可->完成下载 二、中文设置 1.在左侧扩展图标中打开“EXT…

Linux - 第20节 - 网络基础(网络层)

1.IP协议 • IP协议全称为“网际互连协议&#xff08;Internet Protocol&#xff09;”&#xff0c;IP协议是TCP/IP体系中的网络层协议。 • 在主机通信的过程中&#xff0c;上层应用程序解决从应用层代码中获取数据并处理数据的问题&#xff0c;应用层解决的是读取完整报文、序…

Lion:Adversarial Distillation of Closed-Source Large Language Model

Lion:Adversarial Distillation of Closed-Source Large Language Model IntroductionMethodologyexperiment Introduction 作者表明ChatGPT、GPT4在各行各业达到很好的效果&#xff0c;但是它们的模型与数据都是闭源的。现在的主流的方案是通过一个老师模型把知识蒸馏到学生模…

明明开发薪资高,是这几点让我依旧选了测试...

不管是对刚毕业的大学生、工作几年的打工仔亦或者是久不入职场的老人来说&#xff0c;进入职场的方向都值得我们深思。 今天我就来解答下大家最常问的问题&#xff1a;开发和测试作为一个项目中很重要的角色&#xff0c;他们有什么区别呢&#xff1f; Python自动化测试&#x…

Benewake(北醒) 快速实现TFmini-S-IIC与电脑通信的操作说明

目录 1. 概述2. 测试准备2.1 工具准备2.2通讯协议转换 3. IIC通讯测试3.1 引脚说明3.2 测试步骤3.2.1 TFmini-S-IIC 与 PC 建立连接3.2.2 获取测距值3.2.3 更改 slave 地址 1. 概述 通过本文档的概述&#xff0c;能够让初次使用测试者快速了解测试 IIC 通信协议需要的工具以及…

Svn安装

目录 一. 软件环境 二. SVN服务端 1. yum安装svn 2. 查看安装的文件列表 3. 建立版本库 3.1 修改数据存储默认位置 3.2 使用svnadmin建立版本库 4. 配制 4.1 添加用户 4.2 配制读写权限 4.3 配制服务 5. 启动服务 5.1 停止服务 5.2 启动服务 5.3 拉取项目 三.…

Vivado下组合逻辑模块的仿真

文章目录 与门或门非门异或门同或门比较器半加器全加器乘法器数据选择器3-8 译码器三态门 组合逻辑电路的特点是任意时刻的输出仅仅取决于输入信号&#xff0c;输入信号变化&#xff0c;输出立即变化&#xff0c;其变化不依赖于时钟。 本文中的例子中模块名都是gate&#xff0c…

HSE健康安全环境管理,已成现代企业必备的一种管理工具

什么是HSE健康安全环境管理 HSE是英文单词Health&#xff0c;Safety&#xff0c;Environment的缩写&#xff0c;中文翻译就是健康、安全、环境管理的意思。HSE管理是一种科学、系统的企业管理方式&#xff0c;目的是为了以人为本&#xff0c;保障员工和环境的健康和安全&#…

express的使用(三) multer处理表单提交

个人博客 欢迎关注公众号:express的使用(三) multer处理表单提交 看前提示 本篇的主要流程是使用在前端提交一个文件&#xff0c;在nodejs编写的后端使用multer以及express进行接收&#xff0c;包括遇到的版本问题&#xff0c;如果是想要学习用body-parser、formidable、mul…

node.js版本与node-sass版本不一致解决

版本比较图 查看版本对比图&#xff1a; https://www.npmjs.com/package/node-sass node.js版本与node-sass版本不一致时npm install是可能会报错的。 安装对应版本 查看nodejs版本 CMD查看nodejs版本 node -v卸载不一致的node-sass npm uninstall node-sass安装指定版…

JAVA并发编程之锁应用

Java并发包是Java中提供的一个用于支持多线程编程的工具包。Java并发包提供了多种机制来控制线程的执行&#xff0c;保证线程的安全性和可靠性。下面我们将介绍Java并发包的使用方法&#xff0c;并给出示例。 synchronized public class SynchronizedDemo { ​private int v;…

华为云认证有什么?考试难不难?

最近几年华为云的市场占比越来越大&#xff0c;逐渐占据了我们生活中的方方面面&#xff0c;而且很多政企单位&#xff0c;也选择华为云作为合作伙伴&#xff0c;因此市场上也需要越来越多的华为云人才&#xff0c;早在几年前&#xff0c;华为云就已经推出了自己的人才认证系统…

条件随机场模型

条件随机场模型&#xff08;Conditional Random Fields, CRF&#xff09; 条件随机场是给定一组输入随机变量条件下&#xff0c;另一组输出随机变量的条件概率分布模型&#xff0c;其特点是假设输出随机变量构成马尔可夫随机场。线性链条件随机场&#xff0c;是输入序列对输出…

用 JavaScript 对抗 DDOS 攻击

继续趣事分享。 上回聊到了大学里用一根网线发起攻击&#xff0c;今天接着往后讲。 不过这次讲的正好相反 —— 不是攻击&#xff0c;而是防御。一个奇葩防火墙的开发经历。 第二学期大家都带了电脑&#xff0c;于是可以用更高端的方法断网了。但设备先进反而没有了 GEEK 的…