Giter Club home page Giter Club logo

professional-js's Introduction

professional-js

最近打算重新巩固一下js基础,遥想详细看这本书还是2015年大三的时候,现在已经工作一年,越是工作,越是容易把基础丢失。开一个仓库,来记录重温的过程。

重温的过程并不会完全按照书籍的目录,而是觉得自己哪方面的知识开始模糊薄弱了

重温记录

第4章-变量、作用域和内存问题

第5章-引用类型

第6章-面向对象的程序设计

第7章-函数表达式

第8章-BOM

第9章-客户端检测

第10-DOM

第13章-事件

第14章-表单脚本

第15章-使用canvas绘图

第16章-HTML5脚本编程

第17章-错误处理与调试

第20章-JSON

第21章-Ajax与Comet

第22章-高级技巧

第23章-离线应用与客户端存储

第25章-新兴的API

professional-js's People

Contributors

qianlongo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar

professional-js's Issues

第七章-函数表达式

7 定义函数的方式

  1. 函数声明(存在函数声明提升,所以可以在函数声明之前调用函数)
  2. 函数表达式(调用必须在声明之前)

不要用下面的方式去定义一个函数

不同的浏览器对此解析不同,有的两个都声明了,有的只声明了a函数

if (true) {
  function a () {
    return 'a'
  }
} else {
  function b () {
    return 'b'
  }
}

如果想根据不同的条件声明函数可以用函数表达式

var fn = null

if (true) {
  fn = function () {
    return 'a'
  }
} else {
  fn = function () {
    return 'b'
  }
}

7.1 递归

function recursion (num) {
  if (num === 1) {
    return 1
  } else {
    return num * recursion(num - 1)        
  }
}

以上定义了一个递归求阶乘的函数,如果我们用下面这种使用方式会怎么样呢?

var fn = recursion
recursion = null

fn(2) // 这个时候就报错了,因为recursion函数内部,调用了recursion本身,但是recurtion已经被赋值为了null。

怎么办?使用arguments.callee

他是一个当前正在执行的函数的引用

function recursion (num) {
  if (num === 1) {
    return 1
  } else {
    return num * arguments.callee(num - 1)        
  }
}

var fn = recursion

recursion = null

fn(3) // 6

缺陷是严格模式下不允许这样用

还有别的方式

var recursion = function f (num) {
  if (num === 1) {
    return 1
  } else {
    return num * f(num - 1)
  }
}

var fn = recursion
recursion = null
fn(3) // 2

函数表达式依旧可以给函数取名字

7.2 闭包

一个能够访问另一个函数作用域中变量的函数。

var property = function (key) {
  return function (obj) {
    return obj[key]    
  }
}

var length = property('length')

以上就是一个经典的闭包,需要注意的是闭包会产生比普通函数更多的内存,所以需要慎用。

7.2.1 闭包与变量

闭包只能取得包含函数中任何变量的最后一个值

var fn = function () {
  var arrFn = []
  var i = 0
  
  for (; i < 10; i++) {
    arrFn[i] = function () {
      return i
    }
  }
  
  return arrFn
}

var fns = fn()

我们以为创建出来的函数数组fns会输出0, 1, 2....,但是实际上只会得到10,因为闭包只能拿到包含函数中所有变量的最后值。

i在循环结束的时候已经变成了10,故所有的函数执行都只能得到10

如果想得到对应的输出,我们可以用其他的闭包方式,例如

var fn = function () {
  var arrFn = []
  var i = 0
  
  for (; i < 10; i++) {
    arrFn[i] = (function (num) {
      return function () {
        return num
      }
    })(i)
  }
  
  return arrFn
}

var fns = fn()

这个时候每个立即执行函数的都有自己的执行环境,而fns数组中函数的所形成的闭包自然也可以得到自己的唯一的num值了

7.2.2 关于this对象

关于闭包能够访问另一个函数的变量,有两个比较特殊this, arguments

var name = 'the window'
var obj = {
  name: 'the obj',
  showName: function () {
    return function () {
      return this.name // 注意这里
    }
  }
}

obj.showName()() // the window

为毛得到了the window,记住thisarguments两个值比较特殊就可以,如果没有手动将另一个函数的this和arguments赋值,其得到的还是动态运行的结果,我们看下面的例子就可以明白

var name = 'the window'
var obj = {
  name: 'the obj',
  showName: function () {
    var thatArguments = arguments
    var that = this
    return function () {
      console.log(thatArguments)
      console.log(that.name)
      console.log(this.name) 
    }
  }
}

obj.showName()() // the window

7.2.3 内存泄漏

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.