JSON.parse(JSON.stringify({
  [Symbol('a')]: 'abc',
  b: function() {},
  c: undefined,
  d: Infinity,
  e: NaN,
}))
// 返回 {d: null, e: null}

function deepCopy(source) {
  if (Array.isArray(source)) {
    const target = []
    for (const [index, value] of source.entries()) {
      target[index] = deepCopy(value)
    }
    return target

    // 简化 => return source.map(elem => deepCopy(elem))
  } else if (typeof source === 'object' && source !== null) {
    const target = {}
    for (const [key, value] of Object.entries(source)) {
      target[key] = deepCopy(value)
    }
    return target

    // 简化 =>  return Object.fromEntries(Object.entries(source).map(([key, val]) => [key, deepCopy(val)]))
  } else {
    // 基础类型无需拷贝
    return source
  }
}

let hash = new WeakMap()
if (hash.has(source)) {
  return hash.get(source)
}

hash.set(source, target)

// 拷贝 Function
target = new Function(`return ${source.toString()}`)()
// 拷贝 Date
target = new Date(source.getTime())

// 拷贝 RegExp
target = new RegExp(source)

// 节流
function throttle(delay, func) {
  let flag = true
  return function() {
    const context = this
    const arg = arguments
    if (flag) {
      flag = false
      setTimeout(() => {
        flag = true
        func.apply(context, arg)
      }, delay)
    }
  }
}

// 防抖
function debounce(delay, func) {
  let timer = null
  return function() {
    const context = this
    const args = arguments

    clearTimeout(timer)
    timer = setTimeout(function() {
      func.apply(context, args)
    }, delay)
  }
}

// 获取标签的属性
box.getAttribute(属性名)

// 设置标签的属性
box.setAttribute(属性名, 属性值)

// 移除标签的属性
box.removeAttribute(属性名)

// <div a="1" id="box"></div>

// 1. 直接给标签里只能添加固有的属性 title 等 标签+对象里都有显示

// 2. 给标签添加自定义属性--标签上显示
console.log(box.a) // undefined => 对象中不显示
console.log(box.getAttribute('a')) // 1 =>

// 3. 给对象添加自定义属性 -- 标签中不显示
box.b = 2
console.log(box.b) // 2 => 对象中显示
console.log(box.getAttribute('b')) // null

// 4. Attribute方法
box.setAttribute('c', 3) // 标签中显示
console.dir(box)
console.log(box.c) // undefined =>对象中不显示
console.log(box.getAttribute('c')) // 3

console.log(box.attributes) // {0: a, 1: id, 2: c, a: a, id: id, c: c, length: 3}
console.log(box.attributes.c) // c='3'

var div = document.getElementById('div')
// 获取内容
// 获取标签内容的时候，只会获取文本，标签扔掉了
console.log(div.innerText) // 哈哈
// 获取标签内容的时候，不管标签还是文本，都能获取到
console.log(div.innerHTML) // <h1>哈哈</h1>

// 设置内容
// 设置标签内容的时候，覆盖原来内容，对标签进行转义
div.innerText = '<h1>嘿嘿</h1>'
// 设置内容的时候，覆盖原来内容，标签也能生效，浏览器能解析这个标签
div.innerHTML = '<h1>嘿嘿</h1>'

function getInnerText(element) {
  if (typeof element.innerText === 'string') {
    return element.innerText
  } else {
    return element.textContent
  }
}

var div = document.querySelector('div')
// 获取样式
console.log(div.style)
console.log(div.style.color) // red

// 设置样式
div.style.width = '200px'
div.style.height = '200px'
div.style.fontSize = '100px'
div.className = 'box'

var bd = document.querySelector('body')
console.log(bd) // 通过 querySelector 获取 body 元素
console.log(document.body) // 直接获取 body 元素

document.documentElement // 可以获取 html 元素
document.head // 直接获取 head 元素
document.title // 获取的是 title 中的文本

var newNode = div.cloneNode(true)
console.log(newNode)

window.onload = function() {
  document.write('呵呵')
}

div.innerHTML = '<h1>哈哈</h1>'

1. 使用 children 和 TagName  =>  需要配合 i--
// 原因 :动态计算 , 每删除一个,都会重新分配一次下标
2. 使用 querySelectorAll('li') =>  ok的
// 原因 : 静态计算

功能1: 克隆10个tip, 并且随机分布
功能2: 点击提高层级
功能3: 点击x, 删除当前tip
功能4: 双击tip头部, 删除当前tip

window.onload = function() {
  //代码会在窗体加载完成后执行。
  //窗体加载完成 包括文档树(DOM html)的加载、还有图片、文件的加载完成。
}

<img src="./01.png" alt="">
window.onload = function () {
  var img = document.querySelector('img')
  console.log(img.width)
  console.log(img.height)
}

// 语法 : clearTimeOut(timerId)
// 参数 : 延时器id
// 示例 :
clearTimeOut(timer) // 清除上面定义的延时器

// 语法 :var timerId = setInterval(func,dealy)
// 参数1 ： 重复执行的函数
// 参数2 : 每次间隔的毫秒数
// 返回 : 定时器的id,  用于清除
// 示例 :
var timer = setInterval(function() {
  // 1s 之后开始重复执行
}, 1000)

// 语法 : clearInterval(intervalId)
// 参数 : 定时器id
// 示例 :
clearInterval(timerId) // 清除上面的定时器

// 随便打开一个网页 可以演示
// 后退：
history.back()
history.go(-1)
// 前进：
history.forward()
history.go(1)

console.log(screen.width) // 屏幕的宽度
console.log(screen.height) // 屏幕的高度
console.log(screen.availWidth) // 浏览器可占用的宽度
console.log(screen.availHeight) // 浏览器可占用的高度

var step = (target - current) / 10
current += step

var step = (target - current) / 10
step = Math.ceil(step) // 往上取整
current += step

// 为什么往上取整 :
// 1. 如果不取整，赋值为小数的话,下次取值还是会取个 整数回来，这就是之前的缺点
// 2. 往上取整的额原因是：(400-395)/10 = 0.5 如果往下取整为0，那就不会走了，所以
// 为了保证可以走，往上取整 取 1  步数 为 1

1.查看位置 : left有时候为 395.5/ 396.4
2.打印: offsetLeft  => 395 / 396
3.step为整数  往上取整

var step = (target - current) / 10
step = Math.floor(step) //往下取整
current += step

// 为什么往下取整 :
// 1. 如果不取整，赋值为小数的话,下次取值还是会取个整数回来，这就是之前的缺点
// 2. 往上取整的额原因是 : (0-5)/10 = -0.5 如果往上取整为0  那就不会走了，所以
// 为了保证可以走，往下取整 : 取 -1    步数 为 -1

1. 先把盒子 设置 left : 400px 位置;  回到0位置
2. 查看位置 : left有时候为 4.5
3. 打印: offsetLeft  => 5
4. step为整数  往下取整

function animate(element, target) {
  if (element.timerId) {
    clearInterval(element.timerId)
  }
  element.timerId = setInterval(function() {
    // 1. 获取当前位置
    var current = element.offsetLeft
    // 2. 累加小碎步
    var step = (target - current) / 10
    // 往上取整 ? 为什么，因为 0.5 如果网下取整也是0 ，不会走
    step = step > 0 ? Math.ceil(step) : Math.floor(step)
    current += step // 1
    // 3. 重新赋值
    element.style.left = current + 'px' //400
    if (current == target) {
      clearInterval(element.timerId)
    }
  }, 15)
}

// 给一个形参即可
btn.onclick = function(e) {
  // e 就是事件对象，里面包含了事件触发时的一些信息
  console.log(e)
}

btn.onclick = function() {
  // IE678 通过 window.event 获取事件对象
  console.log(window.event)
}

btn.onclick = function(e) {
  // 只要用到了事件对象，就要记得处理浏览器兼容性
  // 低版本IE event 不存在为undefined
  e = e || window.event
}

document.onmousemove = function(e) {
  console.log(e.clientX, e.clientY)
  console.log(e.pageX, e.pageY)
  console.log(e.screenX, e.screenY)
}

// type：事件的类型：click mouseover  字符串类型，不带 on
// fn：函数，每次点击，执行这个函数
// useCapture: 可选，true：事件在捕获阶段执行，false: 事件在冒泡阶段执行(默认)
element.addEventListener(type, fn, useCapture)
btn.addEventListener('click', function() {
  console.log('哈哈')
})

// type：事件的类型
// fn：要移除的那个函数
element.removeEventListener(type, fn)
btn.removeEventListener('click', fn)
// 注意 : 如果想让注册的事件能移除，不能用匿名函数

// 添加事件
function addEvent(element, type, fn) {
  // 能力检测
  if (element.addEventListener) {
    element.addEventListener(type, fn)
  } else if (element.attachEvent) {
    element.attachEvent('on' + type, fn)
  } else {
    // 如果都不行，那就用on方式
    element['on' + type] = fn
  }
}

// 移除事件
function removeEvent(element, type, fn) {
  if (element.removeEventListener) {
    element.removeEventListener(type, fn, false)
  } else if (element.detachEvent) {
    element.detachEvent('on' + type, fn)
  } else {
    element['on' + type] = null
  }
}

box.onclick = function(e) {
  e.stopPropagation()
}

// 参数1：true => 捕获， false => 冒泡（默认）
box.addEventListener('click', function() {}, 参数1)

function stopPropagation(e) {
  if (e && e.stopPropagation) {
    e.stopPropagation() // 标准浏览器
  } else {
    window.event.cancelBubble = true // 兼容 IE
  }
}

// 当 addEventListener 第三个参数为 true 时，表示事件捕获
arr[i].addEventListener(
  'click',
  function() {
    //
  },
  true
)

var div = doucment.getElementById('div')
div.onscroll = function() {
  console.log(div.scrollLeft)
  console.log(div.scrollTop)
}

// 给整个页面注册滚动事件
document.onscroll = function() {
  var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0
  var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0
  console.log(scrollLeft, scrollTop)
}

window.onresize = function() {
  // 事件处理程序
}

// 因为求的是窗口大小所以用 window
window.onresize = function() {
  var W = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
  console.log(W)
  var H = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
  console.log(H)
}

{
  var a = 1
  let b = 2
}

console.log(a) // 1
console.log(b) // ReferenceError: b is not defined

var a = 1
let a = 2 // SyntaxError: Identifier 'a' has already been declared
let b = 3
const b = 4 // SyntaxError: Identifier 'b' has already been declared

let c = 1
console.log(window.c) // undefined
console.log(c) // 1

let a = 1
{
  a = 2
  let a
}
// 如果 let 不会提升，那么 a = 2 就会将外面的 a 由 1 变成 2
// 但运行发现 a = 2 报错：Uncaught ReferenceError: Cannot access 'a' before initialization

a = 1; let a  // Uncaught ReferenceError: Cannot access 'a' before initialization

const PI = 3.1415
PI = 3 // TypeError: Assignment to constant variable

const num
// SyntaxError: Missing initializer in const declaration

const obj = { name: 'zs' }
obj.age = 18 // 正确
obj = {} // TypeError: Assignment to constant variable

// 定义一个字符串
let str = `hello world`

// 内部允许换行
let str = `
  hello
  world
`

// 内部可以使用表达式
let str = `你好，我是${name}`

let a = () => {}
console.log(a.prototype) // undefined

fn = function(){
  let arrow = (...args) => {
    console.log(arguments) // 外层的入参列表 -> Arguments(3) [1, 2, 3, callee: ƒ, Symbol(Symbol.iterator): ƒ]
    console.log(args) // 使用剩余参数表示法获得的自身入参列表 -> (3) [4, 5, 6]
  }
  arrow(4, 5, 6)
  console.log(arrow.length) // 0
}
fn(1, 2, 3)

let fn = (n1, n2) => n1 + n2

// 当属性的 key 和变量的名相同时可以简写
let person = { name: name } ==> let person = { name }

// 声明函数
let cal = {
  add: function () {
    return 1
  },
  // 可以省略 `:function`
  add(){
    return 1
  }
}

let propKey = 'foo'
let methodKey = 'bar'

let obj = {
  [propKey]: true, // foo: true
  ['a' + 'bc']: 123,  // abc: 123
  [methodKey]() {
    return 'hi'
  }
}

// 构造函数
function Person() {
  this.name = 'jack'
  this.age = 18
}

// 在原型中添加实例方法
Person.prototype.say = function() {
  console.log(this.name, this.age)
}

// 创建实例
const p = new Person()
p.say()

class Person {}
Person instanceof Function // true
Person.prototype.constructor === Person // true

// 创建 Person 类
class Person {
  // 类的构造函数 constructor 固定名称
  constructor(name, age) {
    this.name = name
    this.age = age
  }

  // 添加实例方法
  say() {
    console.log(this.name, this.age)
  }
}

// 创建实例
const p = new Person('tom', 18)
console.log(p) // Person {name: 'tom', age: 18}
p.say() // tom 18

Object.keys(Person.prototype) // []
Object.getOwnPropertyNames(Person.prototype) //

// 匿名类
let Person = class {}
new Person() // Person {}

// 命名类
let Person = class A {}
new Person() // A {}
new A() // Uncaught ReferenceError: A is not defined
console.log(Person) // class A {}
console.log(A) // Uncaught ReferenceError: A is not defined

class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }

  static distance(a, b) {
    const dx = a.x - b.x
    const dy = a.y - b.y

    return Math.hypot(dx, dy)
  }
}

const p1 = new Point(5, 5)
const p2 = new Point(10, 10)

console.log(Point.distance(p1, p2))

// 继承

// 父类
class Person {
  constructor(name, age) {
    this.name = name
  }

  say() {
    console.log('父类中的 say 方法', this.name)
  }
}

// 子类
class Chinese extends Person {
  constructor(name, age) {
    // 子类中使用 constructor 必须手动调用 super
    // super 表示父类的构造函数
    // 先调用 super() 再使用 this
    super()
    this.name = name
    this.age = age
  }
}

// 创建实例
const c = new Chinese('zs', 18)
console.log(c)
c.say() // 父类中的方法

class Person {
  static play() {
    return 'play'
  }
}

Person.play() // 'play'

var person = new Person()
person.play() // err person.play is not a function

class Person {
  static play() {
    return 'static play'
  }
  play() {
    return 'play'
  }
}


Person.play() // 'static play'

var person = new Person()
person.play() // 'play'

class Person {
  static play() {
    return 'static play'
  }
}

class Child extends Person {
  static childPlay() {
    return 'Child ' + super.play()
  }
}

Child.play() // 'static play'
Child.childPlay() // 'Child static play'

// 1. 对象解构
var { a, b } = { a: 10, b: 20 }

// 同
;({ a, b } = { a: 10, b: 20 }) // 使用没有声明的赋值，数组解构类似
console.log(a, b) // 10 20

// 提取变量并赋值
var { a: p, b: q } = { a: 10, b: 20 }
console.log(p, q) // 10 20

// 将剩余属性赋值给一个变量
var { a, b, ...rest } = { a: 10, b: 20, c: 30, d: 40 }
console.log(a, b, rest) // 10 20 {c: 30, d: 40}

// 提供默认值
var { a = 1, b = 1 } = { a: 10 }
console.log(a, b) // 10 1

// 赋值并提供默认值
var { a: aa = 10, b: bb = 1 } = { a: 10 }
console.log(aa, bb) // 10 1

// 2. 数组解构
var [a, b] = [1, 2]
console.log(a, b) // 1 2

// 将剩余数组赋值给一个变量
var [a, b, ...rest] = [1, 2, 3, 4]
console.log(a, b, rest) // 1 2 [3, 4]
// ==> var a = arr[0]; var b = arr[1]

// 提供默认值
var [c = 2, d = 2] = [10]
console.log(c, d) // 10 2

// 忽略某些值
var [a = 2, , b = 2] = [10, 20, 30]
console.log(a, b) // 10 30

// 3. 函数参数的解构赋值
function foo({ x }) {
  console.log(x) // 1
}
foo({ x: 1, y: 2 })

// 函数参数默认值
function foo({ x = 10 }) {
  console.log(x) // 10
}
foo()

// 4. 解构的特殊应用
// 交换变量
var a = 1
var b = 3
;[a, b] = [b, a]
console.log(a) // 3
console.log(b) // 1

// 字符串解构
var str = 'love'
var [a, b, c, d] = str
console.log(a, b, c, d) // l o v e

var arr = ['a', 'b', 'c']
console.log(...arr) // a b c

// 数组深拷贝
var arr = [1, 2, 3]
var arr1 = [...arr]
console.log(arr === arr1) // false, 说明arr1和arr指向不同数组

// 把一个数组插入另一个数组字面量
var arr2 = [...arr, 4, 5, 6]
console.log(arr2) // [1, 2, 3, 4, 5, 6]

// 字符串转数组
var str = 'love'
var arr3 = [...str]
console.log(arr3) // [ 'l', 'o', 'v', 'e' ]

let defaults = { name: 'zs', age: 18 }
let search = { ...defaults, age: 12 } // { name: 'zs', age: 12 } 后面的属性会覆盖前面的属性

class C {
  p = 12
  m() {}
}
let c = new C()
let clone = { ...c }
clone.p // ok
clone.m() // error!

// 闭包的基本模型
function outer() {
  var num = 10
  function inner () {
    num++
    console.log(num)
  }
  return inner  // 把inner函数给返回出去，让外部能够调用inner函数
}

// 并不一定是有返回函数才算是产生了闭包
var f3
function f1() {
  var a = 2
  f3 = function() {
    console.log(a)
  }
}
f1()
f3() // 2

var count = 0
function fn() {
  count++
  console.log('我被调用了，调用次数是' + count)
}
fn()
fn()
fn()
// 缺点：count是全局变量，不安全

function outer() {
  var count = 0 // 私有变量, 将 count 保护起来了
  function add() {
    count++
    console.log('当前count' + count)
  }
  return add
}
var result = outer()
result()

function outer() {
  // 缓存
  var arr = []

  var fbi = function(n) {
    if (n == 1 || n == 2) {
      return 1
    }
    if (arr[n]) {
      return arr[n]
    } else {
      var temp = fbi(n - 1) + fbi(n - 2)
      arr[n] = temp //存入缓存
      return temp
    }
  }
  return fbi
}
var fbi = outer()
console.log(fbi(40))

var o = {
  name: 'zs'
}
// 对象被 o 变量引用，引用记数 1
var obj = o // 变量被 o 和 obj 引用，引用记数 2
o = 1 // o 不在引用对象了，引用记数 1
obj = null // obj 不在引用对象了，引用记数 0，可以被垃圾回收了

function fn() {
  var obj1 = {} // 引用计数为 2
  var obj2 = {} // 引用计数为 2
  obj1.a = obj2
  obj2.b = obj1
}
fn() // 销毁fn调用开辟的空间， 但是由于引用计数考虑到两个对象都不是零引用的对象，就不能够被垃圾回收机制给回收掉

function outer() {
  var count = 0
  function fn() {
    count++
    console.log('执行次数' + count)
  }
  return fn
}
var result = outer()
result()
result = null // 当函数 fn 没有被变量引用了，那么函数 fn 就会被回收，函数 fn 一旦被回收，那么 outer调用形成的作用域也就得到了释放

parseInt('123', 5) // 将 '123' 看作 5 进制数，返回十进制数 38
parseInt('4215213', 5)   // 4 * 5^2 + 2 * 5^1 + 1 * 5^0 = 111 返回 111
parseInt('0x123') // 291
[1, 2, 3].map(parseInt) // [1, NaN, NaN]
// [1, 2, 3].map(parseInt(item, index))

parseFloat('3.14') // 3.14
parseFloat('0x123') // 0
// [1, 2, 3].map(parseFloat) // [1, 2, 3]

parseInt(0.0000005) === 5
// 如果 parseInt 第一个参数不是字符串，会将其转换成字符串
// 小于 10-6 的浮点数以指数表示
// parseint 从 float 的指数法中提取整数
String(0.0000005) // => '5e-7'
parseInt(5e-7) // => 5
parseInt('5e-7') // => 5

parseInt(1111111111111111111111) // => 1
parseInt(999999999999999999999) // => 1

parseInt((5e-7).toFixed()) // => 0

parseFloat(9999999999999999) // 10000000000000000

typeof // 只能查看基本数据类型的类型
instanceof // 判断对象的具体类型
constructor.name // 获取对象的具体类型 适用于任何类型的检测
Object.prototype.toString.call('str') // '[object String]' 适用于任何类型的检测

// typeof 判断
// 简单类型
typeof 12 // 'number'
typeof 'abc' // 'string'
typeof true // 'boolean'
typeof undefined // 'underfined'
typeof null // 'object'

// 复杂类型 (引用类型)
typeof function() {} // 'function'
typeof [] // 'object'
typeof {} // 'object'

// 语法
object instanceof constructor

// instanceof 判断
var simpleStr = 'This is a simple string'
var myString = new String()
var newStr = new String('String created with constructor')
var myObj = {}
var myNonObj = Object.create(null)
var myArr = []
var myFn = function() {}

simpleStr instanceof String // 返回 false, 检查原型链会找到 undefined
myString instanceof String // 返回 true
newStr instanceof String // 返回 true
myString instanceof Object // 返回 true

myObj instanceof Object // 返回 true, 尽管原型没有定义
;({} instanceof Object) // 返回 true, 同上
myNonObj instanceof Object // 返回 false, 一种创建对象的方法，这种方法创建的对象不

myArr instanceof Array // true
myArr instanceof Object // true
myFn instanceof Object // true
myFn instanceof Function // true

var myArr = []
var myFn = function() {}
var myObj = {}
let myDate = new Date()

// 原型的构造函数
myArr.constructor.name // Array
myFn.constructor.name // Object
myObj.constructor.name // Function
myDate.constructor.name // Date

// 自定义构造函数
function Teacher(name, age) {
  this.name = name
  this.age = age
}
var tea = new Teacher('zs', 18)
tea.constructor.name // Teacher

Object.prototype.toString.call('str').slice(8, -1) // String
// 正则 => RegExp
// 时间对象 => Date
// 字符串 => String
// 对象 => Object
// 数组 => Array

// 自定义构造函数
function Teacher(name, age) {
  this.name = name
  this.age = age
}
var tea = new Teacher('zs', 18)
Object.prototype.toString.call(tea) // '[object Object]'

for (var i = 0; i < arr.length; i++) {
  console.log(arr[i])
}

arr.forEach(function(item, index, arr) {
  console.log(item)
  console.log(this)
})
// 返回值: undefined

for (var key in obj) {
  console.log(key) // 键
  console.log(obj[key]) // 值
}

var arr = ['a', 'b', 'c']
a.name = 'd'
for (var index in arr) {
  console.log(index) // '0', '1', '2', 'name'
}

let arr = [1, 2, 3, 4]
for (const item of arr) {
  console.log(item)
}

$(selector).each(function(index, element) {
  // index 表示当前元素在所有匹配元素中的索引号
  // element 表示当前元素 dom 对象
  // this 在函数内部，this指向了element
})

$('li').each(function(index, ele) {
  // $(ele).css("backgroundColor", arr[index])
  $(this).css('backgroundColor', arr[index])
})

var num = 11
function fn() {
  var num1 = 22
  num2 = 33
  num = 33
  console.log(num1)
}
fn()
console.log(num)
// console.log(num1)
console.log(num2)

var num = 123
function f1() {
  console.log(num)
}

function f2() {
  var num = 456
  f1()
}
f2() // 123

// 1.
var num = 10
fn1()
function fn1() {
  console.log(num) // undefined
  var num = 20
  console.log(num) // 20
}
console.log(num) // 10

// 2
var num = 10
fn1()
function fn1() {
  console.log(num) // 10
  num = 20
  console.log(num) // 20
}
console.log(num) // 20

// 3
var num = 123
function f1(num) {
  console.log(num) // 456 undefined
}
function f2() {
  var num = 456
  f1(num)
  f1()
}
f2()

// 4
var num1 = 10
var num2 = 20
function fn(num1) {
  num1 = 100
  num2 = 200
  num3 = 300
  console.log(num1) // 100
  console.log(num2) // 200
  console.log(num3) // 300
  var num3
}
fn()
console.log(num1) // 10
console.log(num2) // 200
console.log(num3) // error

// 函数预解析
// 1.
function fn() {
  console.log(a) // undefined
}
fn()
var a = 1

// 2.
var n = 45
function fn5() {
  console.log(n) // undefined
  n = 20
  console.log(n) // 20
  var n = 0
  console.log(n) // 0
}
fn5()
console.log(n) // 45

// 3.
console.log(b) // 函数体
var b = 23
function b() {
  console.log(b)
}
console.log(b) // 23
// b() // 报错

// 4.
console.log(c) // 函数体
c() // 嘿嘿
var c = function() {
  comsole.log('哈哈')
}

function c() {
  console.log('嘿嘿')
}

// 5.
console.log(fn1) // 函数体
fn1()
function fn1() {
  console.log('哈哈') // 哈哈
}
console.log(fn2) // undefined
fn2() // 报错
var fn2 = function() {
  console.log('嘿嘿')
}
// 对于函数表达式，函数的调用必须在表达式声明之后
fn2() // 嘿嘿

// 6.
// 只有用 var 声明的变量才会预解析
console.log(d) // 报错
d = 5

// 7.
console.log(e)
console.log(f) // 报错 f is not defined
var e = (f = 10)
console.log(f) // 10

// 8.
if ('a' in window) {
  var a = 'abc'
}
console.log(a) // abc

fn() // 函数声明可以先调用，在声明
function fn() {
  console.log('这是函数声明')
}

var fn = function() {
  console.log('这是函数表达式')
}
fn() // 函数表达式必须先声明，再调用

// 函数也是对象，可以使用 Function 构造函数 new 出来
// 相当于var fn = function () {}
var fn = new Function()

// 语法：new Function(arg1,arg2,arg3..,body)
// 所有的参数都是字符串类型
// 前面可以定义任意多个形参，最后一个参数是代码体
var fn = new Function('alert(1)')
fn()

var fn1 = new Function('a1', 'a2', 'alert(a1 + a2)')
fn1(1, 2)

Function.length // 1
Function.prototype.length // 0
(function()        {}).length // 0
(function(a)       {}).length // 1
(function(...args) {}).length // 0
(function(a, b = 1, c) {}).length // 1

function a() {}
a.toString() // 'function a() {}'

// 获取数据类型
return Object.prototype.toString.call(obj).slice(8, -1) // '[object 构造函数]'

function fn() {
  console.log(this) // 指向 window
}
fn()

var f = function() {
  console.log(this)
}
var obj = { fn: f }
var arr = [f]

obj.fn() // obj
obj['fn']() // obj
arr[0]() // arr 也是方法调用模式

function Person() {
  console.log(this)
}
var p = new Person() // this 指向 p

// 1.
var age = 38
var obj = {
  age: 18,
  getAge: function() {
    console.log(this.age)
  }
}
var f = obj.getAge
f() // window ==> 38

// 2.
var age = 38
var obj = {
  age: 18,
  getAge: function() {
    console.log(this.age) // obj ==> 18
    function foo() {
      console.log(this.age) // window ==> 38
    }
    foo()
  }
}
obj.getAge()

// 3.
var length = 10
var age = 18
function fn() {
  console.log(this.length)
}
var arr = [fn, '222']
fn() // 10
arr[0]() // 2

// 4.
var length = 10
function fn() {
  console.log(this.length)
}
var obj = {
  length: 5,
  method: function(fn) {
    fn() // window ==> 10
    arguments[0]() // argument ==> 3
  }
}
obj.method(fn, 10, 5)

// 5.
let len = 10
function fn() {
  console.log(this.len)
}
fn() // window ==> undefined

let Person = {
  len: 5,
  say: function() {
    fn() // window ==> undefined
    arguments[0]() // arguments ==> undefined
  }
}
Person.say(fn)

// 6.
var obj = {
  bar: function() {
    var x = () => this
    return x
  }
}

// 作为obj对象的一个方法来调用bar，把它的this绑定到obj。
// 将返回的函数的引用赋值给fn。
var fn = obj.bar()

// 直接调用fn而不设置this，
// 通常(即不使用箭头函数的情况)默认为全局对象
// 若在严格模式则为undefined
console.log(fn() === obj) // true

// 但是注意，如果你只是引用obj的方法，而没有调用它
var fn2 = obj.bar
// 那么调用箭头函数后，this指向window，因为它从 bar 继承了this。
console.log(fn2()() == window) // true

// 调用函数
function fn() {
  console.log(1)
}
fn.call() // 1

// 改变 this 指向
function fn() {
  console.log(this)
}
fn.call({ name: 'zs' }) // { name: 'zs' }

function fn(n1, n2) {
  console.log(this)
  console.log(n1 + n2)
}
fn.apply({ name: 'zs' }, [10, 20]) // {name: 'zs'}, 30
// apply 的特性：平铺性，把数组中的每一项取出来作为函数的实参

var fn = function() {
  console.log(this)
}

var newFn = fn.bind([1, 2, 3])
// newFn 是 bind 创建并返回出来的
console.log(newFn)
newFn() // this ==> [1,2,3]

let a = {}
let fn = function() {
  console.log(this)
}
fn.bind().bind(a)() // => ?

// fn.bind().bind(a) 等于
let fn2 = function fn1() {
  return function() {
    return fn.apply()
  }.apply(a)
}
fn2()

// 计算斐波那契数列
function fn(n) {
  if (n == 1 || n == 2) {
    return 1
  }
  return fn(n - 1) + fn(n - 2)
}
console.log(fn(12))