- 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跨站请求伪造
-----你已登录一个购物网站,正在浏览器商品