javascript知识回顾

陈林007
226 阅读9分钟
1.知识点
  • 原型、原型链、作用域、闭包
  • DOM操作、Ajax、事件绑定
  • 版本管理、模块化、打包工具
  • 页面渲染、性能优化
2.列如
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 //undefined
typeof 'abc' // string
typeof 123 //number
typeof true // boolean
typeof {} // object
typeof [] // object
typeof null // object
typeof console.log // function
2.变量计算-强制类型转换
(1).字符串拼接
var a=100+10; // 110
var b=100+'10'; // '10010'
(2).==运算符
100 == '100'  // true
0 == ''  // true
null == 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); // 0
console.log('' || 'abc'); // 'abc'
console.log(!window.abc); // true
3.何时使用===和==
if(obj.a == null){
      //这里相当于obj.a === null || obj.a===undefined,简写形式
      //这是jQuery源码中推荐的写法
}
4.JS中的内置函数
Object
Array
Boolean
Number
String
Function
Date
RegExp
Error
5.如何理解JSON
JSON.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__中查找。

6.png

循环对象自身的属性
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 // true
typeof 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('<p>2222</p>');
//         div1.on("click", function(){
//         	   alert("111");
//         })
            div1.html('<p>2222</p>').on("click", function(){
           	   alert("this.text()");
           })

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

 
1.执行上下文
(1).范围:一段<script>或者一个函数。
(2).全局：变量定义、函数声明。一段<script>。
(3).函数：变量定义、函数声明、this、argument、函数
(4).函数声明和函数表达式的区别。
console.log(a);  //undefined
var a = 100;

fn('zhangsan')  // 'zhangsan'   20
function fn(name) {
      age=20;
      console.log(name,age);
      var age;
}
2.this指向
(1).this要执行时才能确认值，定义时无法确认
(2).场景
1.作为构造函数执行
function Foo(name){
    this.name=name;
}
var f=new Foo("小林")

2.作为对象属性执行
var obj = {
      name:"A",
      printName: function(){
            console.log(this.name);
     }
}
obj.printName()

3.作为普通函数执行
function fn(){
      console.log(this)//window
}
fn()

4.call、Apple、bind
function fn1(name, age){
      alert(name);
      console.log(this)//window
}
fn1.call({x:100}, "zhangsan", 20);//{x:100}this指向
fn1.apple({x:100}, ["zhangsan", 20]);//{x:100}this指向
var fn2 = function(name, age){
      alert(name);
      console.log(this);
}.bind({y:200})
fn2('zhangsan', 20)


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;
fn1 // this===window
3.作用域
(1).没有块级作用域。
if(true){
     var name="zhangsan";
}
console.log(name);
(2).只有函数和全局作用域。
var a=100;
function fn(){
      var a=200;
      console.log('fn', a);
}
console.log('global', a);
fn();
(3).作用域链
var a=100;
function fn(){
    var b=200;
    console.log(a)//当前作用域没有定义的变量，即“自由变量”
    console.log(b)
}
4.闭包
(1).闭包的使用场景
1.函数作为返回值。
function f1(){
    var a=10;
    return function (){
         console.log(a)//自由变量，父作用域寻找
   }
}
var f =f1();
var a=2000;
f();// 10

2.函数作为函数传递。
function f1(){
    var a=10;
    return function (){
         console.log(a)//自由变量，父作用域寻找
   }
}
var f =f1();
function f2(fn){
    var a=200;
    fn();
}
f2(f1);
创建10个标签点击的时候弹出来对应的序号
var i;
for (i = 0; i<10; i++) {
    (function (i){
        var a = document.createElement('a');
        a.innerHTML = i + '<br>';
        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请求，动态<img>加载。
(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);

23.png

1.日期

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

19.png

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

4.对象api

20.png
总结：

24.png

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

25.png

26.png

1.DOM操作
(1).获取DOM节点。
(2). ()()()

27.png

28.png

29.png

30.png

31.png

32.png

33.png

34.png
######9.BOM

35.png

36.png

37.png

38.png
######10.事件

39.png

40.png

######10.Ajax交互

41.png

42.png

43.png
1.状态码

44.png

45.png

46.png

47.png

48.png

49.png

50.png

51.png

52.png

53.png

54.png

######11.存储

55.png

56.png

57.png

58.png
######12.开发工具

59.png

60.png
######13.模块化

61.png

62.png

63.png

64.png

65.png

66.png

67.png

68.png

69.png

14.前端运行环境
加载资源的形式
加载一个资源的过程
  • 浏览器根据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跨站点请求伪造

avatar
文章
阅读
粉丝