前端JavaScript面试技巧全套

---

一、JS基础知识

1、变量类型和计算

• 面试题

1、js中使用typeof能得到哪些数据类型
2、何时使用===，何时使用==
3、js中有哪些内置函数
4、js变量安存储方式分为哪些类型，并描述其特点
5、如何理解json

• 值类型
  1、值类型（基本类型）：字符串（string）、数值（number）、布尔值（boolean）、undefined、null （这5种基本数据类型是按值访问的，因为可以操作保存在变量中的实际的值）(ECMAScript 2016新增了一种基本数据类型：symbol）
  2、值类型占用空间固定，保存在栈中
  3、保存与复制的是值本身

var a = 100
var b = a
a = 200
console.log(b) //100

• 引用类型
  1、引用类型有对象（Object）、数组（Array）、函数（Function）、null(空指针)
  2、占用空间不固定，保存在堆中
  3、保存与复制的是指向对象的一个指针
  4、使用new()方法构造出的对象是引用型

var a = {age:100}
var b = a
b.age = 200
console.log(a.age) //200

• typeof运算符
  1、typeof可以准确判断出值类型是哪一种
  2、typeof一共可以返回六种数据类型，其中，对象、数组、null都是返回object

typeof undefined   //undefined
typeof 'abc'       //string
typeof 123		   //number
typeof true 	   //boolean
typeof {}          //object
typeof []          //object
typeof null        //object
typeof console.log //funtion

• 何时使用===，何时使用==
  1、在判断一个对象属性是否等于undefined或者等于null的时候使用==，其他情况一律使用===

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

• js中的内置函数–数据封装类对象

Object
Array
Boolean
Number
String
Function
Date
RegExp
Error

-理解 JSON

//JSON 只不过是一个js对象而已
//JSON 有两个常用的api
JSON.stringify({a:10,b:20}) //把对象转为字符串
JSON.parse('{"a":10,"b":20}')//把字符串转为对象

2、原型和原型链

• 面试题

1、如何准确判断一个变量是数组类型
2、写出一个原型链继承的例子
3、描述new一个对象的过程
4、zepto（或其他框架）源码中如何使用原型链

• 构造函数
  1、构造函数必须是大写字母开头
  2、当new这个构造函数开始执行的时候，传入构造函数的this变成空对象，最后由构造函数return出来

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('zhangsan',20) //构造函数可以创建多个对象

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

//判断一个变量舒服为数组
var a = []
console.log(a instanceof Array) //true

• 原型规则

1、所有引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（除“null”外）
2、所有引用类型（数组、对象、函数），都有一个__proto__（隐式原型）属性，属性值是一个普通的对象
3、所有的函数，都有一个prototype（显示原型）属性，属性值也是一个普通的对象
4、所有的引用类型（数组、对象、函数），__proto__属性值指向它的构造函数的“prototype”属性值
5、当试图得到一个引用类型的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找

//数组、对象、函数都可自由扩展属性
var obj = {};obj.a = 100;
var arr = [];arr.a = 100;
function fn(){}
fn.a = 100;
//数组、对象、函数都有__proto__(隐式原型)属性
console.log(obj.__proto__)
console.log(arr.__proto__)
console.log(fn.__proto__)
//函数有prototype(显式原型)属性
console.log(fn.prototype)
//引用类型的隐式原型的值指向它构造函数显式原型指向的值
console.log(obj.__proto__===Object.prototype)//true

//构造函数
function Foo(name,age){
	this.name = name
	this.age = age
}
Foo.prototype.alertName = function (){
	alert(this.name)
}
var f = new Foo('zhangsan')
f.printName = function(){
	console.log(this.name)
}
f.printName() //zhangsan
f.alertName () //zhangsan

关于上面代码的this指向，当通过对象属性的方式去执行函数的时候，无论改函数是自身的属性还是原型的属性，this永远指向该对象本身，也就是f

• 循环对象自身属性

var item
for(item in f){
	//高级浏览器已经在for in 中屏蔽来自原型的属性
	//但是还是建议加上这个判断，保证程序健壮性
	if(f.hasOwnProperty(item){
		console.log(item)//打印出来的都是f自身属性
	}
}

• 原型链

//构造函数
function Foo(name,age){
	this.name = name
	this.age = age
}
Foo.prototype.alertName = function (){
	alert(this.name)
}
var f = new Foo('zhangsan')
f.printName = function(){
	console.log(this.name)
}
f.toString()//要去f.__proto__.proto__中去找

f的隐式原型是Foo的显式原型，Foo的显式原型没有toString()，但是Foo的显式原型是一个对象，所以又去Foo的显式原型的隐式原型去找，也就是Object的显式原型，就找到了toString()

• instanceof
  1、用于判断引用类型属于哪个构造函数的方法

//构造函数
function Foo(name,age){
	this.name = name
	this.age = age
}
var f = new Foo('zhangsan')
console.log(f instanceof Foo) //true
console.log(f instanceof Object) //true
//f instanceof Foo的判断逻辑：
//f的__proto__一层层往上，能否对应到Foo的prototype

• 原型链继承基础例子

//动物
function Animal(){
	this.eat = function(){
		console.log('animal eat')
	}
}
//狗
function Dog(){
	this.bark = function(){
		console.log('dog bark')
	}
}
Dog.prototype = new Animal()
//哈士奇
var hashiqi = new Dog()
console.log(hashiqi.bark())//dog bark
console.log(hashiqi.eat())//animal eat

• 原型链继承入门例子（封装一个DOM查询的例子）

//构造函数
function Elem(id){
	this.elem = document.getElementById(id)
}
Elem.prototype.html(val){
	var elem = this.elem
	if(val){
		elem.innerHTML = val
		retrun this //链式操作(默认返回)
	}else{
		retrun elem.innerHTML
	}
}
Elem.prototype.on(type,fn){
	var elem = this.elem
	elem.addEventListener(type,fn)
}
var div1 = new Elem('div')
div1.html('<p>hello</p>').on('click',function(){
	alert('clicked)
})