JavaScript基础
@ 姜波 | 星期四,七月 23 日,2020 年 | 3 分钟阅读 | 更新于 星期四,七月 23 日,2020 年

变量类型和计算

值类型vs引用类型

Image text

Image text

typeof运算符

  • 识别所有值类型
  • 识别函数
  • 判断是否是引用类型(不可再细分)
// 判断所有值类型
let a;                 typeof a // 'undefined'
const str = 'abc';     typeof str // 'string'
const n = 100;         typeof n // 'number'
const b = true;        typeof b // 'boolean'
const s = Symbol('s'); typeof s // 'symbol'

// 能判断函数
typeof console.log   // 'function'
typeof function (){} // 'function'

// 能识别引用类型(不能再继续识别)
typeof null          // 'object'
typeof ['a','b']     // 'object'
typeof {x: 100}      // 'object'

深拷贝

function deepClone(obj = {}){
  if(typeof obj !== 'object' || obj == null){
    // obj是null,或者不是对象和数组,直接返回
    return obj
  }
  // 初始化返回结果
  let result
  if(obj instanceof Array){
    result = []
  }else{
    result = {}
  }
  
  for(let key in obj){
    // 保证key不是原型的属性
    if(obj.hasOwnProperty(key)){
      // 递归调用
      result[key] = deepClone(obj[key])
    }
  }
  
  // 返回结果
  return result
}

类型转换

  • 字符串拼接
  • ==
// 除了 == null 之外,其他都一律用 ===

const obj = { x: 100}
if(obj.a == null){}
// 相当于
// if(obj.a === null || obj.a === undefined){}
  • if语句和逻辑运算
    • truly变量:!!a === true的变量
    • falsely变量:!!a === false的变量
// 以下是falsely变量,除此之外都是truly变量
!!0 === false
!!NaN === false
!!'' === false
!!null === false
!!undefined === false
!!false === false

原型和原型链

class

  • constructor
  • 属性
  • 方法
class Student {
  constructor(name, number){
    this.name = name
    this.number = number
  }
  sayHi(){}
}

继承

  • Extends
  • Super
  • 扩展或重写方法
// 父类
class People {
  constructor(name){
    this.name = name
  }
  eat(){}
}
// 子类
class Student extend People {
  constructor(name,number){
    super(name)
    this.number = number
  }
  sayHi(){}
}

类型判断instanceof

[] instanceof Array // true
{} instanceof Object // true

原型和原型链

  • 每个class都有显示原型prototype

  • 每个实例都有隐式原型__proto__

  • 实例的__proto__指向对应class的prototype

Image text

作用域和闭包

作用域

  • 全局作用域
  • 函数作用域
  • 块级作用域(ES6新增)

自由变量

  • 一个变量在当前作用域没有定义,但被使用了
  • 向上级作用域,一层一层依次寻找,直至找到为止
  • 如果到全局作用域都没找到,则报错xx is not defined

闭包

// 函数作为返回值
function create() {
  const a = 100
  return function() {
    console.log(a)
  }
}
const fn = create()
const a = 200
fn() // 100

// 函数作为参数被传递
function print(fn) {
  const a = 200
  fn()
}
const a = 100
function fn() {
  console.log(a)
}
print(fn) // 100

// 所有自由变量查找,是在函数定义的地方,向上级作用域查找,不是在执行的地方

this

  • 作为普通函数
  • 使用call、apply、bind
  • 作为对象方法被调用
  • 在class方法中调用
  • 箭头函数
function fn1() {
  console.log(this)
}
fn1() // window

fn1.call({x: 100}) // {x: 100}

const fn2 = fn1.bind({x: 200})
fn2() // {x: 200}

const zhangsan = {
  name: '张三',
  sayHi() {
    //this 即当前对象
    console.log(this)
  },
  wait() {
    setTimeout(function() {
      //this === window
      console.log(this)
    })
  }
}

const zhangsan = {
  name: '张三',
  sayHi() {
    //this 即当前对象
    console.log(this)
  },
  waitAgain() {
    setTimeout(() => {
      //this 即当前对象
      console.log(this)
    })
  }
}

class People {
  constructor(name) {
    this.name = name
    this.age = 20
  }
  sayHi() {
    console.log(this)
  }
}
const zhangsan = new People('张三')
zhangsan.sayHi() // zhangsan对象	

手写bind函数

// 模拟bind
Function.prototype.bind1 = function() {
  // 将参数拆解为数组
  const args = Array.prototype.slice.call(arguments)
  // 获取this(数组第一项)
  const t = args.shift()
  const self = this
  // 返回一个函数
  return function() {
    return self.apply(t,args)
  }
}

闭包的应用

// 闭包隐藏数据,只提供API
function createCache() {
  const data = {} // 闭包中的数据,被隐藏,不被外界访问
  return {
    set: function(key, val) {
      data[key] = val
    },
    get: function(key) {
      return data[key]
    }
  }
}

异步和单线程

单线程和异步

  • JS是单线程语言,只能同时做一件事
  • 浏览器和nodejs已支持JS启动进程,如Web Worker
  • JS和DOM渲染共用同一个线程,因为JS可修改DOM结构
  • 遇到等待(网络请求,定时任务)不能卡住
  • 需要异步
  • 回调callback函数形式

应用场景

  • 网络请求,如ajax图片加载
  • 定时任务,如setTimeout

callback hell和Promise

$.get(url1, (data1) => {
  $.get(url2, (data2) => {
  	$.get(url3, (data3) => {
  
		})
	})
})

function getData(url) {
  return new Promise((resolve, reject) => {
    $.ajax({
      url,
      success(data){
        reslove(data)
      },
      error(err){
        reject(err)
      }
    })
  })
}
js
保存为图片

公众号

Image text

QQ

Image text

微信

Image text

微信打赏

Image text

社交链接