摘要：構造函數返回值是或，這種情況下指向的是返回的對象。并執行了構造函數中的方法如果函數沒有返回其他對象，那么指向這個新對象，否則指向構造函數中返回的對象。對于文檔來說應當是唯一的。的值意味著其不可能是基本數據類型。

不積跬步無以至千里。

Step-By-Step (點擊進入項目) 是我于 2019-05-20 開始的一個項目，項目愿景：一步一個腳印，量變引起質變。

Step-By-Step 僅會在工作日發布面試題，主要考慮到部分小伙伴平時工作較為繁忙，或周末有出游計劃。每個周末我會仔細閱讀大家的答案，整理最一份較優答案出來，因本人水平有限，有誤的地方，大家及時指正。參與答題的小伙伴，可以對比自己的回答。

答題不是目的，不希望大家僅僅是簡單的搜索答案，復制粘貼到issue下。更多的是希望大家及時查漏補缺 / 鞏固相關知識。

更多優質文章可戳: https://github.com/YvetteLau/...

如果用一句話說明 this 的指向，那么即是: 誰調用它，this 就指向誰。

但是僅通過這句話，我們很多時候并不能準確判斷 this 的指向。因此我們需要借助一些規則去幫助自己：

this 的指向可以按照以下順序判斷:

瀏覽器環境：無論是否在嚴格模式下，在全局執行環境中（在任何函數體外部）this 都指向全局對象 window;

node 環境：無論是否在嚴格模式下，在全局執行環境中（在任何函數體外部），this 都是空對象 {};

如果是 new 綁定，并且構造函數中沒有返回 function 或者是 object，那么 this 指向這個新對象。如下:

構造函數返回值不是 function 或 object。

function Super(age) {
    this.age = age;
}

let instance = new Super("26");
console.log(instance.age); //26

構造函數返回值是 function 或 object，這種情況下 this 指向的是返回的對象。

function Super(age) {
    this.age = age;
    let obj = {a: "2"};
    return obj;
}


let instance = new Super("hello");
console.log(instance.age); //undefined

你可以想知道為什么會這樣？我們來看一下 new 的實現原理:

創建一個新對象。

這個新對象會被執行 [[原型]] 連接。

屬性和方法被加入到 this 引用的對象中。并執行了構造函數中的方法.

如果函數沒有返回其他對象，那么 this 指向這個新對象，否則 this 指向構造函數中返回的對象。

function new(func) {
    let target = {};
    target.__proto__ = func.prototype;
    let res = func.call(target);
    //排除 null 的情況
    if (res && typeof(res) == "object" || typeof(res) == "function") {
        return res;
    }
    return target;
}

function info(){
    console.log(this.age);
}
var person = {
    age: 20,
    info
}
var age = 28;
var info = person.info;
info.call(person);   //20
info.apply(person);  //20
info.bind(person)(); //20

這里同樣需要注意一種特殊情況，如果 call,apply 或者 bind 傳入的第一個參數值是 undefined 或者 null，嚴格模式下 this 的值為傳入的值 null /undefined。非嚴格模式下，實際應用的默認綁定規則，this 指向全局對象(node環境為global，瀏覽器環境為window)

function info(){
    //node環境中:非嚴格模式 global，嚴格模式為null
    //瀏覽器環境中:非嚴格模式 window，嚴格模式為null
    console.log(this);
    console.log(this.age);
}
var person = {
    age: 20,
    info
}
var age = 28;
var info = person.info;
//嚴格模式拋出錯誤；
//非嚴格模式，node下輸出undefined（因為全局的age不會掛在 global 上）
//非嚴格模式。瀏覽器環境下輸出 28（因為全局的age會掛在 window 上）
info.call(null);

function info(){
    console.log(this.age);
}
var person = {
    age: 20,
    info
}
var age = 28;
person.info(); //20;執行的是隱式綁定

非嚴格模式： node環境，執行全局對象 global，瀏覽器環境，執行全局對象 window。

嚴格模式：執行 undefined

function info(){
    console.log(this.age);
}
var age = 28;
//嚴格模式；拋錯
//非嚴格模式，node下輸出 undefined（因為全局的age不會掛在 global 上）
//非嚴格模式。瀏覽器環境下輸出 28（因為全局的age不會掛在 window 上）
//嚴格模式拋出，因為 this 此時是 undefined
info(); 

箭頭函數沒有自己的this，繼承外層上下文綁定的this。

let obj = {
    age: 20,
    info: function() {
        return () => {
            console.log(this.age); //this繼承的是外層上下文綁定的this
        }
    }
}

let person = {age: 28};
let info = obj.info();
info(); //20

let info2 = obj.info.call(person);
info2(); //28

點擊查看更多

Boolean

String

Number

Undefined

Null

Symbol(ES6新增)

ES10新增了一種基本數據類型：BigInt

復雜數據類型只有一種: Object

null 不是一個對象，盡管 typeof null 輸出的是 object，這是一個歷史遺留問題，JS 的最初版本中使用的是 32 位系統，為了性能考慮使用低位存儲變量的類型信息，000 開頭代表是對象，null 表示為全零，所以將它錯誤的判斷為 object 。

內存的分配不同

基本數據類型存儲在棧中。

復雜數據類型存儲在堆中，棧中存儲的變量，是指向堆中的引用地址。

訪問機制不同

基本數據類型是按值訪問

復雜數據類型按引用訪問，JS不允許直接訪問保存在堆內存中的對象，在訪問一個對象時，首先得到的是這個對象在堆內存中的地址，然后再按照這個地址去獲得這個對象中的值。

復制變量時不同(a=b)

基本數據類型：a=b;是將b中保存的原始值的副本賦值給新變量a，a和b完全獨立，互不影響

復雜數據類型：a=b;將b保存的對象內存的引用地址賦值給了新變量a;a和b指向了同一個堆內存地址，其中一個值發生了改變，另一個也會改變。

let b = {
    age: 10
}

let a = b;
a.age = 20;
console.log(a); //{ age: 20 }

參數傳遞的不同(實參/形參)

函數傳參都是按值傳遞(棧中的存儲的內容)：基本數據類型，拷貝的是值；復雜數據類型，拷貝的是引用地址

//基本數據類型
let b = 10

function change(info) {
    info=20;
}
//info=b;基本數據類型，拷貝的是值得副本，二者互不干擾
change(b);
console.log(b);//10

//復雜數據類型
let b = {
    age: 10
}

function change(info) {
    info.age = 20;
}
//info=b;根據第三條差異，可以看出，拷貝的是地址的引用，修改互相影響。
change(b);
console.log(b);//{ age: 20 }

點擊查看更多

語義化意味著顧名思義，HTML5的語義化指的是合理正確的使用語義化的標簽來創建頁面結構，如 header,footer,nav，從標簽上即可以直觀的知道這個標簽的作用，而不是濫用div。

代碼結構清晰，易于閱讀，利于開發和維護

方便其他設備解析（如屏幕閱讀器）根據語義渲染網頁。

有利于搜索引擎優化（SEO），搜索引擎爬蟲會根據不同的標簽來賦予不同的權重

title：主要用于頁面的頭部的信息介紹

header：定義文檔的頁眉

nav：主要用于頁面導航

main：規定文檔的主要內容。對于文檔來說應當是唯一的。它不應包含在文檔中重復出現的內容，比如側欄、導航欄、版權信息、站點標志或搜索表單。

article：獨立的自包含內容

h1~h6：定義標題

ul: 用來定義無序列表

ol: 用來定義有序列表

address：定義文檔或文章的作者/擁有者的聯系信息。

canvas：用于繪制圖像

dialog：定義一個對話框、確認框或窗口

aside：定義其所處內容之外的內容。