摘要：構(gòu)造函數(shù)返回值是或，這種情況下指向的是返回的對(duì)象。并執(zhí)行了構(gòu)造函數(shù)中的方法如果函數(shù)沒(méi)有返回其他對(duì)象，那么指向這個(gè)新對(duì)象，否則指向構(gòu)造函數(shù)中返回的對(duì)象。對(duì)于文檔來(lái)說(shuō)應(yīng)當(dāng)是唯一的。的值意味著其不可能是基本數(shù)據(jù)類型。

不積跬步無(wú)以至千里。

Step-By-Step (點(diǎn)擊進(jìn)入項(xiàng)目) 是我于 2019-05-20 開(kāi)始的一個(gè)項(xiàng)目，項(xiàng)目愿景：一步一個(gè)腳印，量變引起質(zhì)變。

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

答題不是目的，不希望大家僅僅是簡(jiǎn)單的搜索答案，復(fù)制粘貼到issue下。更多的是希望大家及時(shí)查漏補(bǔ)缺 / 鞏固相關(guān)知識(shí)。

更多優(yōu)質(zhì)文章可戳: https://github.com/YvetteLau/...

如果用一句話說(shuō)明 this 的指向，那么即是: 誰(shuí)調(diào)用它，this 就指向誰(shuí)。

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

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

瀏覽器環(huán)境：無(wú)論是否在嚴(yán)格模式下，在全局執(zhí)行環(huán)境中（在任何函數(shù)體外部）this 都指向全局對(duì)象 window;

node 環(huán)境：無(wú)論是否在嚴(yán)格模式下，在全局執(zhí)行環(huán)境中（在任何函數(shù)體外部），this 都是空對(duì)象 {};

如果是 new 綁定，并且構(gòu)造函數(shù)中沒(méi)有返回 function 或者是 object，那么 this 指向這個(gè)新對(duì)象。如下:

構(gòu)造函數(shù)返回值不是 function 或 object。

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

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

構(gòu)造函數(shù)返回值是 function 或 object，這種情況下 this 指向的是返回的對(duì)象。

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


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

你可以想知道為什么會(huì)這樣？我們來(lái)看一下 new 的實(shí)現(xiàn)原理:

創(chuàng)建一個(gè)新對(duì)象。

這個(gè)新對(duì)象會(huì)被執(zhí)行 [[原型]] 連接。

屬性和方法被加入到 this 引用的對(duì)象中。并執(zhí)行了構(gòu)造函數(shù)中的方法.

如果函數(shù)沒(méi)有返回其他對(duì)象，那么 this 指向這個(gè)新對(duì)象，否則 this 指向構(gòu)造函數(shù)中返回的對(duì)象。

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 傳入的第一個(gè)參數(shù)值是 undefined 或者 null，嚴(yán)格模式下 this 的值為傳入的值 null /undefined。非嚴(yán)格模式下，實(shí)際應(yīng)用的默認(rèn)綁定規(guī)則，this 指向全局對(duì)象(node環(huán)境為global，瀏覽器環(huán)境為window)

function info(){
    //node環(huán)境中:非嚴(yán)格模式 global，嚴(yán)格模式為null
    //瀏覽器環(huán)境中:非嚴(yán)格模式 window，嚴(yán)格模式為null
    console.log(this);
    console.log(this.age);
}
var person = {
    age: 20,
    info
}
var age = 28;
var info = person.info;
//嚴(yán)格模式拋出錯(cuò)誤；
//非嚴(yán)格模式，node下輸出undefined（因?yàn)槿值腶ge不會(huì)掛在 global 上）
//非嚴(yán)格模式。瀏覽器環(huán)境下輸出 28（因?yàn)槿值腶ge會(huì)掛在 window 上）
info.call(null);

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

非嚴(yán)格模式： node環(huán)境，執(zhí)行全局對(duì)象 global，瀏覽器環(huán)境，執(zhí)行全局對(duì)象 window。

嚴(yán)格模式：執(zhí)行 undefined

function info(){
    console.log(this.age);
}
var age = 28;
//嚴(yán)格模式；拋錯(cuò)
//非嚴(yán)格模式，node下輸出 undefined（因?yàn)槿值腶ge不會(huì)掛在 global 上）
//非嚴(yán)格模式。瀏覽器環(huán)境下輸出 28（因?yàn)槿值腶ge不會(huì)掛在 window 上）
//嚴(yán)格模式拋出，因?yàn)?this 此時(shí)是 undefined
info(); 

箭頭函數(shù)沒(méi)有自己的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

點(diǎn)擊查看更多

Boolean

String

Number

Undefined

Null

Symbol(ES6新增)

ES10新增了一種基本數(shù)據(jù)類型：BigInt

復(fù)雜數(shù)據(jù)類型只有一種: Object

null 不是一個(gè)對(duì)象，盡管 typeof null 輸出的是 object，這是一個(gè)歷史遺留問(wèn)題，JS 的最初版本中使用的是 32 位系統(tǒng)，為了性能考慮使用低位存儲(chǔ)變量的類型信息，000 開(kāi)頭代表是對(duì)象，null 表示為全零，所以將它錯(cuò)誤的判斷為 object 。

內(nèi)存的分配不同

基本數(shù)據(jù)類型存儲(chǔ)在棧中。

復(fù)雜數(shù)據(jù)類型存儲(chǔ)在堆中，棧中存儲(chǔ)的變量，是指向堆中的引用地址。

訪問(wèn)機(jī)制不同

基本數(shù)據(jù)類型是按值訪問(wèn)

復(fù)雜數(shù)據(jù)類型按引用訪問(wèn)，JS不允許直接訪問(wèn)保存在堆內(nèi)存中的對(duì)象，在訪問(wèn)一個(gè)對(duì)象時(shí)，首先得到的是這個(gè)對(duì)象在堆內(nèi)存中的地址，然后再按照這個(gè)地址去獲得這個(gè)對(duì)象中的值。

復(fù)制變量時(shí)不同(a=b)

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

復(fù)雜數(shù)據(jù)類型：a=b;將b保存的對(duì)象內(nèi)存的引用地址賦值給了新變量a;a和b指向了同一個(gè)堆內(nèi)存地址，其中一個(gè)值發(fā)生了改變，另一個(gè)也會(huì)改變。

let b = {
    age: 10
}

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

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

函數(shù)傳參都是按值傳遞(棧中的存儲(chǔ)的內(nèi)容)：基本數(shù)據(jù)類型，拷貝的是值；復(fù)雜數(shù)據(jù)類型，拷貝的是引用地址

//基本數(shù)據(jù)類型
let b = 10

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

//復(fù)雜數(shù)據(jù)類型
let b = {
    age: 10
}

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

點(diǎn)擊查看更多

語(yǔ)義化意味著顧名思義，HTML5的語(yǔ)義化指的是合理正確的使用語(yǔ)義化的標(biāo)簽來(lái)創(chuàng)建頁(yè)面結(jié)構(gòu)，如 header,footer,nav，從標(biāo)簽上即可以直觀的知道這個(gè)標(biāo)簽的作用，而不是濫用div。

代碼結(jié)構(gòu)清晰，易于閱讀，利于開(kāi)發(fā)和維護(hù)

方便其他設(shè)備解析（如屏幕閱讀器）根據(jù)語(yǔ)義渲染網(wǎng)頁(yè)。

有利于搜索引擎優(yōu)化（SEO），搜索引擎爬蟲(chóng)會(huì)根據(jù)不同的標(biāo)簽來(lái)賦予不同的權(quán)重

title：主要用于頁(yè)面的頭部的信息介紹

header：定義文檔的頁(yè)眉

nav：主要用于頁(yè)面導(dǎo)航

main：規(guī)定文檔的主要內(nèi)容。對(duì)于文檔來(lái)說(shuō)應(yīng)當(dāng)是唯一的。它不應(yīng)包含在文檔中重復(fù)出現(xiàn)的內(nèi)容，比如側(cè)欄、導(dǎo)航欄、版權(quán)信息、站點(diǎn)標(biāo)志或搜索表單。

article：獨(dú)立的自包含內(nèi)容

h1~h6：定義標(biāo)題

ul: 用來(lái)定義無(wú)序列表

ol: 用來(lái)定義有序列表

address：定義文檔或文章的作者/擁有者的聯(lián)系信息。

canvas：用于繪制圖像

dialog：定義一個(gè)對(duì)話框、確認(rèn)框或窗口

aside：定義其所處內(nèi)容之外的內(nèi)容。