总结面试题——Javascript

文章目录

      • 1.闭包
      • 2.作用域链
      • 3.JavaScript的原型 原型链 有什么特点
      • 4.事件代理
      • 5.Javascript如何实现继承
      • 6.this对象
      • 7.事件模型
      • 8.new操作符
      • 9.ajax原理
      • 10.解决跨域问题
      • 11.模块化开发怎么做
      • 12.异步加载js的方式有哪些
      • 13.会造成内存泄漏的操作
      • 14.XML和JSON的区别
      • 15.webpack
      • 16.AMD和Commonjs
      • 17.常见web安全及护理原理
      • 18 用过哪些设计模式?
      • 19 为什么要有同源限制?
      • 20 offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别
      • 21.Javascript有哪些方法定义对象
      • 22.常见的兼容性问题
      • 23.promise
      • 24.Jquery有哪些写得好的地方
      • 25.vue react angular
      • 26.Node的应用场景
      • 27.web开发中会话跟踪的方法
      • 28.js的基本数据类型
      • 29.Js中的内置对象
      • 30.写Javascript的规范
      • 31.Javascript有几种类型的值
      • 32.null和undefined的区别

1.闭包

闭包就是在函数中嵌套函数 作用是可以读取其他函数中的变量 突破作用域 并且在函数中涉及到的变量会永远保存于内存中

2.作用域链

作用域链就是在执行环境中有序的限制和控制变量以及函数的可访问范围 在作用域链中变量只能向上访问不能向下

3.JavaScript的原型 原型链 有什么特点

每个对象都会在其内部初始化一个属性 就是原型 prototype

当我们访问一个对象中不存在的属性时 他会去他的prototype 中寻找 未找到再向prototype中寻找 以此类推 就形成了原型链

关系:instance.constructor.prototype = instance.proto
构造函数的原型对象=实例化对象的对象原型

特点:当我们更改构造函数的原型时 相应的构造函数中也可以继承到该属性 当我们需要一个对象中的属性时 Javascript引擎会帮我们寻找当前对象中是否有 如果没有则向上prototype中去寻找 一直检索到 Object 内建对象

4.事件代理

事件代理又称为事件委托 就是根据DOM的事件冒泡原理 将应该注册的事件委托给父元素 让其担当事件的监听职务 从而大量的节省内存的占用 减少事件的注册尤其是动态添加的子元素无需为其注册事件

5.Javascript如何实现继承

可以使用原型对象和构造函数的混合方式实现继承

6.this对象

在函数中的this指向函数的直接调用者
如果有new关键字 则this指向new实例的对象
在事件中this指向出发这个事件的对象 IE中的attchEvent(绑定事件)函数的默认this指向为window 要解决问题可以通过call改变方法的指向

7.事件模型

W3c中定义事件的发生经历三个阶段 捕获阶段 目标阶段 冒泡阶段
冒泡型事件 当使用冒泡事件时 子级元素先触发 父级元素后触发
捕获型事件 当使用捕获事件时 父级元素先触发 子级元素后出发
DOM事件流 同时支持捕获和冒泡事件
阻止冒泡 W3c中使用stoppropagation()方法 在IE下设置cancelBubble=true
阻止捕获 阻止事件的默认行为 在W3c中使用preventDefault()方法 在IE下设置window.event.returnValue = false

8.new操作符

创建一个空白对象 并且this变量引用该对象 同时继承该对象的原型
属性和方法都被加入到this引用的对象中
新创建的对象由this所引用 并且最后隐式的返回this

9.ajax原理

Ajax的原理简单来说是在用户和服务器之间加了—个中间层(AJAX引擎) 通过XmlHttpRequest对象来向服务器发异步请求 从服务器获得数据 然后用javascript来操作DOM而更新页面 使用户操作与服务器响应异步化 这其中最关键的一步就是从服务器获得请求数据
Ajax的过程只涉及JavaScript XMLHttpRequest和DOM XMLHttpRequest是ajax的核心机制
ajax优点
通过异步模式 提升了用户体验
优化了浏览器和服务器之间的传输 减少不必要的数据往返 减少带宽的占用
Ajax在客户端运行 承担了一部分本来由服务器承担的工作 减少了大用户量下的服务器负载
Ajax可以实现动态不刷新(局部刷新)
ajax缺点
安全问题 AJAX暴露了与服务器交互的细节
对搜索引擎的支持比较弱
不容易调试

10.解决跨域问题

首先了解下浏览器的同源策略 同源策略/SOP(Same origin policy)是一种约定,由Netscape公司1995年引入浏览器,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,浏览器很容易受到XSS、CSFR等攻击。所谓同源是指"协议+域名+端口"三者相同,即便两个不同的域名指向同一个ip地址,也非同源
解决跨域:
通过jsonp跨域
document.domain + iframe跨域
nginx代理跨域
nodejs中间件代理跨域
后端在头部信息里面设置安全域名

11.模块化开发怎么做

一个功能就是一个模块 多个模块可以组成完整应用 抽离一个模块不会影响其他模块的运行
在这里插入图片描述
立即执行函数不暴露私有成员

12.异步加载js的方式有哪些

defer 只支持IE
asyec
创建script 插入DOM中 加载完毕后callBack

13.会造成内存泄漏的操作

内存泄露指任何对象在您不再拥有和需要他之后仍然存在
setTimeout的第一个参数使用字符串而非函数的话会发生内存泄漏
闭包使用不恰当 控制台日志、循环(在两个对象彼此引用且彼此保留时,就会产生一个循环)

14.XML和JSON的区别

  1. 数据体积方面
    JSON相对于XML来说 数据体积更小 传递的速度更快些
  2. 数据交互方面
    JSON和script的之间的交互更加方便 更容易解析处理 更好的数据交互
  3. 数据描述方面
    JSON对数据的描述比XML较差
  4. 传输速度方面
    JSON的速度要远快于XML

15.webpack

WebPack 是一个模块打包工具,你可以使用WebPack管理你的模块依赖,并编绎输出模块们所需的静态文件。它能够很好地管理、打包Web开发中所用到的HTML、Javascript、CSS以及各种静态文件(图片、字体等),让开发过程更加高效。对于不同类型的资源,webpack有对应的模块加载器。webpack模块打包器会分析模块间的依赖关系,最后 生成了优化且合并后的静态资源

16.AMD和Commonjs

Commonjs是后端服务器模块的规范 node.js采用这个规范 Common规范加载模块是同步的也就是说只有加载完成后才能进行后面的操作
AMD规范则是非同步加载模块 允许指定回调函数 AMD推荐的风格通过返回一个对象作为模块对象
Commonjs的风格通过对module.exports或exports的属性赋值来达到暴露模块对象的目的
es6模块 CommonJS、AMD、CMD
CommonJS 的规范中,每个 JavaScript 文件就是一个独立的模块上下文(module context),在这个上下文中默认创建的属性都是私有的。也就是说,在一个文件定义的变量(还包括函数和类),都是私有的,对其他文件是不可见的。
CommonJS是同步加载模块,在浏览器中会出现堵塞情况,所以不适用
AMD 异步,需要定义回调define方式
es6 一个模块就是一个独立的文件,该文件内部的所有变量,外部无法获取。如果你希望外部能够读取模块内部的某个变量,就必须使用export关键字输出该变量 es6还可以导出类、方法,自动适用严格模式

17.常见web安全及护理原理

  • sql注入原理
    就是通过把SQL命令插入到Web表单递交或输入域名或页面请求的查询字符串,最终达到欺骗服务器执行恶意的SQL命令
    总结以下几点:
    永远不要信任用户的输入,要对用户的输入进行校验,可以通过正则表达式,或限制长度,对单引号和双"-"进行转换等
    永远不要使用动态拼装SQL,可以使用参数化的SQL或者直接使用存储过程进行数据查询存取
    永远不要使用管理员权限的数据库连接,为每个应用使用单独的权限有限的数据库连接
    不要把机密信息明文存放,请加密或者hash掉密码和敏感的信息
  • XSS原理及防范
    Xss(cross-site scripting)攻击指的是攻击者往Web页面里插入恶意html标签或者javascript代码。比如:攻击者在论坛中放一个看似安全的链接,骗取用户点击后,窃取cookie中的用户私密信息;或者攻击者在论坛中加一个恶意表单,当用户提交表单的时候,却把信息传送到攻击者的服务器中,而不是用户原本以为的信任站点
  • XSS防范方法
    首先代码里对用户输入的地方和变量都需要仔细检查长度和对”<”,”>”,”;”,”’”等字符做过滤;其次任何内容写到页面之前都必须加以encode,避免不小心把html tag 弄出来。这一个层面做好,至少可以堵住超过一半的XSS 攻击
  • XSS与CSRF有什么区别吗?
    XSS是获取信息,不需要提前知道其他用户页面的代码和数据包。CSRF是代替用户完成指定的动作,需要知道其他用户页面的代码和数据包。要完成一次CSRF攻击,受害者必须依次完成两个步骤
  1. 登录受信任网站A,并在本地生成Cookie
  2. 在不登出A的情况下,访问危险网站B
  • CSRF的防御
    服务端的CSRF方式方法很多样,但总的思想都是一致的,就是在客户端页面增加伪随机数
    通过验证码的方法

18 用过哪些设计模式?

  1. 工厂模式:
    工厂模式解决了重复实例化的问题,但还有一个问题,那就是识别问题,因为根本无法
    主要好处就是可以消除对象间的耦合,通过使用工程方法而不是new关键字
  2. 构造函数模式
    使用构造函数的方法,即解决了重复实例化的问题,又解决了对象识别的问题,该模式与工厂模式的不同之处在于
    直接将属性和方法赋值给 this对象;

19 为什么要有同源限制?

同源策略指的是:协议,域名,端口相同,同源策略是一种安全协议
举例说明:比如一个黑客程序,他利用Iframe把真正的银行登录页面嵌到他的页面上,当你使用真实的用户名,密码登录时,他的页面就可以通过Javascript读取到你的表单中input中的内容,这样用户名,密码就轻松到手了。

20 offsetWidth/offsetHeight,clientWidth/clientHeight与scrollWidth/scrollHeight的区别

  • offsetWidth/offsetHeight返回值包含content + padding + border,效果与e.getBoundingClientRect()相同
  • clientWidth/clientHeight返回值只包含content + padding,如果有滚动条,也不包含滚动条
  • scrollWidth/scrollHeight返回值包含content + padding + 溢出内容的尺寸

21.Javascript有哪些方法定义对象

对象字面量:var obj={}
构造函数:var obj=new object()
Object.create():var obj=Object.create(Object.prototype)

22.常见的兼容性问题

png24位的图片在IE浏览器上出现背景解决方案是做成png8
浏览器默认的margin和padding不同 可通过 全局添加margin:0;padding:0;来统一
IE下evevnt对象有x,y属性 但是没有pagex,pagey属性
Firefox下event对象有pagex pagey属性没有x y 属性

23.promise

依照promise/A+的定义 promise有四种状态
pending :初始状态 非 fulfilled(成功的操作)或 rejected(失败的操作)
fulfilled和rejected合称settled
promise对象用于延迟(deferred)和异步(asynchronous)计算
promise的构造函数
基本用法如下:

var p1=new promise((resolve,reject)=>{
if(---){resolve(data)
}else{reject(err)
}
})

promise实例拥有then方法(具有then方法的对象 通常被称为thenable)使用方法如下
p1.then((aa,bb)
接收两个函数做为参数aa就是在fulfilled的时候被调用 bb在rejected的被调用 接收的参数就是future aa对应resolve bb对应reject

24.Jquery有哪些写得好的地方

1>jquery源码封装在一个匿名函数的自执行环境中 有助于防止变量的全局污染 然后通过传入window对象参数 可以使windown对象作为局部变量使用 好处是当jquery 访问windown对象的时候 就不用将作用域链退回访顶级作用域了 从而可以更快的访问windown对象了 同样传递undefined参数 可以缩短查找undefined时的作用域链
2>jquery将一些原型属性和方法封装在了jquery.prototype中 为了缩短名称 又赋值给了jquery.fn 这是很形象的写法
3>有一些数组和对象的方法经常能使用到 jquery将其保存为局部变量以提高访问速度
4>jquery实现的链式调用可以节约代码 所有返回的都是同一对象 可以提高代码效率

25.vue react angular

vue.js一个用于创建web交互页面的库 是一个精简的MVVM 他通过双向数据绑定把view层和model层连接起来 实际的DOM封装和输出格式都被抽象为了Directives和Filtes
AngularJs是一个比较完善的前端MVVM框架 包含模板 数据双向绑定 路由 模块化 服务 依赖注入等所有功能 模板功能强大丰富自带丰富的Angular指令
react React仅仅是VIEW层facebook公司 推出的用于构建ui的一个库能都是先服务器端的渲染使用virtual dom 所以性能很好

26.Node的应用场景

特点
他是一个Javascript运行环境
依赖于chrome V8引擎进行代码解释
事件驱动
非堵塞I/O
单进程 单线程
优点
高并发(最重要的优点)
缺点
只支持单核cpu 不能充分利用cpu
可靠性能低 一旦代码某个环节崩溃整个代码崩溃

27.web开发中会话跟踪的方法

cookie
session
url重写
隐藏input
ip地址

28.js的基本数据类型

  • 未定义undefined
  • 空 null
  • 布尔 boolean
  • 数字 number
  • 字符串 string

29.Js中的内置对象

  • object是Javascript中的所有对象的父对象
    数据封装类对象有:
    object Array Boolean Number String
    其他对象:
    Function Arguments Math Data RegExp Error

30.写Javascript的规范

  1. 不要再同一行声明多个变量
  2. 尽量使用=== / !== 来比较true/false 或者数值
  3. 适用对象字面量替代new Array这个形式
  4. 不要使用全局函数
  5. Switch语句必须带有的default分支
  6. if语句必须有大括号
  7. for-in循环中的变量 应该使用var关键字明确限定作用域 从而避免作用域污染

31.Javascript有几种类型的值

  • 栈:原始数据类型(Undefined,Null,Boolean,Number、String)
  • 堆:引用数据类型(对象、数组和函数)
  • 两种类型的区别是:存储位置不同;
  • 原始数据类型直接存储在栈(stack)中的简单数据段,占据空间小、大小固定,属于被频繁使用数据,所以放入栈中存储;
  • 引用数据类型存储在堆(heap)中的对象,占据空间大、大小不固定,如果存储在栈中,将会影响程序运行的性能;引用数据类型在栈中存储了指针,该指针指向堆中该实体的起始地址。当解释器寻找引用值时,会首先检索其
  • 在栈中的地址,取得地址后从堆中获得实体

32.null和undefined的区别

  • null 表示不存在这个值
    表示一个对象被定义了值为空值 可以理解为一个空对象里面没有属性跟方法
  • undefined 表示表示缺少值 或者说是应该有这个值而并没有定义
    变量被声明了但是没有赋值 返回就是undefined
  • 如果作为函数的参数 表示该函数的参数不是对象 在验证null时 一定要用 === 因为 == 无法分别null和undefined

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

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

相关文章

OAuth2.0 知多少

OAuth2.0 知多少 原文:OAuth2.0 知多少1. 引言 周末逛简书&#xff0c;看了一篇写的极好的文章&#xff0c;点击大红心点赞&#xff0c;就直接给我跳转到登录界面了&#xff0c;原来点赞是需要登录的。 可是没有我并没有简书账号&#xff0c;一直使用的QQ的集成登录。下面有一排…

五分钟带你摸透 Vue组件及组件通讯

一.组件化开发 组件 (Component) 是 Vue.js 强大的功能之一。组件可以扩展 HTML 元素&#xff0c;封装可重用的代 码。在较高层面上&#xff0c;组件是自定义元素&#xff0c;Vue.js 的编译器为它添加特殊功能。在vue中都是组件化开发的&#xff0c;组件化开发就是把一个完整的…

微信公众号开发-接入

一 首先实现内网穿透&#xff0c;公众号需要连接我们的服务器&#xff0c;内外无法访问&#xff0c;所以先实现自己的内网可以测试时连接外网&#xff0c;下载natapp&#xff0c;选择windows&#xff0c;顺便下载config,ini 配置文件。注册好购买免费的隧道 然后将token写入配置…

Vue 项目上线优化

上线项目的优化 优化上线项目&#xff0c;首先在上线打包时我们通过babel插件将console清除&#xff0c;当然对项目打包后的体积的影响是微乎其微&#xff0c;对项目的入口文件的改善也是很有必要的&#xff0c;因为在开发阶段和上线如果我们使用的是同一入口文件&#xff0c;…

Python并发编程—进程

多任务编程 1.意义&#xff1a; 充分利用计算机多核资源&#xff0c;提高程序的运行效率。 2.实现方案 &#xff1a;多进程 &#xff0c; 多线程 3.并行与并发 并发 &#xff1a; 同时处理多个任务&#xff0c;内核在任务间不断的切换达到好像多个任务被同时执行的效果&#xf…

Vue 脚手架中的.eslintrc.js代码规范 的解决

在我们使用Vue脚手架 创建项目时 尤其是团队共同开发项目时 会按照一个共同的代码规范来编程 创建Vue脚手架中有一个.eslintrc.js格式 但是在编程中我们通常会使用 shiftaltf 进行代码格式化 但是由于格式化后的代码 与Vue中的.eslintrc规范不协调 尤其是 “” &#xff1b; 以…

前端面试---Vue部分考点梳理

一. Vue的使用 1. Vue的基本使用 指令 插值 插值 表达式 指令 动态属性 v-html 会有XSS风险 会覆盖子组件 computed 和 watch computed 有缓存 data不变则不会重新计算watch 如何深度监听watch 监听引用类型时 拿不到oldVal v-for v-for 和 v-if 不能同时使用:key的值尽量…

.net core实现跨域

什么是跨域在前面已经讲解过了&#xff0c;这里便不再讲解&#xff0c;直接上代码。 一、后台API接口 用.net core创建一个Web API项目负责给前端界面提供数据。 二、前端界面 建立两个MVC项目&#xff0c;模拟不同的ip&#xff0c;在view里面添加按钮调用WEB API提供的接口进行…

TCP/IP简介

TCP/IP简介 OSI的“实现”&#xff1a;TCP/IP参考模型 并不完全符合OSI的七层参考模型&#xff0c;但我们可以理解为OSI的一种实现 TCP/IP协议简述 在很多情况下&#xff0c;它只是利用IP协议进行通信时&#xff0c;所必须用到的协议群的统称&#xff0c;具体来说&#xff0c;I…

Spring-Cloud 学习笔记-(4)负载均衡器Ribbon

目录 Spring-Cloud 学习笔记-&#xff08;4&#xff09;负载均衡器Ribbon1、前言2、什么是负载均衡2.1、问题分析2.2、什么是Ribbon3、快速入门3.1、实现方式一3.1.1、修改代码3.2、实现方式二3.2.1、启动类3.2.2、调用代码3.2.3、测试3.2.4、实现原理3.2.5、断点调式3.3、修改…

‘仿微信发表朋友圈’项目中登录功能的业务逻辑

登录功能 手机号验证码都通过后端验证后 返回用户数据 登陆成功 成功后 调用store中的setUser方法 store中的setUser方法 将后端返回的用户信息存储到localStorage中 同时登录成功后服务器会将token自动存入我们的cookie中 有过期时间 在我们请求需要登录的接口时将cookie中的…

kubernetes--配置文件

转载于:https://www.cnblogs.com/caiciadeliliang/p/10993388.html

微信动态中的背景图更换

初衷&#xff1a; 图一中的红框中的部分&#xff0c;作为用户自定义的背景图&#xff0c;如果用户没有上传也会为其自动设置一张背景图&#xff0c;当用户点击时则会出现图二中的选项 &#xff0c;点击取消则选项消失&#xff0c;点击从相册选择则会跳转本机的相册&#xff0c…

大数据学习——akka自定义RPC

实现 package cn.itcast.akkaimport akka.actor.{Actor, ActorSystem, Props} import akka.actor.Actor.Receive import com.typesafe.config.ConfigFactoryimport scala.collection.mutableimport scala.concurrent.duration._class Master(val host: String, val port: Int) …

从Client应用场景介绍IdentityServer4(一)

从Client应用场景介绍IdentityServer4&#xff08;一&#xff09; 原文:从Client应用场景介绍IdentityServer4&#xff08;一&#xff09;一、背景 IdentityServer4的介绍将不再叙述&#xff0c;百度下可以找到&#xff0c;且官网的快速入门例子也有翻译的版本。这里主要从Clie…

开发常用代码笔记

Vue 使用moment插件对时间进行格式化&#xff08;全局设置&#xff09; 下载插件 npm install moment --save 在main.js中引入插件 import moment from ‘moment’ 在main.js中定义全局过滤器 Vue.filter(dataFilter,function (dataStr,patten YYYY-MM-DD HH:mm:ss) {retur…

微信小程序——账号及开发工具

1. 注册微信小程序账号 点击我进入微信公众平台 进入后点击立即注册 注册成功且登录后进入小程序管理后台 2. 安装开发者工具 点击进入开发文档 进入安装开发工具&#xff08;稳定版本&#xff09; 一路默认下一步进行安装 3. 开发者工具的使用 使用注册微信小程序的微信号…

CSS注意的地方

content-box和border-box的区别 2018年02月27日 22:20:16 sulingliang 阅读数&#xff1a;8011盒子模型 盒子宽度&#xff1a;paddingbordercontent-width 盒子高度&#xff1a;paddingbordercontent-height 如图所示 盒子模型content-box 说明&#xff1a;在内容宽度和高度之…

机器学习笔记(6) 线性回归

先从最简单的例子开始,假设我们有一组样本(如下图的一个个黑色的圆点),只有一个特征,如下图,横轴是特征值,纵轴是label。比如横轴是房屋面积,纵轴是房屋价格. 现在我们要做什么呢&#xff1f;我们试图找到一条直线yaxb,可以尽量好的拟合这些点. 你可能要问了,为啥是直线,不是曲…

仿微信朋友圈项目梳理

项目功能简介&#xff1a; 用户通过手机号验证码进行登录和注册 可以浏览动态列表中的所有动态 登录成功后用户可以发表自己的动态 也可以对自己认可欣赏的动态进行点赞和评论 也可以通过动态结识志同道合的朋友 进行聊天和探讨 前端&#xff1a;采用Vue框架搭建 weui进行页面…