前言

一共有三篇，這一篇總結復習一下基礎知識。包括js中的作用域鏈和原型鏈、this的指向、對象的一些特性與方法。
內容來源于《你不知道的js》《阮一峰ES6入門》《JavaScript語言精粹》《JavaScript高級程序設計》《JavaScript設計模式》《JavaScript模式》《MDN web文檔》
本博客沒有什么有價值的知識，僅作總結梳理之用，初學者可以看看。

起步

編輯器：vscode
插件：Quokka

演示

對象

屬性

雖然在代碼中常用foo.a來訪問屬性值，但是還有[]這種方式，計算屬性名或Symbol屬性名都要用這種方式訪問

let a = 'a'
let s1 = Symbol('c')
let myObj = {
  [a+'b']: 'Hello',
  [s1]: 'World'
}
myObj['ab'] //? Hello
myObj[s1] //? World
Reflect.ownKeys(myObj) //?['ab',Symbol(c)]

函數對象

JS中函數是對象的子類型，區別在于函數可以被調用。因為函數是對象，所以函數可以像其他任何值一樣被使用，可以保存在對象、變量中，可以被當作參數傳給其他函數。可以擁有自己的屬性，并且屬性也可以是函數，可以函數調用函數。
函數被創建時有幾個自帶的屬性,值得注意的是prototype屬性每個函數都有這個屬性即使沒有將此函數進行過new構造調用。

function foo() {
  return 2
}
Object.getOwnPropertyDescriptors(foo) 
?????{ length: ?????
?????   { value: 1,?????
?????     writable: false,?????
?????     enumerable: false,?????
?????     configurable: true },?????
?????  name: ?????
?????   { value: 'foo',?????
?????     writable: false,?????
?????     enumerable: false,?????
?????     configurable: true },?????
?????  arguments: ?????
?????   { value: null,?????
?????     writable: false,?????
?????     enumerable: false,?????
?????     configurable: false },?????
?????  caller: ?????
?????   { value: null,?????
?????     writable: false,?????
?????     enumerable: false,?????
?????     configurable: false },?????
?????  prototype: ?????
?????   { value: foo {},?????
?????     writable: true,?????
?????     enumerable: false,?????
?????     configurable: false } }?????

方法與引用類型

當一個對象的屬性是一個函數的時候，普遍稱之為對象的方法。當調用這個函數時就是調用了這個對象的方法。實際來看，函數并不真的屬于某個對象，只是對象有一個指向某個函數對象的指針。
同樣的在對象的屬性中，保存對象、數組等和函數一樣都是保存的引用。
這就導致隨便設一個變量取得指向此屬性值的指針，它修改后的結果都會影響原對象。因為共用的一個值，當復制對象的時候如果簡單的復制下屬性，也會導致新對象與原對象共用一個值，兩者互相影響。

let foo = {
  a: [1,2,3]
}
let bar = foo.a
bar.push(4)
foo.a //? [1,2,3,4]

屬性描述符

從上文獲取函數屬性時可以看出，屬性有一些自己的性質。所有的屬性都用 屬性描述符（Property Descriptors） 來描述，譬如foo.a，因為它僅持有一個數據值所以又可以稱為“數據描述符”。下面的屬性可以用Object.defineProperty來進行設置

• 可寫性（Writable）控制改變屬性的能力
• 可配置性（Configurable）控制是否可以配置設置為false則是不可以的單向操作
• 可枚舉型（Enumerable）控制著一個屬性是否能在特定的對象屬性枚舉操作中出現
  當設置為false即使可以訪問也不會被枚舉

Getter和Setter

在foo.a屬性訪問的時候實際上是在對象上進行了[[Get]]操作,如果沒有找到對象屬性就會沿著原型鏈向上尋找，什么都沒找到會返回undefined，同理也有個用來設置或創建屬性的操作。JS中用來操作這兩個行為的函數稱之為取值函數（getter）和存值函數（setter）
當將一個屬性定義為擁有getter或setter，那么它的定義就成為了“訪問器描述符”（與“數據描述符”相對），

let foo = {
  get a() {
    return this.b
  },
  set a(arg) {
    this.b = arg*2
  }
}
foo.a = 2
foo.b //? 4
foo.a //? 4

枚舉與迭代

• Object.keys() 返回一個數組,包括對象自身的(不含繼承的)所有可枚舉屬性(不含Symbol屬性)
• for..in.. 循環遍歷對象自身的和繼承的可枚舉屬性(不含Symbol屬性)
• Object.getOwnPropertyNames(obj) 返回一個數組,包含對象自身的所有屬性(不含Symbol屬性,但是包括不可枚舉屬性).
• Reflect.ownKeys(obj) 返回一個數組,包含對象自身的所有屬性,不管屬性名是Symbol或字符串,也不管是否可枚舉.

一些方法

羅列一下后面要用到的

Object.create(proto, [propertiesObject]) 以proto為原型創建個新對象并加入到原型鏈中去
Object.getPrototypeOf() 返回指定對象的原型（內部_Prototype_屬性的值）。
Object.getOwnPropertyDescriptors(obj) 用來獲取一個對象的所有自身屬性的描述符。
Object.hasOwnProperty() 方法會返回一個布爾值，指示對象自身屬性中是否具有指定的屬性
Object.isPrototypeOf() 方法用于測試一個對象是否存在于另一個對象的原型鏈上。
Object.setPrototypeOf() 方法設置一個指定的對象的原型 ( 即內部_Prototype_屬性）到另一個對象因為性能問題不要直接設置而是用create創建。
for...in 語句以任意順序遍歷一個對象的可枚舉屬性。對于每個不同的屬性，語句都會被執行。
Object.entries()返回一個數組，其元素是與直接在object上找到的可枚舉屬性鍵值對相對應的數組。屬性的順序與通過手動循環對象的屬性值所給出的順序相同。

作用域與閉包

作用域

作用域控制著變量與參數的可見性和生命周期。
JS中的作用域可以理解成詞法作用域 就是在詞法分析時被定義的作用域。換句話說，也就是在寫代碼時，變量寫在哪，作用域就由此決定。

function foo(a) {
    let b = a * 2;
    function bar(c) {
        console.log( a, b, c );
    }
    bar(b * 3);
}
foo( 2 ); // 2 4 12

上述代碼作用域有三層，最內層bar中只包含c但是卻可以訪問上層的b。依靠的是在JS存在的作用域鏈，當尋找標識符時，在作用域鏈的規則下，從里向外尋找，找到第一個匹配停止，所以導致了內層訪問外層和內層對外層同名標識符造成遮蔽。

閉包

閉包：函數可以訪問它被創建時所處的上下文環境，被稱為閉包。
閉包：閉包是指有權訪問另一個函數作用域中變量的函數。
閉包：函數依然有對創建時環境的引用，這個引用稱之為閉包。
三種閉包的定義，讓人分不清閉包是函數、引用還是行為？但是意思都差不多

let fn
function foo() {
    let a = 2
    function baz() {
        console.log( a )
    }
    fn = baz
}
foo()
fn() //2

可以看到fn保留了baz創建時的作用域，假設分為三層，fn1、foo2、baz3。那過程就是在1層的fn通過在3層的baz訪問了在2層的a。

this指向

this的作用是傳遞對象引用，也就是改變函數運行的上下文（context）。
前面寫在JS中的作用域是詞法作用域，但是this卻和動態作用域類似

let obj = {
    id: "obj",
    sayId() {
    console.log(this.id)
  }
}
let id = "global"
obj.sayId() //obj
===================
let obj = {
    id: "obj",
    sayId() {
    console.log(id)
  }
}
let id = "global"
obj.sayId() //global
當沒用this時，就是普通的運行函數，即使函數是某個對象的方法，作用域也是在書寫時就確認了的。
這個函數在全局作用域中運行，取得的值也是全局作用域的。
但如果用了this那就會取調用點的值。

丟失this

也就是說代碼沒能如自己寫的那樣this指向。為什么會出現下面的情況呢。因為在傳遞函數參數時，發生了隱含的引用賦值

let obj = {
    id: "obj",
    sayId() {
    console.log(this.id)
  }
}
let id = "global"
obj.sayId() // obj
setTimeout( obj.sayId, 100 ) //undefined
=============
let bar = obj.sayId
bar() //? undefined
傳參時就發生了這樣的引用函數沒有被對象調用而是在全局作用域中運行。所以this丟失

五種綁定

• 隱含綁定
  誰調用this就指向誰。還有一種默認綁定在全局作用域調用會指向全局對象的，但是在嚴格模式下會返回undefined的。所以不歸類。

function foo() {
    console.log( this.a );
}
let obj = {
    a: 2,
    foo: foo
}
obj.foo(); // 2

• 明確綁定
  利用call() apply() bind()來強制this指向。

function foo() {
    console.log( this.a );
}
let obj = {
    a: 2
};
foo.call( obj ); // 2
===========================
function foo(something) {
    console.log( this.a, something )
    return this.a + something
}
let obj = {
    a: 2
}
let bar = foo.bind( obj )
let b = bar( 3 ) // 2 3
console.log( b );// 5
bind(..)返回一個硬編碼的新函數，它使用你指定的this環境來調用原本的函數。

• new綁定
  this指向new構造調用函數而返回的新對象

function foo(a) {
    this.a = a
}
let bar = new foo( 2 )
console.log( bar.a ) // 2

• super綁定
  這個指向當前對象的原型對象，也就是_proro_鏈上一層對象。
  下面代碼可以這樣理解super.a()等于foo.a.call(this)，super.x等于foo.x

let foo = {
  x: 1,
  a() {
    return this.x
  }
}
let bar = {
  x: 2,
  b() {
    return `super.a()結果是${super.a()},super.x結果是${super.x}`
  }
}
Object.setPrototypeOf(bar,foo)
bar.b() //? ???????????????super.a()結果是2,super.x結果是1?????

• 箭頭函數
  箭頭函數沒有自己的this，只會從自己的作用域鏈的上一層繼承this，并且固化無法再更改。也就說，this遵循的是詞法作用域規則，而不是調用點綁定規則。

let foo = {
  x:1,
  a(){
    return () => this.x //直接寫無法定義，只能用返回值的方法。
  },
  b() {
    return this.x
  }
}
let bar = {
  x: 2
}
let c = foo.a()
c() //? 1
foo.b() //? 1
foo.b.call(bar) //? 2
c.call(bar) //? 1無法改變

總結一下就是，this的調用取決于調用點，call等可以強制改變this，箭頭函數會固化詞法作用域this，new會指向創建的新對象，super則指向對象的原型對象。