JS基础

变量

面试题

1、JS使用typeof能得到哪些类型？

考点： JS变量类型

typeof undefined, //undefined typeof 'abc' ,//string typeof 123 ,//number typeof true ,//boolean typeof {} ,//object typeof [] ,//object typeof null ,//object typeof console.log ,//function typeof Symbol(1) // symbol  

2、何时使用 === 何时使用 == ？

考点： 强类型转换

if(obj.a == null){ //这里相当于 obj.a === null || obj.a === undefined,简写形式 //这是 jquery 源码中推荐的写法 } 

3、JS中有哪些内置函数？

Object、Array、Boolean、Number、String、Function、Date、RegExp、Error、Math、JSON、window、document等。。

4、JS变量按照存储方式区分哪些类型，并描述其特点

//值类型 //占用空间固定，值保存在栈中 //保存与复制的是值本身 var a = 10; var b = a; a = 11 console.log(b) //10 //引用类型 //占用空间不固定，值保存在堆中 //保存与复制的是指向对象的一个指针 var obj1 = {x: 100}; var obj2 = obj1; obj1.x = 200; console.log(obj2.x) //200 

5、如何理解JSON?

JSON 只不过是一个 JS 对象而已

JSON.stringify({a:10, b:20})

JSON.parse('{"a": 10, "b": 20 }')

变量类型

——链接

• 值类型（内存中存具体值） vs 引用类型（内存中存的指针）

  • 引用类型：对象，数组，函数

  • 引用类型特点：不限制扩张属性

  • 因为引用类型占据空间较大，所以用指针来共享空间

• typeof运算符详解

  • typeof只能区分值类型的详细类型

• 使用instanceof判断变量的详细类型

  • arr instanceof Array; //true

• 使用Object.prototype.toString判断。

  • 数值：返回[object Number]。
  • 字符串：返回[object String]。
  • 布尔值：返回[object Boolean]。
  • undefined：返回[object Undefined]。
  • null：返回[object Null]。
  • 数组：返回[object Array]。
  • arguments 对象：返回[object Arguments]。
  • 函数：返回[object Function]。
  • Error 对象：返回[object Error]。
  • Date 对象：返回[object Date]。
  • RegExp 对象：返回[object RegExp]。
  • 其他对象：返回[object Object]。

变量计算

• 强制类型转换（值类型）

  • 字符串拼接

  • == 运算符

  • 使用 == 的情况，除了以下情况，其他一律用 ===

    • 查看对象的属性是否存在 》if (obj.a == null){ }

    • 查看函数中的参数是否存在 》function(a,b) {if (a == null) {...} }

      var obj = {}; if(obj.a == null){ //这里相当于 obj.a === null || obj.a === undefined,简写形式 //这是 jquery 源码中推荐的写法 } 

  • if语句

  • 逻辑运算 （&&、||、!(not)）

  • 0、NaN、’’、””、null、undefined、false 自动转换为false

  //字符串拼接 var a = 100 + 10 //110 var b = 100 + '10' //"10010" // == 运算符 100 == '100' //true 0 == '' //true //if语句 if(100) {} //把数字转换为true if('') {} //把字符串转换为false //逻辑运算 console.log(10&&0) //0 把10转换为true console.log(''||'abc') // "abc" 把‘’转换为false console.log(!window.abc)//true window.abc是undefined，把非undefined 转换 为true //判断一个变量会被当做true还是false var a = 100 console.log(!!a); // true 

原型 原型链

面试题

1、如何准确判断一个变量是数组类型？

变量 instanceof Array

var arr = []; arr instanceof Array //true typeof arr //"object", typeof 是无法判断是否是数组的 

2、写一个原型链继承的例子

//写一个封装DOM的例子 function Elem(id){ this.elem = document.getElementById(id); }     Elem.prototype.html = function (val) { var elem = this.elem; if(val){             elem.innerHTML = val; return this; //链式操作， 可有可无 }else{ return elem.innerHTML; } }     Elem.prototype.on = function(type, fn){ var elem = this.elem;         elem.addEventListener(type, fn); return this; } var div1 = new Elem('div1'); //console.log(div1.html())     div1.html('<p>hello world<p>').on('click', function(){ alert('clicked'); }).html('<p>javascript<p>' 

3、描述 new 一个对象的过程

• 创建一个新对象
• 将构造函数的作用域赋给新对象（this指向这个新对象）
• 执行构造函数中的代码，即对this赋值
• 返回新对象，即返回this

function Foo(name, age) { this.name = name     this.age = age     //return this; } var f = new Foo('zhangsan', age) 

4、zepto（或其他框架）源码中如何使用原型链

构造函数

//基本碰到首字母大写的函数， 就是构造函数，so构造函数尽量大写字母开头 function Foo(name, age) { this.name = name     this.age = age     this.class = 'class-1' //return this //默认有这一行 } var f = new Foo('zhangsan', 20) //var f1 = new Foo('lisi', 22) //创建多个对象 

构造函数——扩展

• var a = {} 其实是 var a = new Object() 的语法糖
• var a = [] 其实是 var a = new Array() 的语法糖
• function Foo() {…} 其实是 var Foo = new Function(…)
• 使用 instanceof 判断一个函数是否是一个变量的构造函数

原型规则和实例

5条原型规则

1. 所有的引用类型（数组、对象、函数），都具有对象的特性、即可自由扩展属性（除了 “null” 意外）

2. 所有的引用类型（数组、对象、函数），都有一个__proto__(隐式原型) 属性，属性值是一个普通的对象

3. 所有的函数，都有一个prototype(显示原型) 属性， 属性值也是一个普通的对象

4. 所有引用类型（数组、对象、函数），__proto__ 属性值都指向它的构造函数的 prototype属性值

5. 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__(即它的构造函数的prototype) 中寻找。

var obj = {}; obj.a = 100; //1 var arr = []; arr.a = 100; function Fn() {} Fn.a = 100;  console.log(obj.__proto__);//2 console.log(arr.__proto__); console.log(Fn.__proto__);  console.log(Fn.prototype);//3 console.log(obj.__proto__ === Object.prototype)//4 5 

//构造函数 function Foo(name, age) { this.name = name; } Foo.prototype.alertName = function() { alert(this.name); } //创建示例 var f = new Foo('zhangsan') f.printName = function() {     console.log(this.name) } //无论是函数f自身属性，还是从原型得到的属性，this永远指向f自己本身 f.printName(); f.alertName(); f.toString(); //要去 f.__proto__.__proto__ 寻找 //循环对象自身的属性 var item //for in 对函数属性进行循环 for (item in f) { //高级浏览器已经存在 for in 中屏蔽了来自原型的属性 //但是这里建议加上这个判断，保证程序的健壮性 if(f.hasOwnProperty(item)) {         console.log(item) } } 

原型链

JavaScript对象有一个指向一个原型对象的链。当试图访问一个对象的属性时，它不仅仅在该对象上搜寻，还会搜寻该对象的原型，以及该对象的原型的原型，依次层层向上搜索，直到找到一个名字匹配的属性或到达原型链的末尾。
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xbtUgEGA-1590071179192)(https://i.loli.net/2019/05/21/5ce3f4978a28565863.png)]

instanceof

instanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置

f instanceof Foo 的判断逻辑是：

f 的 __proto__一层层往上，能否对应到 Foo.prototype

在试着判断 f instanceof Object

作用域 闭包

面试题

1、说一下对变量提升的理解

• 分为变量定义和函数声明（和函数表达式的区别）

• 全局作用域和函数作用域或者是（ES6）中块级作用域，变量声明（var）和函数声明会被提升到作用域顶部，而函数表达式不会，只是当做一个var变量提升，函数没有被提升，另外ES6 中 let 和 const标识符定义的变量也不会发生提升（暂时性死区 TDZ）

2、说明this几种不同的使用场景

• 作为构造函数执行
• 作为对象属性执行
• 作为普通函数执行
• call apply bind
• 箭头函数中（ES6）

this指的是当前运行的环境，即执行的时候

3、创建10个a标签，点击的时候弹出来对应的序号

var i; for(i=0, i<10，i++) { var a = document.createElement('a'); (function(i) {         a.innerHTML= a +'<br>';         a.addEventListener('click', function(e) {             e.preventDefault(); alert(i) })         document.body.appendChild(a); })(i) } 

4、如何理解作用域

• 自由变量： 在当前作用域没有被定义的变量
• 作用域链：若在当前作用域找不到，则往父级作用域查找，自由变量的查找
• 父级作用域：函数定义时所在的上下文
• 闭包两个场景，作为参数传入和函数返回值

5、实际开发中闭包的应用

• 闭包实际引用中主要用于封装变量，收敛权限

  function isFirstLoad() { var _list = [] return function(id){ if(_list.indexOf(id) >= 0){ return false; }else {             _list.push(id) return true } } } var firstload = isFirstLoad(); firstload(10); //true firstload(10); //false firstload(20); //true 

执行上下文

范围：一段

全局：变量定义、函数声明

函数：变量定义、函数声明、this、arguments、函数

• 函数声明：function fnName () {…};
• 函数表达式 var fnName = function () {…};
• 匿名函数：function () {};
• 匿名函数属于函数表达式

PS：注意“函数声明”和“函数表达式”的区别

• JS解析时会提升当前作用域的函数声明，而函数表达式必须等到JS引擎执行到时，才会解析函数表达式。
• 函数表达式后面可以加括号立即调用该函数，函数声明不可以

function fn(name) { //函数 开头默认创建this arguments     console.log(this)     console.log(arguments)          age = 20 //声明提前     console.log(name, age) var age          bar(100) function bar(num) {         console.log(num) } } 

• 变量定义会把声明提前(undefined)未赋值，函数声明会把整个函数提前，函数表达式只会把函数名提前

console.log(a)//undefined var a = 100 fn('zhangsan') //'zhangsan' 20 function fn(name) {     age = 20     console.log(name， age) var age } 

this

在全局环境中，this 永远指向 window。

• this 要在执行时才能确认值，定义时无法确认

  var a = {     name: 'A',     fn: function() {         console.log(this.name) } } a.fn() //this === 'a' a.fn.call({name: 'B'}) //this === {name: 'B'} var fn1 = a.fn fn1() //this === window 

• 作为构造函数执行

• 作为对象属性执行

• 作为普通函数执行 (this指向window)

• call apply bind

function Foo(name) { this.name = name } //由一个函数new出来的对象，this就代表即将new出来的这个对象 var f = new Foo('zhangsan') var obj = {     name: 'A'     printName: function() {   console.log(this.name)//构造函数中的this } } obj.printName() //对象中的this指向该对象 this === 'A' function fn() {     console.log(this) //this === window 普通函数中的this永远指向window。  } fn() //call apply bind function fn1(name , age) { alert(name)     console.log(this) } fn1.call({x:100}, 'zhangsan', 20) //常用 fn1.apply({x:100}, ['zhangsan', 20]) //bind 要用函数表达式 var fn2 = function (name, age) { alert(name) alert(age)     console.log(this) }.bind({y: 200}, 'lisi', 11); fn2('zhangsan', 20) 

作用域

• JS没有块级作用域，不要块中定义变量
• 只有函数和全局作用域

作用域链

自由变量不停的往父级作用域查找，就是所谓的作用域链

var a = 100 function F1() { var b = 200 //当前作用域没有定义的变量，即“自由变量” function F2() {         console.log(a) // a是自由变量      console.log(b) // b是自由变量         console.log(c) } F2() } 

闭包

有权访问另一个函数作用域中的变量的函数

• 函数作为返回值，在父作用域去找自由变量的值

• 函数作为参数传递

 function F1() { var a = 100 //返回一个函数 (函数作为返回值) return function() {           console.log(a) } } //f1的得到一个函数 var f1 = F1() var a = 200 F1()// 打印 100 function F2(fn) { //函数作为参数传递 var a = 200 fn() } F2(f1) // 打印 100 

异步单线程

面试题目

• 同步和异步的区别是什么？分别举一个同步和异步的例子
  • 同步会阻塞代码执行，而异步不会
  • alert是同步，setTimeout是异步
• 一个关于setTimeout的笔试题
• 前端使用异步的场景有哪些？
  • 定时任务：setTimeout setInverval
  • 网络请求：ajax 动态加载
  • 事件绑定

什么是异步（对比同步）

前端使用异步的场景

• 在可能发生等待的情况，等待过程中不能相当alert一样阻塞程序运行，因此在发生等待的时候需要异步。
• 定时任务：setTimeout，setInverval
• 网络请求：ajax请求，动态加载
• 事件绑定

console.log('start') //网络请求 $.get('./data1.json',function(data1) {     console.log(data1) }) //图片加载 var img= document.createElement('img') img.onload = function() {     console.log('loaded') } img.src = '/xxx.png' //事件绑定 document.getElementById('btn1').addEventListener('click',function() { alert('clicked') }) console.log('end') 

异步和单线程

其他知识

面试题

• 获取 2017-06-10格式的日期

  function formatDate(dt) { if(!dt) {         dt = new Date() } var year = dt.getFullYear() var month = dt.getMonth() var date = dt.getDate() if(month < 10){         month = '0' + month     } if(date < 10){         date = '0' + date     } return year + '-' + month + '-' + date } console.log(formatDate(new Date())) 

• 获取随机数，要求是长度一致的字符串格式

  var random = Math.random() random = random + '0000000000'; random = random.slice(0, 10); console.log(random) 

• 写一个能遍历对象和数组的通用 forEach 函数

  function forEach(obj, fn){ var key     if(obj instanceof Array){         obj.forEach(function(item, index) { fn(index, item) }) }else { if(obj.hasOwnProperty(key)){ for(key in obj) { fn(key, obj[key]) } } } } var arr = [1,2,3] forEach(arr, function(index, item) {     console.log(index, item) }) var obj = {x:100, y:200} forEach(obj, function(key, val) {     console.log(key, val) }) 

日期

Date.now() //获取当前毫秒数 var dt = new Date() dt.getTime() //获取毫秒数 dt.getFullYear() //年 dt.getMonth() //月 (0 - 11) 要加上 +1 dt.getDate() //日 (0 - 31) dt.getHours() //小时 (0 - 23) dt.getMinutes() //分钟 (0 - 59) dt.getSeconds() //秒 (0 - 59) 

Math

Math.random() //获取随机数 在链接后加随机数，可以清除缓存 

数组API

• forEach 遍历所有元素
• every 判断所有元素是否都符合条件
• some 判断是否有至少一个元素符合条件
• sort 排序
• map 对元素重新组装，生成新数组
• filter 过滤符合条件的元素

var arr = [1,2,3] arr.forEach(function(item, index) { //遍历数组的所有元素     console.log(index, item) }); var result1 = arr.every(function(item, index) { //用来判断所有的数组元素，都满足一个条件 if(item < 4){ return true } }) console.log(result1) var result2 = arr.some(function(item, index) { //用来判断所有的数组元素，只要有一个满足条件即可 if(item < 2) { return true } }) console.log(result2) var arr1 = [1,4,2,3,5] var arr2 = arr1.sort(function(a, b) { // 从小到大排序 //return a - b //从大到小排序 return b - a }) console.log(arr2) var arr3 = [1,2,3,4] var arr4 = arr.map(function(item, index) { //将元素重新组装，并返回 return '<b>' + item +'</b>' }) console.log(arr4) var arr5 = arr.filter(function (item, index) { //通过某一个条件过滤数组 if(item >= 2) { return true } }) console.log(arr5) 

对象API

• for(key in obj) {}

var obj = {     x: 100,     y: 200,     z: 300 } var key for(key in obj){ //注意这里的 hasOwnProperty ,过滤掉原型链中的属性 if(obj.hasOwnProperty(key)) {         console.log(key, obj[key]) } } 

JS-WEB-AIP

常说的JS（浏览器执行的JS）包含两部分

• JS基础知识：ECMA 262标准
• JS-Web-API：W3C 标准，
  • 没有规定任何JS基础相关的东西（变量类型、原型、作用域和异步。。。）
  • 只管定义用于浏览器中JS操作页面的API和全局变量

DOM操作

• DOM是哪种基本的数据结构

  • 树

• DOM操作的常用API有哪些

  • 获取DOM节点，以及节点property和Attribute
  • 获取父节点，获取子节点
  • 新增节点，删除节点

• DOM节点的Attribute 和property有和区别

  • property是DOM中的属性，是Javascript里的对象；
  • Attribute是HTML上的特性，它的值必须是字符串或者null
  • 自定义的Property与Attribute不同步,不相等
  • 非自定义的DOM property与 attributes 是有条件同步的
  • 在IE<9中,浏览器会把所有的property和attribute强制映射

  var elem = document.getElementById( 'id' ); //Attribute 添加，删除，获取 elem.getAttribute('gameid') elem.getAttribute('gameid')  elem.removeAttribute('gameid') //property 添加，删除，获取 elem.gameid = 880; // 添加 console.log( elem.gameid ) // 获取 delete elem.gameid // 删除 

DOM的本质

Element节点

• 新增节点

  var div1 = document.getElementById('div1') //添加新节点 var p1 = document.createElement('p') p1.innerHTML = 'this is p1' div1.appendChild(p1) //添加新创建的元素 //移动已有节点 p2 = document.getElementById('p2') div1.appendChild('p2') 

• 获取父元素

  var div1 = document.getElementById('div1') var parent = div1.parentElement; var child = div1.childNodes div1.removeChild(child[0]) 

• 获取子元素

• 删除节点

获取DOM节点

var div1 = document.getElementById('div1')//元素 var divList = document.getElementsByTagName('div') //集合 console.log(divList.length) console.log(divList[0]) var containerList = document.getElementsByClassName('.container')//集合 var plist = document.querySelectorAll('p') //集合 

节点属性property

• style
• className
• nodeName
• nodeType

Attribute属性操作

• Element.attributes
• Element.getAttribute() 读取某个属性的值
• Element.getAttributeNames() 返回当前元素的所有属性名
• Element.setAttribute() 写入属性值
• Element.hasAttribute() 某个属性是否存在
• Element.hasAttributes() 当前元素是否有属性
• Element.removeAttribute() 删除属性

BOM

• 如何检测浏览器的类型
• 拆解url的各部分

navigator(浏览器)

• navigator.userAgent (简称ua)

screen

• screen.width
• screen.height

location

• location.href //地址
• location.protocol //协议
• location.host //域名
• location.pathname //路径
• location.search //查询字符串
• location.hash //哈希

history

• history.back() //返回
• history.forward() //前进

事件绑定

题目

• 编写一个通用的事件监听函数

var btn = document.getElementById('btn1') btn.addEventListener('click', function(event) {     console.log('clicked') }) function bindEvent(elem, type, fn) {     elem.addEventListener(type, fn) } var a = document.getElementById('link1') bindEvent(a , 'click', function(e) {     e.preventDefault()//阻止默认行为 alert('clicked') }) 

• 描述事件冒泡流程
• 对于一个无限下拉加载图片的页面，如何给每个图片绑定事件

DOM事件流

DOM事件流（event  flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。 dom标准事件流的触发的先后顺序为：先捕获再冒泡

• 事件捕获（event  capturing）：当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

//addEventListener最后一个参数，为true则代表使用事件捕获模式， //false则表示使用事件冒泡模式。即默认模式 window.addEventListener('click', function() {   console.log('4. You click window'); }, true); 

• **事件冒泡（dubbed  bubbling）：**与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，从目标元素直到根节点。
• 阻止事件冒泡 stopPropagation()

关于IE低版本的兼容性

• IE低版本使用attachEvent绑定事件，和W3C标准不一样
• IE低版本使用量已经非常少，很多网站都早已不支持
• 建议对IE低版本的兼容性：了解即可，无需深究
• 如果遇到对IE低版本要求苛刻的面试，果断放弃
• IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

通用事件绑定与解绑

代理

事件委托

JS开发环境

• IDE(写代码的效率)

版本管理GIT

JS模块化

打包工具

运行环境

页面渲染

性能优化

JS面试题

6、window.onload 和 DOMConetentLoaded 的区别？

考点：浏览器渲染过程

7、用JS创建10个标签， 点击的时候弹出来对应的序号？

考点：作用域

8、简述如何实现一个模块加载器， 实现类似require.js的基本功能？

考点：JS模块化

9、实现数组的随机排序？

考点：JS基础算法

HTTP

同源策略

同源策略可防止 JavaScript 发起跨域请求。源被定义为 URI、主机名和端口号的组合。此策略可防止页面上的恶意脚本通过该页面的文档对象模型，访问另一个网页上的敏感数据。

跨域

原因：浏览器同源策略导致了跨域

作用：隔离恶意文件的重要安全机制

解决：

1. jsonp，允许script加载第三方资源
2. 反向代理（nginx服务器配置Access-Control-Allow-Origin）
3. cors前后端协议头设置Access-Control-Allow-Origin
4. iframe嵌套通讯，postmessage，浏览器插件

jsonp原理详解