Day2：JS的三座大山：原型异步作用域

温习CSS

选择器分类

image.png

选择权权重

ID选择器 +100
类 属性 伪类 +10
元素 伪元素 +1
其他选择器 +0

字体

字体的fallback机制

字体族不加引号

行高

行高由line-box决定，line-box由inline-box组成，inline-box的高度决定行高

背景

灵活运用CSS可以实现很多有意思的图形

雪碧图的作用：优化页面，减少HTTP请求数

base64和性能优化：节省HTTP连接数，一般只用作少量小图标

边框

边框的属性：线性、大小、颜色

边框之间的衔接是用斜的方式，可以做成三角形

滚动

auto scroll

文字折行

overflow-wrap, word-break, white-space

装饰器属性及其他

font-weight, itatic, text-decoration, cursor

CSS HACK

只在一部分浏览器上生效的手法，叫做CSS HACK

最近几年的前端中，这一块用的越来越少了

面试真题

CSS面试真题

1. CSS样式（选择器）的优先级

• 计算权重确定
• ！import
• 内联样式
• 后写的优先级高

2. 雪碧图的作用

• 减少HTTP请求数，提高加载性能
• 有一些情况下可以减少图片大小

3. 自定义字体的使用场景

• 宣传/品牌/banner等固定文案
• 字体图标

4. base64的使用

• 用于减少HTTP请求
• 适用于小图片
• base64的体积约为原图4/3

5. 伪类和伪元素的区别

• 伪类表状态
• 伪元素是真的有元素
• 前者单冒号，后者双冒号

6. 如何美化checkbox

• label[for]和id
• 隐藏原生input
• :checked + label，切换样式

原型和原型链

构造函数

原型规则

原型规则是学习原型链的基础

• 所有的引用类型（数组、对象、函数），都具有对象特性，即可自由扩展属性（null除外）
• 所有的引用类型（数组、对象、函数），都有一个proto属性，属性值是一个普通的对象
• 所有的函数，都有一个prototype属性，属性值也是一个普通的对象
• 所有的引用类型（数组、对象、函数），proto属性值指向它的构造函数的“prototype”的属性值
• 当视图得到一个对象的某个属性时，如果这个对象本身没有这个属性，那么会去它的proto（即它的构造函数的prototype）中寻找

[].__proto__ == Array.prototype
true
{}.__proto__ == Object.prototype
true
fn.__proto__ == Function.prototype
true

image.png

作用域和闭包

this

this要在执行时才能确认值，定义时无法确认

• 作为构造函数执行
• 作为对象属性执行
• 作为普通函数执行
• call apply bind

.bind必须是函数表达式的方式，不能是函数声明的方式

作用域

当前作用域没有定义的变量，叫做自由变量

一个自由变量，一直不断的往它的父级作用域去找，形成了一个链式结构

闭包

一个函数的作用域看在它定义时候的作用域，而不是执行时候的作用域

function F1() {
  var a = 100
  // 返回一个函数（函数作为返回值）
  return function () {
    console.log(a)
  }
}
// f1 得到一个函数
var f1 = F1()
var a = 200
f1()

闭包的使用场景

• 函数作为返回值
• 函数作为参数传递

function F1() {
  var a = 100
  return function () {
    console.log(a) // 自由变量，父作用域寻找
  }
}
var f1 = F1()
function F2(fn) {
  var a = 200
  fn()
}
F2(f1)

真题

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

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)
}

自执行函数，就是不用调用，只要定义完成，立即执行的函数

利用了闭包，保存了状态，调用时获取函数作用域的变量，而不是再外面一层

2. 如何理解作用域

• 自由变量
• 作用域链，即自由变量的查找
• 闭包的两个场景

异步和单线程

何时需要异步

• 定时任务：setTimeout, setInterval
• 网络请求：ajax请求，动态<img>加载
• 事件绑定

js是单线程语言，同时只能干一件事

其他知识

Date.now()

Math.random()

数组API

• forEach, every, some, sort, map, filter

对象API

今日感想

• 整理的还是有过于凌乱了，下次可以对重点知识点进行整理，不要面面俱到，区分笔记和总结
• 部分核心概念还是要自己多去钻研钻研
• 抓紧进度