言：在前端開(kāi)發(fā)中，this簡(jiǎn)直是又愛(ài)又恨的存在。this的確很強(qiáng)大，可以快速獲取到對(duì)象，但往往一不小心，就獲取不到想要的對(duì)象。那么this到底怎么使用呢？

在JavaScript「ES5」中，this的指代和其定義位置無(wú)關(guān)，只和其調(diào)用位置有關(guān)

不同的調(diào)用位置則this就代表不同的對(duì)象，但始終有個(gè)大原則：this指代的永遠(yuǎn)是當(dāng)前對(duì)象

接下來(lái)我們一起看看，開(kāi)發(fā)過(guò)程中this到底有哪幾種情況呢？

1、this在普通函數(shù)中調(diào)用

this在普通函數(shù)中調(diào)用,this指代全局對(duì)象window

// 全局變量
let name = '元歌'
function demo(){
    // 局部變量
    let name = '孫尚香';

    console.log(name);//孫尚香   優(yōu)先使用局部變量
    console.log(this.name);//元歌  ---此時(shí)this指代的是window對(duì)象   this.name則相當(dāng)于獲取window.name的值
}
demo()

2、this在對(duì)象內(nèi)調(diào)用

this指代當(dāng)前對(duì)象，這也是最重要的一種使用方法

1、普通自定義對(duì)象

let obj = {
    name:'翠花',
    age:18,
    say:function(){
        // console.log(this==obj)//true
        // console.log(this===obj)//true
        console.log(this.name+'今年芳齡：'+this.age)//推薦
    }
}
obj.say();

2、事件調(diào)用

<div id="box" onclick="changeColor(this)"></div>
function changeColor(obj){
    obj.style.background = 'pink'
}

this作為實(shí)參傳入函數(shù)內(nèi)，此時(shí)this則代表當(dāng)前觸發(fā)事件的元素

let oLi = document.querySelectorAll'li');
for(let i=0;i<oLi.length;i++){
// 函數(shù)會(huì)優(yōu)先加載,但是只有在js偵測(cè)到點(diǎn)擊時(shí)再觸發(fā)
    oLi[i].onclick = function(){
        this.style.background = 'orange'
    }
}

this此時(shí)代表當(dāng)前點(diǎn)擊的對(duì)象

3、事件中定時(shí)器或forEach等帶回調(diào)函數(shù)影響

let li = document.querySelectorAll('li');
for(let i=0;i<li.length;i++){
  li[i].onclick = function(){
    // 將this賦值給一個(gè)變量或者一個(gè)對(duì)象的屬性,使其能夠在普通函數(shù)內(nèi)使用
    // (行業(yè)習(xí)慣使用that  _this )
    let that = this;

    // 使用定時(shí)器,過(guò)1秒改變h2的內(nèi)容  
    //小心在時(shí)間內(nèi)函數(shù)的調(diào)用，比如：setTimeout setInterval forEach
    setTimeout(function(){
        console.log(this)//this當(dāng)前指代的是window,因?yàn)樵倨胀ê瘮?shù)中調(diào)用
        that.innerHTML = '待陽(yáng)光明媚，我們出門(mén)可好';
    },1000) 
}
}

當(dāng)然，如果掌握ES6箭頭函數(shù)的小伙伴，也可以將其轉(zhuǎn)換為箭頭函數(shù)

let li = document.querySelectorAll('li');
for(let i=0;i<li.length;i++){
  li[i].onclick = function(){
    setTimeout(() => {
        console.log(this)//this當(dāng)前點(diǎn)擊對(duì)象
        this.innerHTML = '待陽(yáng)光明媚，我們出門(mén)可好';
    },1000) 
}
}

3、this在構(gòu)造函數(shù)中調(diào)用，this指代的是實(shí)例化的對(duì)象

// 自定義構(gòu)造函數(shù)
function test(){
    this.name = '張三';
    this.age = 18;
    this.play = function(){
        console.log(this.name+'說(shuō)：源碼學(xué)習(xí)氛圍真好！')
    }
}

// this在構(gòu)造函數(shù)中被調(diào)用時(shí),this指代的是實(shí)例化的對(duì)象obj
let message = new test()

console.log(message)//{name: "張三", age: 18}
console.log(message.name);//張三
message.play();//張三說(shuō)：源碼學(xué)習(xí)氛圍真好

4、this在apply()、call()、bind()方法中調(diào)用

源：人民日?qǐng)?bào)

正在舉行的第五屆中國(guó)國(guó)際進(jìn)口博覽會(huì)，吸引來(lái)自127個(gè)國(guó)家和地區(qū)的企業(yè)參展，“高精尖”創(chuàng)新產(chǎn)品與“小而美”特色產(chǎn)品共同亮相。各方共同書(shū)寫(xiě)一個(gè)個(gè)開(kāi)放合作、共贏發(fā)展的故事，生動(dòng)詮釋了中國(guó)以實(shí)際行動(dòng)落實(shí)全球發(fā)展倡議、推動(dòng)全球共同發(fā)展的大國(guó)擔(dān)當(dāng)。

“為中國(guó)消費(fèi)者提供更豐富的選擇”

菲律賓的超甜蕉、金菠蘿，比利時(shí)的紅啤梨，泰國(guó)的香水椰……都樂(lè)亞洲控股私人有限公司的展臺(tái)上，一個(gè)巨大的“水果星球”吸引眾多觀眾駐足。連續(xù)5年參展，都樂(lè)公司持續(xù)把全球優(yōu)質(zhì)水果引進(jìn)中國(guó)市場(chǎng)。今年，公司把剛剛引進(jìn)中國(guó)市場(chǎng)的肯尼亞牛油果擺在展臺(tái)顯眼位置。

“當(dāng)?shù)弥夏醽嗸r食牛油果獲準(zhǔn)進(jìn)入中國(guó)市場(chǎng)時(shí)，作為進(jìn)口水果經(jīng)銷(xiāo)商，我們非常興奮，第一時(shí)間與肯尼亞當(dāng)?shù)剞r(nóng)場(chǎng)和包裝廠溝通，探討挖掘肯尼亞牛油果在中國(guó)的市場(chǎng)潛力。”都樂(lè)公司相關(guān)負(fù)責(zé)人王娜表示，“希望借助進(jìn)博會(huì)強(qiáng)大的溢出效應(yīng)，為中國(guó)消費(fèi)者提供更豐富的選擇。”

牛油果是肯尼亞重要的出口農(nóng)產(chǎn)品。今年8月，4個(gè)裝滿(mǎn)牛油果的集裝箱從肯尼亞利穆魯鎮(zhèn)的桑瑞普工廠出發(fā)，運(yùn)往中國(guó)的北京、上海、廣州等城市。這是非洲鮮食牛油果首次出口中國(guó)。消息傳開(kāi)后，當(dāng)?shù)孛癖姺N植牛油果的熱情高漲。肯尼亞牛油果協(xié)會(huì)首席執(zhí)行官歐內(nèi)斯特·穆托米表示：“中國(guó)擁有龐大的市場(chǎng)，會(huì)讓肯尼亞成千上萬(wàn)的牛油果種植戶(hù)受益。”

“這幾天，家樂(lè)福等知名合作商聞?dòng)嵍鴣?lái)，對(duì)進(jìn)博會(huì)上展出的肯尼亞牛油果非常感興趣。我們正在積極發(fā)送樣品，測(cè)試貨架期。如果順利，后續(xù)的銷(xiāo)量預(yù)計(jì)會(huì)非常可觀。”王娜說(shuō)。

從今年1月中肯簽署肯尼亞鮮食鱷梨（牛油果）輸華議定書(shū)，到6月中國(guó)海關(guān)總署允許符合檢疫要求的肯尼亞鮮食牛油果出口至中國(guó)；從8月鮮食牛油果從肯尼亞發(fā)往中國(guó)，到肯尼亞牛油果在本屆進(jìn)博會(huì)上成功展出……肯尼亞牛油果的進(jìn)博之旅，成為中國(guó)堅(jiān)定不移擴(kuò)大對(duì)外開(kāi)放，實(shí)現(xiàn)互利共贏的生動(dòng)體現(xiàn)。

“在中國(guó)市場(chǎng)發(fā)現(xiàn)更多發(fā)展機(jī)遇”

為支持最不發(fā)達(dá)國(guó)家參展，歷屆進(jìn)博會(huì)都為最不發(fā)達(dá)國(guó)家企業(yè)提供免費(fèi)攤位，以更好幫助這些國(guó)家推廣當(dāng)?shù)靥厣称贰鹘y(tǒng)工藝和旅游文化。今年，來(lái)自最不發(fā)達(dá)國(guó)家的企業(yè)簽約使用免費(fèi)攤位數(shù)量比上屆進(jìn)博會(huì)增加近一倍。

來(lái)自幾內(nèi)亞比紹的腰果今年首次在進(jìn)博會(huì)上展出。盡管沒(méi)有精美的包裝，擺在展臺(tái)上的一袋袋飽滿(mǎn)的腰果還是吸引了不少客商詢(xún)問(wèn)。

腰果出口是幾內(nèi)亞比紹大部分農(nóng)民的主要收入來(lái)源。“農(nóng)業(yè)合作可以為當(dāng)?shù)孛癖妿?lái)實(shí)實(shí)在在的好處。我們希望借助進(jìn)博會(huì)平臺(tái)，幫助當(dāng)?shù)剞r(nóng)戶(hù)推銷(xiāo)土特產(chǎn)。如果幾內(nèi)亞比紹的腰果能夠直接出口中國(guó)，當(dāng)?shù)孛癖姷氖杖腩A(yù)計(jì)將大幅提高。”幾內(nèi)亞比紹中國(guó)貿(mào)易商會(huì)副會(huì)長(zhǎng)吳詠濤說(shuō)。

幾內(nèi)亞比紹駐華大使安東尼奧·塞里弗·恩巴洛在接受記者采訪時(shí)表示，進(jìn)博會(huì)提供了一個(gè)很好的機(jī)會(huì)，讓幾內(nèi)亞比紹可以展示腰果這一主要出口產(chǎn)品。我們希望借此吸引更多投資者，幫助當(dāng)?shù)孛癖娫黾泳蜆I(yè)，并實(shí)現(xiàn)技術(shù)更新和產(chǎn)業(yè)升級(jí)。

同樣是首次參加進(jìn)博會(huì)，全巴基斯坦商業(yè)出口商協(xié)會(huì)參展商的名片上寫(xiě)著這樣一句話：“期望此次巴基斯坦展區(qū)不僅能促進(jìn)兩國(guó)經(jīng)濟(jì)發(fā)展、貿(mào)易往來(lái)，更成為兩國(guó)友好關(guān)系的見(jiàn)證。”祖母綠寶石、喜馬拉雅鹽、巴斯馬蒂大米……手掌大小的宣傳冊(cè)上，對(duì)這些產(chǎn)品的介紹別具特色。

全巴基斯坦商業(yè)出口商協(xié)會(huì)參展商負(fù)責(zé)人繆嵐告訴記者，申請(qǐng)到展位后，他們第一時(shí)間聯(lián)系了巴基斯坦駐華使領(lǐng)館，請(qǐng)其推薦巴基斯坦的特色產(chǎn)品。“希望巴基斯坦企業(yè)能夠通過(guò)進(jìn)博會(huì)在中國(guó)市場(chǎng)發(fā)現(xiàn)更多發(fā)展機(jī)遇。”

“帶動(dòng)大家一起致富”

與進(jìn)博會(huì)舉辦地國(guó)家會(huì)展中心（上海）僅一條馬路之隔，坐落著2018年設(shè)立的進(jìn)博會(huì)常年交易服務(wù)平臺(tái)——綠地全球商品貿(mào)易港。在貿(mào)易港二樓，有一家阿富汗進(jìn)口商品館，主要銷(xiāo)售阿富汗手工羊毛地毯。店主名叫阿里·法伊茲，來(lái)自阿富汗首都喀布爾。

今年是阿里連續(xù)第三年參加進(jìn)博會(huì)，他帶來(lái)了阿富汗的松子、葡萄干、石榴、藏紅花等特色產(chǎn)品。除在消費(fèi)品展區(qū)有展位外，他還在食品及農(nóng)業(yè)展區(qū)申請(qǐng)了展位，展位面積越來(lái)越大，聘用的員工也從去年的5人增加到了今年的11人。

接受采訪期間，阿里頻繁接到洽談生意的電話，不時(shí)有觀眾前來(lái)詢(xún)問(wèn)羊毛地毯的價(jià)格。“有一位客戶(hù)看了有關(guān)我們的報(bào)道，第一時(shí)間就來(lái)買(mǎi)走了最大的一塊地毯。”阿里說(shuō)，這塊地毯的銷(xiāo)售所得幾乎相當(dāng)于四五個(gè)阿富汗地毯編織工人家庭一年的總開(kāi)銷(xiāo)。

阿里的展臺(tái)上今年還多了兩個(gè)十分顯眼的透明櫥窗，里面展示著精美的傳統(tǒng)工藝品。這是阿里從阿富汗僅有的一家青金石盤(pán)工廠收來(lái)的。“這些阿富汗傳統(tǒng)工藝品很珍貴，工廠主卻無(wú)法找到好的銷(xiāo)路。得知我可以把產(chǎn)品帶到中國(guó)，這位工廠主滿(mǎn)懷期待地把這些傳統(tǒng)工藝品交給了我。”阿里說(shuō)。

與阿里一樣借助進(jìn)博會(huì)平臺(tái)幫助本國(guó)民眾增收的，還有來(lái)自尼泊爾的參展商弗蘭克。2020年首次參加進(jìn)博會(huì)，弗蘭克就看到了中國(guó)市場(chǎng)的廣闊商機(jī)。“我以前去過(guò)很多國(guó)家參展。參加進(jìn)博會(huì)后，我就不必東奔西跑推銷(xiāo)產(chǎn)品了，這里可以聯(lián)系到很多客戶(hù)和生產(chǎn)廠家，帶動(dòng)大家一起致富。”

第四屆進(jìn)博會(huì)后，弗蘭克在綠地全球商品貿(mào)易港開(kāi)了自己的店。弗蘭克介紹，他的企業(yè)與尼泊爾當(dāng)?shù)氐囊患沂止ぞ幙棌S合作，雇用了600多名女工，工人月收入可折合3000多元人民幣。“我們希望把更多尼泊爾產(chǎn)品帶到中國(guó)，幫助更多尼泊爾民眾增加收入。”

進(jìn)博會(huì)日益讓中國(guó)市場(chǎng)成為世界的市場(chǎng)、共享的市場(chǎng)、大家的市場(chǎng)。正是因?yàn)橛辛诉M(jìn)博會(huì)，阿里和弗蘭克的生意越來(lái)越好，帶動(dòng)本國(guó)更多民眾共創(chuàng)美好生活。

《 人民日?qǐng)?bào) 》（ 2022年11月10日 第 03 版）

、日期處理

1. 檢查日期是否有效

該方法用于檢測(cè)給出的日期是否有效：

const isDateValid = (...val) => !Number.isNaN(new Date(...val).valueOf());

isDateValid("December 17, 1995 03:24:00");  // true
復(fù)制代碼

2. 計(jì)算兩個(gè)日期之間的間隔

該方法用于計(jì)算兩個(gè)日期之間的間隔時(shí)間：

const dayDif = (date1, date2) => Math.ceil(Math.abs(date1.getTime() - date2.getTime()) / 86400000)
    
dayDif(new Date("2021-11-3"), new Date("2022-2-1"))  // 90
復(fù)制代碼

距離過(guò)年還有90天~

3. 查找日期位于一年中的第幾天

該方法用于檢測(cè)給出的日期位于今年的第幾天：

const dayOfYear = (date) => Math.floor((date - new Date(date.getFullYear(), 0, 0)) / 1000 / 60 / 60 / 24);

dayOfYear(new Date());   // 307
復(fù)制代碼

2021年已經(jīng)過(guò)去300多天了~

4. 時(shí)間格式化

該方法可以用于將時(shí)間轉(zhuǎn)化為hour:minutes:seconds的格式：

const timeFromDate = date => date.toTimeString().slice(0, 8);
    
timeFromDate(new Date(2021, 11, 2, 12, 30, 0));  // 12:30:00
timeFromDate(new Date());  // 返回當(dāng)前時(shí)間 09:00:00
復(fù)制代碼

二、字符串處理

1. 字符串首字母大寫(xiě)

該方法用于將英文字符串的首字母大寫(xiě)處理：

const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1)

capitalize("hello world")  // Hello world
復(fù)制代碼

2. 翻轉(zhuǎn)字符串

該方法用于將一個(gè)字符串進(jìn)行翻轉(zhuǎn)操作，返回翻轉(zhuǎn)后的字符串：

const reverse = str => str.split('').reverse().join('');

reverse('hello world');   // 'dlrow olleh'
復(fù)制代碼

3. 隨機(jī)字符串

該方法用于生成一個(gè)隨機(jī)的字符串：

const randomString = () => Math.random().toString(36).slice(2);

randomString();
復(fù)制代碼

4. 截?cái)嘧址?/h1>

該方法可以從指定長(zhǎng)度處截?cái)嘧址?

const truncateString = (string, length) => string.length < length ? string : `${string.slice(0, length - 3)}...`;

truncateString('Hi, I should be truncated because I am too loooong!', 36)   // 'Hi, I should be truncated because...'
復(fù)制代碼

5. 去除字符串中的HTML

該方法用于去除字符串中的HTML元素：

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
復(fù)制代碼

三、數(shù)組處理

1. 從數(shù)組中移除重復(fù)項(xiàng)

該方法用于移除數(shù)組中的重復(fù)項(xiàng)：

const removeDuplicates = (arr) => [...new Set(arr)];

console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
復(fù)制代碼

2. 判斷數(shù)組是否為空

該方法用于判斷一個(gè)數(shù)組是否為空數(shù)組，它將返回一個(gè)布爾值：

const isNotEmpty = arr => Array.isArray(arr) && arr.length > 0;

isNotEmpty([1, 2, 3]);  // true
復(fù)制代碼

3. 合并兩個(gè)數(shù)組

可以使用下面兩個(gè)方法來(lái)合并兩個(gè)數(shù)組：

const merge = (a, b) => a.concat(b);

const merge = (a, b) => [...a, ...b];
復(fù)制代碼

四、數(shù)字操作

1. 判斷一個(gè)數(shù)是奇數(shù)還是偶數(shù)

該方法用于判斷一個(gè)數(shù)字是奇數(shù)還是偶數(shù)：

const isEven = num => num % 2 === 0;

isEven(996); 
復(fù)制代碼

2. 獲得一組數(shù)的平均值

const average = (...args) => args.reduce((a, b) => a + b) / args.length;

average(1, 2, 3, 4, 5);   // 3
復(fù)制代碼

3. 獲取兩個(gè)整數(shù)之間的隨機(jī)整數(shù)

該方法用于獲取兩個(gè)整數(shù)之間的隨機(jī)整數(shù)

const random = (min, max) => Math.floor(Math.random() * (max - min + 1) + min);

random(1, 50);
復(fù)制代碼

4. 指定位數(shù)四舍五入

該方法用于將一個(gè)數(shù)字按照指定位進(jìn)行四舍五入：

const round = (n, d) => Number(Math.round(n + "e" + d) + "e-" + d)

round(1.005, 2) //1.01
round(1.555, 2) //1.56
復(fù)制代碼

五、顏色操作

1. 將RGB轉(zhuǎn)化為十六機(jī)制

該方法可以將一個(gè)RGB的顏色值轉(zhuǎn)化為16進(jìn)制值：

const rgbToHex = (r, g, b) => "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);

rgbToHex(255, 255, 255);  // '#ffffff'
復(fù)制代碼

2. 獲取隨機(jī)十六進(jìn)制顏色

該方法用于獲取一個(gè)隨機(jī)的十六進(jìn)制顏色值：

const randomHex = () => `#${Math.floor(Math.random() * 0xffffff).toString(16).padEnd(6, "0")}`;

randomHex();
復(fù)制代碼

六、瀏覽器操作

1. 復(fù)制內(nèi)容到剪切板

該方法使用 navigator.clipboard.writeText 來(lái)實(shí)現(xiàn)將文本復(fù)制到剪貼板：

const copyToClipboard = (text) => navigator.clipboard.writeText(text);

copyToClipboard("Hello World");
復(fù)制代碼

2. 清除所有cookie

該方法可以通過(guò)使用 document.cookie 來(lái)訪問(wèn) cookie 并清除存儲(chǔ)在網(wǎng)頁(yè)中的所有 cookie：

const clearCookies = document.cookie.split(';').forEach(cookie => document.cookie = cookie.replace(/^ +/, '').replace(/=.*/, `=;expires=${new Date(0).toUTCString()};path=/`));
復(fù)制代碼

3. 獲取選中的文本

該方法通過(guò)內(nèi)置的 getSelection 屬性獲取用戶(hù)選擇的文本：

const getSelectedText = () => window.getSelection().toString();

getSelectedText();
復(fù)制代碼

4. 檢測(cè)是否是黑暗模式

該方法用于檢測(cè)當(dāng)前的環(huán)境是否是黑暗模式，它是一個(gè)布爾值：

const isDarkMode = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches

console.log(isDarkMode)
復(fù)制代碼

5. 滾動(dòng)到頁(yè)面頂部

該方法用于在頁(yè)面中返回頂部：

const goToTop = () => window.scrollTo(0, 0);

goToTop();
復(fù)制代碼

6. 判斷當(dāng)前標(biāo)簽頁(yè)是否激活

該方法用于檢測(cè)當(dāng)前標(biāo)簽頁(yè)是否已經(jīng)激活：

const isTabInView = () => !document.hidden; 
復(fù)制代碼

7. 判斷當(dāng)前是否是蘋(píng)果設(shè)備

該方法用于檢測(cè)當(dāng)前的設(shè)備是否是蘋(píng)果的設(shè)備：

const isAppleDevice = () => /Mac|iPod|iPhone|iPad/.test(navigator.platform);

isAppleDevice();
復(fù)制代碼

8. 是否滾動(dòng)到頁(yè)面底部

該方法用于判斷頁(yè)面是否已經(jīng)底部：

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
復(fù)制代碼

9. 重定向到一個(gè)URL

該方法用于重定向到一個(gè)新的URL：

const redirect = url => location.href = url

redirect("https://www.google.com/")
復(fù)制代碼

10. 打開(kāi)瀏覽器打印框

該方法用于打開(kāi)瀏覽器的打印框：

const showPrintDialog = () => window.print()
復(fù)制代碼

七、其他操作

1. 隨機(jī)布爾值

該方法可以返回一個(gè)隨機(jī)的布爾值，使用Math.random()可以獲得0-1的隨機(jī)數(shù)，與0.5進(jìn)行比較，就有一半的概率獲得真值或者假值。

const randomBoolean = () => Math.random() >= 0.5;

randomBoolean();
復(fù)制代碼

2. 變量交換

可以使用以下形式在不適用第三個(gè)變量的情況下，交換兩個(gè)變量的值：

[foo, bar] = [bar, foo];
復(fù)制代碼

3. 獲取變量的類(lèi)型

該方法用于獲取一個(gè)變量的類(lèi)型：

const trueTypeOf = (obj) => Object.prototype.toString.call(obj).slice(8, -1).toLowerCase();

trueTypeOf('');     // string
trueTypeOf(0);      // number
trueTypeOf();       // undefined
trueTypeOf(null);   // null
trueTypeOf({});     // object
trueTypeOf([]);     // array
trueTypeOf(0);      // number
trueTypeOf(() => {});  // function
復(fù)制代碼

4. 華氏度和攝氏度之間的轉(zhuǎn)化

該方法用于攝氏度和華氏度之間的轉(zhuǎn)化：

const celsiusToFahrenheit = (celsius) => celsius * 9/5 + 32;
const fahrenheitToCelsius = (fahrenheit) => (fahrenheit - 32) * 5/9;

celsiusToFahrenheit(15);    // 59
celsiusToFahrenheit(0);     // 32
celsiusToFahrenheit(-20);   // -4
fahrenheitToCelsius(59);    // 15
fahrenheitToCelsius(32);    // 0
復(fù)制代碼

5. 檢測(cè)對(duì)象是否為空

該方法用于檢測(cè)一個(gè)JavaScript對(duì)象是否為空：

const isEmpty = obj => Reflect.ownKeys(obj).length === 0 && obj.constructor === Object;