- csdn笔记供参考
- markdown 新手指南
课程讲解思路：先列题目引发思考，再详细讲解知识点，最后解答
[TOC]
前言
关于面试
前端水平的三个层次
- 基层工程师-基础知识
- 高级工程师-项目经验
- 架构师- 解决方案
几个面试题
题目很多，做具有代表的题目，举一反三
- js 中使用 typeof 能得到哪些类型 （==js 变量类型==）
- 何时使用 === 何时使用 == ？ （==强制类型转换==）
- window.onload 和 DOMContentLoaded 的区别 （==浏览器渲染过程==）
- 用 js 连续创建 10 个 标签，点击的时候弹出来对应的序号 (==作用域==)
- 简述如何实现一个模块加载器，实现类似 require.js 的基本功能 （==js 模块化==）
- 实现数组的随机排序 （==JS 基础算法==）
思考
- 拿到面试题第一时间看到的是什么 （==考点==）
- 如何看待永远做不完的题海 （==以不变应万变==）
- 如何对待接下来遇到的面试题？ （==总结考点并扩展再反思题目==）
基础知识
js 基础三座大山
- 原型 原型链
- 作用域 闭包
- 异步 单线程
面试题
1. js 中使用 typeof 能得到哪些类型
2. 何时使用 === 何时使用 ==
if (obj.a == null){
// 这里相当于 obj.a === null || obj.a ===undefined ，因为 undefined == null 值为true
// 这是 JQuery 中推荐的写法， 其余情况全部用 === （避免代码风险有代码洁癖）
}
3. JS 中有哪些内置函数
4. JS 变量按照存储方式区分为哪些类型，并描述其特点
5. 如何理解 JSON
知识点
- 变量类型：值类型 和 引用类型（指针）
- 引用类型包括： 数组 函数 对象;引用类型公共空间，是指针
var a=100;
var b=a;
a=200;
console.log(b) //100
var a={age:20};
var b=a;
b.age=21;
console.log(a.age) //21
- typeof只能区分值类型的详细类型，对引用类型无能为力，但可以区分出函数来
typeof undefined;//undefined
typeof 'abc';//string
typeof 123;//number
typeof true;//boolean
typeof {};//object
typeof [];//object
typeof null;//object
typeof console.log//function
-
强制类型转换(值类型的计算)
- ①字符串拼接
- ②==运算符
- ③if语句
- ④逻辑运算 （布尔操作符 逻辑非、逻辑与、逻辑或）
- 逻辑非 ！ (结果总是 true/fasle )
- 如果操作数是一个对象，返回 false
- 逻辑与 &&
- ==如果第一个操作是对象则返回第二个操作数==
- 如果第二个操作数是对象，则只有在第一个操作数的求值结果为 true 的情况下才会返回该对象
- 如果两个操作数都是对象，则返回第二个操作数
- 如果第一个操作数是 null，则返回 null
- 如果第一个操作数是 NaN，则返回 NaN
- 如果第一个操作数是 undefined ，则返回 undefined。
- 逻辑与操作符属于断路操作，如果第一个操作符能够决定结果，那么就不会再对第二个操作数求值。
- ==逻辑或 ||==
- 如果第一个操作数是对象，则返回第一个操作数
- 如果两个操作数都是对象，则返回第一个操作数
- 如果第一个操作数的求值结果为 false ，则返回第二个操作数
- 如果两个操作数都是 NaN/null/undefined ，则返回 NaN/null/undefined
- 逻辑非 ！ (结果总是 true/fasle )
上面四种操作可能导致强制类型转换
var a=100+10;//110
var b=100+'10'//'10010'
100 =='100'//true
0==''//true
null==undefined//true
var a=true;
if(a){
//...
}
var b=100;
if(b){
//...
}
var c='';
if(c){
//...
}
console.log(10&&0)//0
console.log(''||'abc')//abc
console.log(!window.abc)//true
var a=100;
console.log(!!a)//true
面试题解答 1
面试题1、JS中使用typeof能得到的哪些类型？
typeof undefined;//undefined
typeof 'abc';//string
typeof 123;//number
typeof true;//boolean
typeof {};//object
typeof [];//object
typeof null;//object
typeof console.log//function
typeof只能区分值类型的详细类型，对引用类型无能为力，但可以区分出函数来
面试题2、何时使用===何时使用==？
if(obj.a==null){
//这里相当于obj.a===null||obj.a===undefined,简写形式
//这是jquery源码中推荐的方法，其他的都用===
}
面试题3、JS中有哪些*内置函数*--数据封装类对象？
//JS作为单纯语言的内置函数
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
//Global浏览器内置对象
//Math是对象，不是函数
面试题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对像而已，和MATH一样
JSON.stringfy({a:10,b:20})
JSON.parse('{"a":10,"b":20}')
//注意:JS中为false的为 0 NaN null undefined '' false
原型和原型链
*构造函数*
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)//创建多个对象
//new对象时函数中的this初始化为空对象，参数赋值完后返回this给f和f1
*构造函数--扩展*
var a={}其实是var a=new Object()的语法糖
var a=[]其实是var a=new Array()的语法糖
function Foo(){...}其实是var Foo=new Function(...)
//使用instanceof判断一个函数是否是一个变量的构造函数
//对象，数组，函数的构造函数其实是Object,Array,Function
//判断一个变量是否是'数组' 变量 instanceof Array
原型规则(是学习原型链的基础)
- 所有的引用类型(数组，对象，函数)，都具有对像特性，即可自由扩展属性（除了null）
- 所有的引用类型（数组，函数，对象），都有一个 _proto_ 属性，属性值是一个普通对象
- 所有的函数，都有一个 prototype 属性，属性值也是一个普通的对象
- 函数的 prototype 称显式原型，引用类型的 _proto 成为隐式原型
- 所有的引用类型（数组，函数，对象），其 _proto_ 属性值都指向其构造函数的 prototype 属性值
- 当试图获取一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的_prot__(即它的构造函数的prototype)
image
var obj={};obj.a=100;
var arr=[];arr.a=100;
function fn(){}
fn.a=100;
console.log(obj.__proto__);
console.log(arr.__proto__);
console.log(fn.__proto__);
console.log(fn.prototype)
console.log(obj.__proto__===Object.prototype)
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.printName();
f.alertName();
//循环对象自身的属性
var item;
for(item in f){
//高级浏览器已经在for in中屏蔽了来自原型的属性
//但是这里建议大家还是加上这个判断，保证程序的健壮性
if(f.hasOwnProperty(item))
console.log(item);
}
*原型链*
f.toString()//要去f.__proto__.__proto__中去找
*instanseof*
**注意:** //用于判断引用类型属于哪个构造函数的方法
f instanceof Foo的判断逻辑是:
f的__proto__一层一层向上找，能否对应到Foo.prototype
f instanceof Object也是正确的
面试题解答 2
面试题1、如何准确判断一个变量时数组类型？
var arr=[]
arr instanceof Array //true
typeof arr//object,typeof是无法判断是否是数组的
面试题2、写一个原型链继承的例子
①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()
②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 elem=new Elem("div1");
elem.html("hello world
").on("click",function(){alert("clicked")}).html("javascript
");
面试题3、描述new一个对象的过程
①创建一个新对象
②this指向这个新对象
③执行代码，即对this赋值
④返回this
面试题4、zepto(或其他框架)源码中如何使用原型链
①阅读源码是高效提高技能的方式
②但不能“埋头苦钻”有技巧在其中
③慕课网搜索“zepto设计和源码分析”
执行上下文
js 是解释型语言不是编译型语言，所以有些错误在编写程序时不会报错，什么时候执行什么时候报错
- 范围：一段