ES學習充電筆記

時間 2019-11-10

標籤學習充電筆記简体版

原文原文鏈接

整理一下最近前端的充電筆記,慚愧之前一直沒有去很好的理解原型和閉包前端

JS高級基礎

函數的理解和使用

函數也是對象es6
- instanceof Object===trueajax
- 函數有屬性: prototypejson
- 函數有方法: call()/apply()數組
- 能夠添加新的屬性/方法promise
函數的3種不一樣角色瀏覽器
- 通常函數 : 直接調用安全
- 構造函數 : 經過new調用服務器
- 對象 : 經過.調用內部的屬性/方法閉包
函數中的this
- 顯式指定誰: obj.xxx()
- 經過call/apply指定誰調用: xxx.call(obj)
- 不指定誰調用: xxx() : window
- 回調函數: 看背後是經過誰來調用的: window/其它
匿名函數自調用:
```
(function(w, obj){
  //實現代碼
})(window, obj)
```
- 專業術語爲: IIFE (Immediately Invoked Function Expression) 當即調用函數表達式
回調函數的理解
- 什麼函數纔是回調函數?
  - 你定義的
  - 你沒有調用
  - 但它最終執行了(在必定條件下或某個時刻)
- 經常使用的回調函數
  - dom事件回調函數
  - 定時器回調函數
  - ajax請求回調函數
  - 生命週期回調函數

原型與原型鏈

全部函數都有一個特別的屬性:
- prototype : 顯式原型屬性
全部實例對象都有一個特別的屬性:
- __proto__ : 隱式原型屬性
顯式原型與隱式原型的關係
- 函數的prototype: 定義函數時被自動賦值, 值默認爲{}, 即用爲原型對象
- 實例對象的__proto__: 在建立實例對象時被自動添加, 並賦值爲構造函數的prototype值
- 原型對象即爲當前實例對象的父對象
原型鏈
- 全部的實例對象都有__proto__屬性, 它指向的就是原型對象
- 這樣經過__proto__屬性就造成了一個鏈的結構---->原型鏈
- 當查找對象內部的屬性/方法時, js引擎自動沿着這個原型鏈查找
- 當給對象屬性賦值時不會使用原型鏈, 而只是在當前對象中進行操做

閉包

理解:
- 當嵌套的內部函數引用了外部函數的變量時就產生了閉包
- 閉包本質是內部函數中的一個對象, 這個對象中包含引用的變量屬性
做用:
- 延長局部變量的生命週期
- 讓函數外部能操做內部的局部變量

隨便寫一個閉包程序

function fn1() {
  var a = 2;
  function fn2() {
    a++;
    console.log(a);
  }
  return fn2;
}
var f = fn1();
f();
f();

閉包應用:
- 模塊化: 封裝一些數據以及操做數據的函數, 向外暴露一些行爲
- 循環遍歷加監聽
- JS框架(如:jQuery)大量使用了閉包
缺點:
- 變量佔用內存的時間可能會過長
- 可能致使內存泄露
- 解決:
  - 及時釋放 : f = null; //讓內部函數對象成爲垃圾對象

js線程

js是單線程執行的(回調函數也是在主線程)
只能是主線程更新界面

定時器問題:

定時器並不真正徹底定時
若是在主線程執行了一個長時間的操做, 可能致使延時才處理

理解ES

全稱: ECMAScript
js語言的規範
咱們用的js是它的實現
js的組成

ECMAScript(js基礎)
擴展-->瀏覽器端
- BOM
- DOM
擴展-->服務器端
- Node.js

ES5

嚴格模式

運行模式: 正常(混雜)模式與嚴格模式
應用上嚴格式: 'strict mode';
做用:
- 使得Javascript在更嚴格的條件下運行
- 消除Javascript語法的一些不合理、不嚴謹之處，減小一些怪異行爲
- 消除代碼運行的一些不安全之處，保證代碼運行的安全
- 須要記住的幾個變化
  - 聲明定義變量必須用var
  - 禁止自定義的函數中的this關鍵字指向全局對象
  - 建立eval做用域, 更安全

JSON對象

做用: 用於在json對象/數組與js對象/數組相互轉換
JSON.stringify(obj/arr) js對象(數組)轉換爲json對象(數組)
JSON.parse(json) json對象(數組)轉換爲js對象(數組)

Object擴展

Object.create(prototype[, descriptors]) : 建立一個新的對象
- 以指定對象爲原型建立新的對象
- 指定新的屬性, 並對屬性進行描述
  - value : 指定值
  - writable : 標識當前屬性值是不是可修改的, 默認爲true
  - get方法 : 用來獲得當前屬性值的回調函數
  - set方法 : 用來監視當前屬性值變化的回調函數
Object.defineProperties(object, descriptors) : 爲指定對象定義擴展多個屬性

Array擴展

Array.prototype.indexOf(value) : 獲得值在數組中的第一個下標
Array.prototype.lastIndexOf(value) : 獲得值在數組中的最後一個下標
Array.prototype.forEach(function(item, index){}) : 遍歷數組
Array.prototype.map(function(item, index){}) : 遍歷數組返回一個新的數組
Array.prototype.filter(function(item, index){}) : 遍歷過濾出一個子數組

Function擴展

Function.prototype.bind(obj)
- 將函數內的this綁定爲obj, 並將函數返回
區別bind()與call()和apply()?
- fn.bind(obj) : 指定函數中的this, 並返回函數
- fn.call(obj) : 指定函數中的this,並調用函數

Date擴展

Date.now() : 獲得當前時間值
...

對象的擴展通常經過原型

ES6

2個新的關鍵字

let/const
塊做用域
沒有變量提高
不能重複定義
const定義值不可變

變量的解構賦值

將包含多個數據的對象(數組)一次賦值給多個變量
數據源: 對象/數組
目標: {a, b}/[a, b]

各類數據類型的擴展

字符串
- 模板字符串
  - 做用: 簡化字符串的拼接
  - 模板字符串必須用``
  - 變化的部分使用${xxx}定義
- contains(str) : 判斷是否包含指定的字符串
- startsWith(str) : 判斷是否以指定字符串開頭
- endsWith(str) : 判斷是否以指定字符串結尾
- repeat(count) : 重複指定次數
對象
- 簡化的對象寫法
```
let name = 'Tom';
let age = 12;
let person = {
    name,
    age,
    setName (name) {
        this.name = name;
    }
};
```
- Object.assign(target, source1, source2..) : 將源對象的屬性複製到目標對象上
- Object.is(v1, v2) : 判斷2個數據是否徹底相等
- __proto__屬性 : 隱式原型屬性
數組
- Array.from(v) : 將僞數組對象或可遍歷對象轉換爲真數組
- Array.of(v1, v2, v3) : 將一系列值轉換成數組
- find(function(value, index, arr){return true}) : 找出第一個知足條件返回true的元素
- findIndex(function(value, index, arr){return true}) : 找出第一個知足條件返回true的元素下標
函數
- 箭頭函數
  - 用來定義匿名函數
  - 基本語法:
    - 沒有參數: () => console.log('xxxx')
    - 一個參數: i => i+2
    - 大於一個參數: (i,j) => i+j
    - 函數體不用大括號: 默認返回結果
    - 函數體若是有多個語句, 須要用{}包圍
  - 使用場景: 多用來定義回調函數
- 形參的默認值
  - 定義形參時指定其默認的值
- rest(可變)參數
  - 經過形參左側的...來表達, 取代arguments的使用
- 擴展運算符(...)
  - 能夠分解出數組或對象中的數據

set/Map容器結構

容器: 能保存多個數據的對象, 同時必須具有操做內部數據的方法
任意對象均可以做爲容器使用, 但有的對象不太適合做爲容器使用(如函數)
Set的特色: 保存多個value, value是不重複 ====>數組元素去重
Map的特色: 保存多個key--value, key是不重複, value是能夠重複的
API
- Set()/Set(arr) //arr是一維數組
- add(value)
- delete(value)
- clear();
- has(value)
- size
- Map()/Map(arr) //arr是二維數組
- set(key, value)
- delete(key)
- clear()
- has(key)
- size

for--of循環

能夠遍歷任何容器
數組
對象
僞/類對象
字符串
可迭代的對象

Promise

解決回調地獄(回調函數的層層嵌套, 編碼是不斷向右擴展, 閱讀性不好)
能以同步編碼的方式實現異步調用
在es6以前原生的js中是沒這種實現的, 一些第三方框架(jQuery)實現了promise

ES6中定義實現API:

// 1. 建立promise對象
var promise = new Promise(function(resolve, reject){ 
  // 作異步的操做 
  if(成功) { // 調用成功的回調
    resolve(result); 
  } else { // 調用失敗的回調
    reject(errorMsg); 
  } 
}) 
// 2. 調用promise對象的then()
promise.then(function(
  result => console.log(result), 
  errorMsg => alert(errorMsg)
))

模塊化 模塊化規範（CommonJS和ES6規範最經常使用）

CommonJS
- Node.js : 服務器端
- Browserify : 瀏覽器端也稱爲js的打包工具
- 基本語法:
  - 定義暴露模塊 : exports
```
exports.xxx = value
module.exports = value
```
    引入模塊 : require
```
var module = require('模塊名/模塊相對路徑')
```
- 引入模塊發生在何時?
  - Node : 運行時, 動態同步引入
  - Browserify : 在運行前對模塊進行編譯/轉譯/打包的處理(已經將依賴的模塊包含進來了), 運行的是打包生成的js, 運行時不存在須要再從遠程引入依賴模塊 ES6
ES6內置了模塊化的實現

基本語法

定義暴露模塊 : export

暴露一個對象:
```
export default 對象
```

暴露多個:

export var xxx = value1
export let yyy = value2

var xxx = value1
let yyy = value2
export {xxx, yyy}

引入使用模塊 : import

default模塊:

import xxx  from '模塊路徑/模塊名'

其它模塊

import {xxx, yyy} from '模塊路徑/模塊名'
import * as module1 from '模塊路徑/模塊名'

問題: 全部瀏覽器還不能直接識別ES6模塊化的語法
解決:
- 使用Babel將ES6--->ES5(使用了CommonJS) ----瀏覽器還不能直接支行
- 使用Browserify--->打包處理----瀏覽器能夠運行

ES7

指數運算符: **
Array.prototype.includes(value) : 判斷數組中是否包含指定value
區別方法的2種稱謂
- 靜態(工具)方法
  - Fun.xxx = function(){}
- 實例方法
  - 全部實例對象 : Fun.prototype.xxx = function(){} //xxx針對Fun的全部實例對象
  - 某個實例對象 : fun.xxx = function(){} //xxx只是針對fun對象