关于javascript:重学-JavaScript-语法和-API

一、了解 ECMAScript 和 JavaScript 的关系

一个常见的问题是，ECMAScript 和 JavaScript 到底是什么关系？

要讲清楚这个问题，须要回顾历史。1996 年 11 月，JavaScript 的创造者 Netscape 公司，决定将 JavaScript 提交给标准化组织 ECMA，心愿这种语言可能成为国际标准。次年，ECMA 公布 262 号标准文件（ECMA-262）的第一版，规定了浏览器脚本语言的规范，并将这种语言称为 ECMAScript，这个版本就是 1.0 版。

该规范从一开始就是针对 JavaScript 语言制订的，然而之所以不叫 JavaScript，有两个起因。一是商标，Java 是 Sun 公司的商标，依据受权协定，只有 Netscape 公司能够非法地应用 JavaScript 这个名字，且 JavaScript 自身也曾经被 Netscape 公司注册为商标。二是想体现这门语言的制定者是 ECMA，不是 Netscape，这样有利于保障这门语言的开放性和中立性。

因而，ECMAScript 和 JavaScript 的关系是，前者是后者的规格，后者是前者的一种实现（另外的 ECMAScript 方言还有 JScript 和 ActionScript）。日常场合，这两个词是能够调换的。

二、纯熟使用 es5、es6 提供的语法标准

JavaScript 教程

ECMAScript 6 入门

三、setInterval 须要留神的点，应用 settimeout 实现 setInterval

3.1 setInterval 须要留神的点

在应用 setInterval 办法时，每一次启动都须要对 setInterval 办法返回的值做一个判断，判断是否是空值，若不是空值，则要进行定时器并将值设为空，再重新启动，如果不进行判断并赋值，有可能会造成计时器循环调用，在等同的工夫内同时执行调用的代码，并会随着代码的运行工夫减少而减少，导致性能无奈实现，甚至占用过多资源而卡死奔溃。因而在每一次应用 setInterval 办法时，都须要进行一次判断。

let timer = setInterval(func, 1000)
// 在其余中央再次用到 setInterval(func, 1000)
if (timer !== null) {clearInterval(timer)
  timer = null
}
timer = setInterval(func, 1000)

3.2 应用 settimeout 实现 setInterval

setIntervalFunc = () => {console.log(1) // 应用递归
  setTimeout(setIntervalFunc, 1000)
}
setInterval()

四、JavaScript 提供的正则表达式 API、能够应用正则表达式（邮箱校验、URL 解析、去重等）解决常见问题

RegExp 对象

五、JavaScript 异样解决的形式，对立的异样解决计划

当 JavaScript 引擎执行 JavaScript 代码时，有可能会产生各种异样，例如是语法异样，语言中短少的性能，因为来自服务器或用户的异样输入而导致的异样。

而 Javascript 引擎是单线程的，因而一旦遇到异样，Javascript 引擎通常会进行执行，阻塞后续代码并抛出一个异样信息，因而对于可预感的异样，咱们应该捕获并正确展现给用户或开发者。

5.1 Error 对象

throw 和 Promise.reject() 能够抛出字符串类型的异样，而且能够抛出一个 Error 对象类型的异样。

一个 Error 对象类型的异样不仅蕴含一个异样信息，同时也蕴含一个追溯栈这样你就能够很容易通过追溯栈找到代码出错的行数了。

所以举荐抛出 Error 对象类型的异样，而不是字符串类型的异样。

创立本人的异样构造函数

function MyError(message) {var instance = new Error(message)
  instance.name = 'MyError'
  Object.setPrototypeOf(instance, Object.getPrototypeOf(this))
  return instance
}

MyError.prototype = Object.create(Error.prototype, {
  constructor: {
    value: MyError,
    enumerable: false,
    writable: true,
    configurable: true
  }
})

if (Object.setPrototypeOf) {Object.setPrototypeOf(MyError, Error)
} else {MyError.__proto__ = Error}

export default MyError

在代码中抛出自定义的异样类型并捕获

try {throw new MyError('some message')
} catch (e) {console.log(e.name + ':' + e.message)
}

5.2 Throw

throw expression

throw 语句用来抛出一个用户自定义的异样。以后函数的执行将被进行（throw 之后的语句将不会执行），并且管制将被传递到调用堆栈中的第一个 catch 块。如果调用者函数中没有 catch 块，程序将会终止。

try {console.log('before throw error')
  throw new Error('throw error')
  console.log('after throw error')
} catch (err) {console.log(err.message)
}

// before throw error
// throw error

5.3 Try / Catch

try {try_statements}
[catch (exception) {catch_statements}][finally {finally_statements}]

try/catch 次要用于捕获异样。try/catch 语句蕴含了一个 try 块, 和至多有一个 catch 块或者一个 finally 块，上面是三种模式的 try 申明:

• try…catch
• try…finally
• try…catch…finally

try 块中放入可能会产生异样的语句或函数

catch 块中蕴含要执行的语句，当 try 块中抛出异样时，catch 块会捕捉到这个异样信息，并执行 catch 块中的代码，如果在 try 块中没有异样抛出，这 catch 块将会跳过。

finally 块在 try 块和 catch 块之后执行。无论是否有异样抛出或着是否被捕捉它总是执行。当在 finally 块中抛出异样信息时会笼罩掉 try 块中的异样信息。

try {
  try {throw new Error('can not find it1')
  } finally {throw new Error('can not find it2')
  }
} catch (err) {console.log(err.message)
}

// can not find it2

如果从 finally 块中返回一个值，那么这个值将会成为整个 try-catch-finally 的返回值，无论是否有 return 语句在 try 和 catch 中。这包含在 catch 块里抛出的异样。

function test() {
  try {throw new Error('can not find it1')
    return 1
  } catch (err) {throw new Error('can not find it2')
    return 2
  } finally {return 3}
}

console.log(test()) // 3

Try / Catch 性能

有一个大家家喻户晓的反优化模式就是应用 try/catch。

在 V8（其余 JS 引擎也可能呈现雷同状况）函数中应用了 try/catch 语句不可能被 V8 编译器优化。

5.4 window.onerror

通过在 window.onerror 上定义一个事件监听函数，程序中其余代码产生的未被捕捉的异样往往就会被 window.onerror 下面注册的监听函数捕捉到。并且同时捕捉到一些对于异样的信息。

window.onerror = function(message, source, lineno, colno, error) {}

• message：异样信息（字符串）
• source：产生异样的脚本 URL（字符串）
• lineno：产生异样的行号（数字）
• colno：产生异样的列号（数字）
• error：Error 对象（对象）

留神：Safari 和 IE10 还不反对在 window.onerror 的回调函数中应用第五个参数，也就是一个 Error 对象并带有一个追溯栈

try/catch 不可能捕捉异步代码中的异样，然而其将会把异样抛向全局而后 window.onerror 能够将其捕捉。

try {setTimeout(() => {throw new Error('some message')
  }, 0)
} catch (err) {console.log(err)
}
// Uncaught Error: some message

window.onerror = (msg, url, line, col, err) => {console.log(err)
}
setTimeout(() => {throw new Error('some message')
}, 0)
// Error: some message

在 Chrome 中，window.onerror 可能检测到从别的域援用的 script 文件中的异样，并且将这些异样标记为 Script error。如果你不想解决这些从别的域引入的 script 文件，那么能够在程序中通过 Script error 标记将其过滤掉。然而，在 Firefox、Safari 或者 IE11 中，并不会引入跨域的 JS 异样，即便在 Chrome 中，如果应用 try/catch 将这些厌恶的代码突围，那么 Chrome 也不会再检测到这些跨域异样。

在 Chrome 中，如果你想通过 window.onerror 来获取到残缺的跨域异样信息，那么这些跨域资源必须提供适合的跨域头信息。

5.5 Promise 中的异样

• Promise 中抛出异样

  new Promise((resolve, reject) => {reject()
  })
  Promise.resolve().then((resolve, reject) => {reject()
  })
  Promise.reject()
  throw expression

• Promise 中捕获异样

  promiseObj.then(undefined, err => {catch_statements})
  promiseObj.catch(exception => {catch_statements})

  在 JavaScript 函数中，只有 return / yield / throw 会中断函数的执行，其余的都无奈阻止其运行到完结的。

  在 resolve / reject 之前加上 return 能阻止往下持续运行。

  without return：

  Promise.resolve()
    .then(() => {console.log('before excute reject')
      reject(new Error('throw error'))
      console.log('after excute reject')
    })
    .catch(err => {console.log(err.message)
    })
  
  // before excute reject
  // throw error
  // after excute reject

  use return：

  Promise.resolve()
    .then(() => {console.log('before excute reject')
      return reject(new Error('throw error'))
      console.log('after excute reject')
    })
    .catch(err => {console.log(err.message)
    })
  
  // before excute reject
  // throw error

• Throw or Reject

  无论是 try/catch 还是 promise 都能捕捉到的是“同步”异样

  reject 是回调，而 throw 只是一个同步的语句，如果在另一个异步的上下文中抛出，在以后上下文中是无奈捕捉到的。

  因而在 Promise 中应用 reject 抛出异样。否则 catch 有可能会捕获不到。

  Promise.resolve()
    .then(() => {setTimeout(() => {throw new Error('throw error')
      }, 0)
    })
    .catch(err => {console.log(err)
    })
  
  // Uncaught Error: throw error

  Promise.resolve()
    .then(() => {return new Promise((resolve, reject) => {setTimeout(() => {reject(new Error('throw error'))
        }, 0)
      })
    })
    .catch(err => {console.log(err)
    })
  
  // Error: throw error

5.6 window.onunhandledrejection

window.onunhandledrejection 与 window.onerror 相似，在一个 JavaScript Promise 被 reject 然而没有 catch 来捕获这个 reject 时触发。并且同时捕捉到一些对于异样的信息。

window.onunhandledrejection = event => {console.log(event.reason)
}

event 事件是 PromiseRejectionEvent 的实例，它有两个属性：

• event.promise：被 rejected 的 JavaScript Promise
• event.reason：一个值或 Object 表明为什么 promise 被 rejected，是 Promise.reject() 中的内容。

5.7 window.rejectionhandled

因为 Promise 能够延后调用 catch 办法，若在抛出 reject 时未调用 catch 进行捕获，但稍后再次调用 catch，此时会触发 rejectionhandled 事件。

window.onrejectionhandled = event => {console.log('rejection handled')
}

let p = Promise.reject(new Error('throw error'))

setTimeout(() => {
  p.catch(e => {console.log(e)
  })
}, 1000)

// Uncaught (in promise) Error: throw error
// 1 秒后输入
// Error: throw error
// rejection handled

5.8 对立异样解决

代码中抛出的异样，一种是要展现给用户，一种是展现给开发者。

对于展现给用户的异样，个别应用 alert 或 toast 展现；对于展现给开发者的异样，个别输入到控制台。

在一个函数或一个代码块中能够把抛出的异样对立捕获起来，依照不同的异样类型以不同的形式展现，对于。

须要点击确认的异样类型：

ensureError.js

function EnsureError(message = 'Default Message') {
  this.name = 'EnsureError'
  this.message = message
  this.stack = new Error().stack}
EnsureError.prototype = Object.create(Error.prototype)
EnsureError.prototype.constructor = EnsureError

export default EnsureError

弹窗提醒的异样类型：

toastError.js

function ToastError(message = 'Default Message') {
  this.name = 'ToastError'
  this.message = message
  this.stack = new Error().stack}
ToastError.prototype = Object.create(Error.prototype)
ToastError.prototype.constructor = ToastError

export default ToastError

提醒开发者的异样类型：

devError.js

function DevError(message = 'Default Message') {
  this.name = 'ToastError'
  this.message = message
  this.stack = new Error().stack}
DevError.prototype = Object.create(Error.prototype)
DevError.prototype.constructor = DevError

export default DevError

异样处理器：

抛出一般异样时，能够带上 stackoverflow 上问题的列表，不便开发者查找起因。

errorHandler.js

import EnsureError from './ensureError.js'
import ToastError from './toastError.js'
import DevError from './devError.js'
import EnsurePopup from './ensurePopup.js'
import ToastPopup from './toastPopup.js'

function errorHandler(err) {if (err instanceof EnsureError) {EnsurePopup(err.message)
  } else if (err instanceof ToastError) {ToastPopup(err.message)
  } else if (err instanceof DevError) {DevError(err.message)
  } else {
    error.message += `https://stackoverflow.com/questions?q=${encodeURI(error.message)}`
    console.error(err.message)
  }
}

window.onerror = (msg, url, line, col, err) => {errorHandler(err)
}

window.onunhandledrejection = event => {errorHandler(event.reason)
}

export default errorHandler