javascript知识回顾-白红宇

1.知识点

原型、原型链、作用域、闭包

DOM操作、Ajax、事件绑定

版本管理、模块化、打包工具

页面渲染、性能优化

2.列如

JS中使用typeof能得到的哪些类型？

何时使用===何时使用==？

window.onload和DOMContentLoaded的区别？

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

简述如何实现一个模块加载器，实现类似require.js的基本功能？实现数组的随机排序？

3.变量类型和计算

1.变量类型(1).值类型（null、undefined、boolean、number、string,symbol）var a=100; var b=a; a=200;console.log(b); //100(2).引用类型(对象、数组、函数)var a={age：20}；var b=a;b.age=21;console.log(b); // 21(3).typeof运算符详解typeof undefined //undefinedtypeof 'abc' // stringtypeof 123 //numbertypeof true // booleantypeof {} // objecttypeof [] // objecttypeof null // objecttypeof console.log // function2.变量计算-强制类型转换(1).字符串拼接var a=100+10; // 110var b=100+'10'; // '10010'(2).==运算符100 == '100'  // true0 == ''  // truenull == undefined // true(3).if语句1.var a=true;if(a){   //....}2.var b=100;if(b){    //...}3.var c= '';if(c){    //..}(4).逻辑运算console.log(10 && 0); // 0console.log('' || 'abc'); // 'abc'console.log(!window.abc); // true3.何时使用===和==if(obj.a == null){      //这里相当于obj.a === null || obj.a===undefined,简写形式      //这是jQuery源码中推荐的写法}4.JS中的内置函数ObjectArrayBooleanNumberStringFunctionDateRegExpError5.如何理解JSONJSON.stringify({a:10,b:20})JSON.parse('{"a":10,"b":20}')复制代码

4.原型和原型链

如何准确判断一个变量是数组类型？写一个原型链继承的例子？描述new一个对象的过程？ zepto(或其它框架)源码中如何使用原型链？构造函数构造函数-扩展原型规则和示例原型链 instanceof

1.构造函数function Foo(name,age){      this.name=name;      this.age=age;      this.class="class-1;      //return this //默认有这一行}var f = new Foo("小林"，20)；//创建多个对象2.构造函数-扩展(1).var a={}其实是var a=new Object()的语法糖。(2).var a=[]其实是var a=new Array()的语法糖。(3).function Foo(){....}其实是var Foo=new Fuction(...)(4).使用instanceof判断一个函数是否是一个变量的构造函数。3.原型规则和示例(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属性，属性值也是一个普通的对象。console.log(fn.prototype)(4).所有的引用类型（数组、对象、函数 ）,__proto__属性值指向它的构造函数的"prototype"属性值。console.log(obj.__proto__===Object.prototype);(5).当试图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的__proto__（即它的构造函数的prototype）中寻找。//构造函数function Foo(name, age){    this.name=name;}Foo.prototype.alertName = function(){    alert(this.name);}//创建示例var f=new F('小林');f.printName=function(){    console.log(this.name);}//测试f.printName();f.alertName();f.toString();//要去f.__proto__.__proto__中查找。复制代码

循环对象自身的属性for (var item in f) {    if(f.hasOwnProperty(item)){        console.log(item);    }}复制代码

5.instanceof

1.f instanceof Foo的判断逻辑是：2.f的__proto__一层一层往上，能否对应到Foo.prototype。3.再试着判断f instanceof Object。复制代码

如何正确判断一个变量是数组类型

var arr = [];arr instanceof Array // truetypeof arr // Object, typeof是无法判断是否是数组的复制代码

写一个原型链继承的例子

// 动物function Aniaml () {    this.eat = function () {        console.log('animal eat')    }}// 狗function Dog () {    this.bark = function () {        console.log('dog bark')    }}Dog.prototype = new Animal()var hashiqi = new Dog()复制代码

描述new一个对象的过程

新生成了一个对象链接到原型绑定 this 返回新对象

function create() {    // 创建一个空的对象    let obj = new Object()    // 获得构造函数    let Con = [].shift.call(arguments)    // 链接到原型    obj.__proto__ = Con.prototype    // 绑定 this，执行构造函数    let result = Con.apply(obj, arguments)    // 确保 new 出来的是个对象    return typeof result === 'object' ? result : obj}复制代码

6.原型继承实例

1.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);          }          var div1 = new Elem('box');//        console.log(div1.html());//         div1.html('2222
');//         div1.on("click", function(){//         	   alert("111");//         })            div1.html('2222
').on("click", function(){           	   alert("this.text()");           })复制代码

######7.作用域和闭包

说一下对变量提升的理解说明this几种不同的使用场景创建10个标签，点击的时候弹出来对应的序号如何理解作用域实际开发中的闭包的应用执行上下文作用域作用域链闭包

1.执行上下文(1).范围:一段

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

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

实际开发中闭包的应用

// 闭包实际应用中主要用于封装变量，收检权限 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 复制代码

8.异步和单线程

同步和异步的区别是什么？分别举一个同步和异步的例子？一个关于setTimeout的笔试题前端使用异步的场景有哪些？什么是异步（对比同步）？异步和单线程？

1.何时需要异步(1).在可能发生等待的情况。(2).等待过程中不能像alert一样阻塞程序运行。(3).因此，所以的'等待的情况'都需要异步。2.异步的场景(1).定时任务：setTimeout,setInverval。(2).网络请求：ajax请求，动态加载。(3).事件绑定3.同步和异步的区别是什么(1).同步会阻塞代码执行，而异步不会。(2).alert是同步，setTimeout是异步。4.异步和单线程(1).执行第一行，打印100；(2).执行setTimeout后，传入setTimeout的函数会被暂存起来，不会立即执行（单线程的特点，不能同时干两件事）(3).执行最后一行，打印300(4).待所有程序执行完，处于空闲状态时，会立马看有没有暂存起来的要执行。(2).发现暂存起来的setTimeout中的函数无需等待时间，就立即过来执行。复制代码

9.日期、Math、数组api、对象api

题目

获取2017-06-10格式的日期获取随机数，要求是长度一直的字符串格式写一个能遍历对象和数组的通用forEach函数

获取2017-06-10格式的日期:function formatDate(dt) {    if(!dt) {        dt = new Date();    }    let year = dt.getFullYear();    let month = dt.getMonth()-1;    let data = dt.getDate();    month = month < 10 ? ('0' + month) : '';    data = data < 10 ? ('0' + data) : '';    return year + '-' + month + '-' + data; //强制类型转换}let dt = new Date();let formtDate = formatDate(dt);console.log(formatDate())复制代码

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

let rand = Math.random();let rand1 = rand + '0000000000';let rand2 = rand1.slice(0, 10);console.log(rand2);复制代码

1.日期

2.Math (1).获取随机数Math.random()。 3.数组api

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

4.对象api

总结：

######8.JS-WEB-API

1.DOM操作(1).获取DOM节点。(2). ()()()复制代码

######9.BOM

######10.事件

######10.Ajax交互

1.状态码

######11.存储

######12.开发工具

######13.模块化

14.前端运行环境

加载资源的形式

输入url（或跳转页面）加载html 加载html中的静态资源再加载JavaScript

加载一个资源的过程

浏览器根据DNS服务器得到域名的IP地址

向这个IP的机器发送http请求

服务器收到、处理并返回http请求

浏览器得到返回内容

浏览器渲染页面的过程

根据HTML结果生成DOM Tree

根据CSS生成CSSDOM

将DOM和CSSDOM整合形成RenderTree

根据RenderTree开始渲染和展示

遇到时javascript，会执行并阻塞渲染

window.onload 和 DOMContentLoader区别

window.onload ： 页面的全部资源加载完才会执行，包括图片、视频等DOMContentLoader ： DOM渲染完即可执行，此时图片、视频还没有加载完复制代码

15.性能优化

1.加载资源优化

静态资源的压缩合并

静态资源缓存

使用CDN让资源加载更快

使用SSR后端渲染，数据直接输入到HTML中

2.渲染优化

css放前面，js放后面

烂加载（图片懒加载、下拉加载更多）

减少DOM查询，对DOM查询做缓存

减少DOM操作，多个操作尽量合并在一起执行

事件节流

尽早执行操作（如DOMContentLoaded）

16.安全性

1.XSS跨站请求攻击

2.XSRF跨站点请求伪造