- Js中使用typeof能得到哪些类型？
考点：Js变量类型
- 何时使用？
考点：强制类型转换
- window.onload和DOMContentLoaded的区别
考点：浏览器渲染过程
- 用JS创建10个<a>标签，点击的时候弹出来对应的序号。
考点：作用域
- 简述如何实现一个模块加载器，实现类似require.js的基本功能？
考点：JS模块化
- 实现数组的随机排序
考点：JS基础算法
二． 变量类型和计算
- 值类型（基本数据类型）和引用类型
值类型又分为：数值型、字符型、布尔型----Byte, char,int,float,short,double,long,belean.
引用类型又分为：类、接口、数组。
值类型是把每一个值都存在变量的内存地址。
引用类型(包含的是一个指向对象的指针)通过指针指向对象的位置。引用类型：对象、数组、函数。
引用类型的特点：它可以无限制控制属性。
- 变量计算--（值类型计算）强制类型转换
- 字符串拼接
- ==运算符(一定要谨慎使用！)
100==’100’ //true
0==’’ //true
Null==undefined //true
- if语句
- 逻辑运算
Console.log(10 &&0) //0
Console.log(‘’ || ‘abc’) //’abc’
Console.log(!window.abc) //true
//判断一个变量会被当做true或false
var a=100;
Console.log(!!a) 添加两个叹号
- 引用类型计算----数组的遍历，排序。其实就是一种功能性的API计算，并不是变量本身的计算；
三. 解答
1.Js中使用typeof能得到哪些类型？
考点：Js变量类型
typeof undefined //undefined
typeof ‘abc’ //string
typeof 123 //number
typeof true //boolean
typeof { } //object
typeof [ ] //object
typeof null //object
typeof conselo.log //function
实际操作
2.何时使用？
考点：强制类型转换
If(obj.a==null){
//这里相当于obj.a===null || obj.a===undefined.
}jq推荐的简写方式
- 问题：JS中有哪些内置函数----数据封装类对象
Object
Array
Boolean
Number
String
Function
Date
Error
RegExp
- JS按存储方式区分变量类型--------值类型、引用类型
- 如何理解json---------json只不过是一个js对象,也是一种数据格式
- 原型和原型链
题目：1.如何准确判断一个变量是数组类型？
- 写一个原型链继承的例子
- 描述new一个对象的过程
- Zepto（或者其他框架）源码中如何使用原型链
知识点：
- 构造函数
var a={ } 其实是var a=new Object()的语法糖--对象函数
var a=[ ] 其实是var a=new Array()的语法糖---数组函数
function Foo(){...}其实是var Foo=new Function(...)
使用instanceof判断一个函数是否是一个变量的构造函数
判断一个变量是否为“数组”：变量instanceof Array
5条原型规则
-1 所有的引用类型（数组，对象，函数），都具有对象特性，即自由扩展属性（除了“null”以外）
var obj={};obj.a=100;----------对象
var arr=[];arr.a=100;---------数组
function fn() {}----------函数
fn.a=100;
- 2所有的引用类型（数组，对象，函数），都有一个_proto_（隐式原型）属性，属性值是一个普通的对象
console.log(obj._proto_);----------隐式原型
console.log(arr._proto_);
console.log(fn._proto_);
- 3 所有的函数，都有一个prototype（显式原型）属性，属性值也是一个普通的对象。
- 4 所有的引用类型（数组，对象，函数），_proto_属性值指向它的构造函数的”prototype”属性值
console.log(obj._proto_===Object.prototype)
- 5 当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的_proto_（即它的构造函数的prototype）中寻找。
Instanceof------用于判断引用类型属于哪个构造函数的方法。
f instanceof Foo的判断逻辑是：
- f 的_proto_一层一层往上，能否对应到Foo.prototype
- 再试着判断f instanceof Object
解题
- 如何准确判断一个变量是数组类型？
typeof是无法判断是否是数组的。
- 写一个原型链继承的例子
//先用对象字面量去构造一个有用的对象
(function(){
var myMammal = {
name : 'Herb the Mammal',
get_name : function(){
return this.name;
},
says : function(){
return this.saying || '';
}
}
//一旦有了一个想要的对象，我们就可以利用Object.create方法构造出更多的实例来
var myCat = Object.create(myMammal);
myCat.name = 'yzs';
myCat.saying = 'meow';
myCat.purr = function(n){
var i, s='';
for(i = 0;i < n; i += 1){
if (s){
s += '-';
}
s += 'r';
}
return s;
};
myCat.get_name = function(){
return this.says + '' + this.name + '' + this.says;
};
console.log('myCat=' +myCat.name);
console.log('myMammal=' +myMammal.name);
})();
//myCat的原型链就继承了myMammal所有属性。
- 描述new一个对象的过程
过程：
- 创建一个新对象
- this指向这个对象
- 执行代码，即对this赋值
- 返回this
1，简单版本：
function Foo(name,age){
this.name=name;
this.age=age;
this.class='class-1';
// return this;默认有这一行
}
var f=new Foo('zhangsan', 20)
//创建多个对象
- 分别通过构造函数与class类实现了一个简单的创建实例的过程。
// ES5构造函数
let Parent = function (name, age) {
this.name = name;
this.age = age;
};
Parent.prototype.sayName = function () {
console.log(this.name);
};
const child = new Parent('听风是风', 26);
child.sayName() //'听风是风'
//ES6 class类class Parent {
constructor(name, age) {
this.name = name;
this.age = age;
}
sayName() {
console.log(this.name);
}
};
const child = new Parent('echo', 26);
child.sayName() //echo
------------------------------------------------------------------
// ES5构造函数
let Parent = function (name, age) {
let that = this;
that.name = name;
that.age = age;
return that;
};
const child = new Parent('听风是风', '26');
为什么要这么写呢？我在前面说this的创建与返回是隐性的，但在工作中为了让构造过程更易可见与更易维护，所以才有了上述使用that代替this，同时手动返回that的做法；这也验证了隐性的这两步确实是存在的。它只描述了构造器属性是如何塞给实例，没说原型上的属性是如何给实例继承的。
4.Zepto（或者其他框架）源码中如何使用原型链
Zepto设计和源码分析
- 写一个封装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
eiem.addEventListener(type,fn)
}
var div1=new Elem('artical_real')
//console.log(div1.html())
div1.html('<p>hello imooc</p>')
div1.on('click',function(){
alert('cliked')
})
- 作用域和变量提升
题目：
说一下对变量提升的理解
说明this几种不同的使用场景
创建10个<a>标签，点击的时候弹出来对应的序号
如何理解作用域
实际开发中闭包的应用
知识点：执行上下文、this、作用域、作用域链、闭包
执行上下文：
- 范围：一段<script>或者一个函数
- 全局：变量定义、函数声明
- 函数：变量定义、函数声明、this、arguments
console.log(a)//undifined 拿a的声明，通过undefined来占位
var a=10
fn('dys')
function fn(name){
age=21
console.log(name,age)//’dys’ 21
var age
this----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() //this === window
fn1()
说明this几种不同的使用场景：
1，作为构造函数执行
2，作为对象属性执行
3，作为普通函数执行
4，call apply bind
代码：
1.作为构造函数执行
function Foo(){
this.name=name
}
var f=new Foo(‘dys’)
2，作为对象属性执行
var obj={
name:’A’,
printName:function(){
console.log(this.name)
}}
Obj.printName()
3，作为普通函数执行
function fn(){
console.log(this)
}
fn()
4，call apply bind
function fn1(name,age){//call(最常用)
alert(name)
console.log(this)
}
fn1.call({x:100},'dys',21)
function fn1(name,age){//apply
alert(name)
console.log(this)
}
fn1.apply({x:100},['dys',21])
var fn2=function(name,age){//bind
alert(name)
console.log(this)
}.bind({y:200})
fn2('ewy',21)
作用域
- 没有块级元素
- 函数和全局作用域
//无块级作用域
if(true){
var name='dys'
}
console.log(name)
//函数和全局作用域
var a=100
function fn(){
var a=200
console.log('fn',a)
}
console.log('global',a)
fn()
}
创建10个<a>标签，点击的时候弹出来对应的序号
如何理解作用域：
- 自由变量
- 作用域链，即自由变量的查找
- 闭包的两个场景---闭包实际应用中主要用于封装变量，收敛权限
- 同步异步
题目：1. 同步和异步的区别？分别举例子
区别：1.同步会阻塞代码执行，而异步不会
2.alert是同步，setTimeout是异步
function.log(100)
setTimeput(function(){
console.log(200)
},10000)
console.log(300)
--- 何时需要异步？
- 在可能发生等待的情况
- 等待过程中不能像alert一样阻塞程序运行
- 因此，所有的“等待的情况”都需要异步
2，一个关于setTimeout的笔试题
3，前端使用异步的场景有哪些
------1.定时任务：setTimeout,setTnverval
- 网络请求：ajax请求，动态<img>加载
- 事件绑定
一． 其他知识
- 获取2019-08-01格式的日期
- 获取随机数，要求是长度一致的字符串格式
- 写一个能遍历对象和数组的通用forEach函数
日期
Math
数组API
forEach 遍历所有元素
every 判断所有元素是否都复合条件
some判断是否有至少一个元素复合条件
Sort 排序
map 对元素重新组装，生成新数组
filter 过滤符合条件的元素
对象API
二． 性能优化
- 多使用内存，缓存或者其他方法
- 减少cpu计算，减少网络，减少i/o输出
从哪入手？
-------加载页面和静态资源优化
-静态资源的压缩合并（几个js文件合并成一个js文件）
-静态资源缓存（通过连接名称控制缓存、只有内容改变的时候，链接名称才会改变）<script src=”abc_1.js”></script>
-使用CDN让资源加载更快(通过引用网络下载的cdn)
（因为CDN是一个不同区域的网络优化，比如：我在北京，我想访问地址的时候，同样一个地址，CDN会给我转到最近的机房）
-使用SSR(服务端渲染)后端渲染，数据直接输出到HTML中
--------------页面渲染（优化）
-css放前面，js放后面
-懒加载
-减少DOM查询，对DOM查询做缓存
-减少dom操作，多个操作尽量合并在一起
-事件节流
-尽早执行操作
三． 安全性
前端的安全问题有哪些？
XSS跨站请求攻击
------再新浪博客写一篇文章，同时偷偷插入一段<script>
-------攻击代码中，获取cookie，发送自己的服务器
--------发布博客，有人查看博客内容
--------会把查看者的cookie发送到攻击者的服务器
预防：
前端替换关键字，例如：替换 < 为 < ,>为 >
后端替换
XSRF跨站请求伪造
-----你已登录一个购物网站，正在浏览器商品