言：在前端开发中，this简直是又爱又恨的存在。this的确很强大，可以快速获取到对象，但往往一不小心，就获取不到想要的对象。那么this到底怎么使用呢？

在JavaScript「ES5」中，this的指代和其定义位置无关，只和其调用位置有关

不同的调用位置则this就代表不同的对象，但始终有个大原则：this指代的永远是当前对象

接下来我们一起看看，开发过程中this到底有哪几种情况呢？

1、this在普通函数中调用

this在普通函数中调用,this指代全局对象window

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

    console.log(name);//孙尚香   优先使用局部变量
    console.log(this.name);//元歌  ---此时this指代的是window对象   this.name则相当于获取window.name的值
}
demo()

2、this在对象内调用

this指代当前对象，这也是最重要的一种使用方法

1、普通自定义对象

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、事件调用

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

this作为实参传入函数内，此时this则代表当前触发事件的元素

let oLi = document.querySelectorAll'li');
for(let i=0;i<oLi.length;i++){
// 函数会优先加载,但是只有在js侦测到点击时再触发
    oLi[i].onclick = function(){
        this.style.background = 'orange'
    }
}

this此时代表当前点击的对象

3、事件中定时器或forEach等带回调函数影响

let li = document.querySelectorAll('li');
for(let i=0;i<li.length;i++){
  li[i].onclick = function(){
    // 将this赋值给一个变量或者一个对象的属性,使其能够在普通函数内使用
    // (行业习惯使用that  _this )
    let that = this;

    // 使用定时器,过1秒改变h2的内容  
    //小心在时间内函数的调用，比如：setTimeout setInterval forEach
    setTimeout(function(){
        console.log(this)//this当前指代的是window,因为再普通函数中调用
        that.innerHTML = '待阳光明媚，我们出门可好';
    },1000) 
}
}

当然，如果掌握ES6箭头函数的小伙伴，也可以将其转换为箭头函数

let li = document.querySelectorAll('li');
for(let i=0;i<li.length;i++){
  li[i].onclick = function(){
    setTimeout(() => {
        console.log(this)//this当前点击对象
        this.innerHTML = '待阳光明媚，我们出门可好';
    },1000) 
}
}

3、this在构造函数中调用，this指代的是实例化的对象

// 自定义构造函数
function test(){
    this.name = '张三';
    this.age = 18;
    this.play = function(){
        console.log(this.name+'说：源码学习氛围真好！')
    }
}

// this在构造函数中被调用时,this指代的是实例化的对象obj
let message = new test()

console.log(message)//{name: "张三", age: 18}
console.log(message.name);//张三
message.play();//张三说：源码学习氛围真好

4、this在apply()、call()、bind()方法中调用

源：人民日报

正在举行的第五届中国国际进口博览会，吸引来自127个国家和地区的企业参展，“高精尖”创新产品与“小而美”特色产品共同亮相。各方共同书写一个个开放合作、共赢发展的故事，生动诠释了中国以实际行动落实全球发展倡议、推动全球共同发展的大国担当。

“为中国消费者提供更丰富的选择”

菲律宾的超甜蕉、金菠萝，比利时的红啤梨，泰国的香水椰……都乐亚洲控股私人有限公司的展台上，一个巨大的“水果星球”吸引众多观众驻足。连续5年参展，都乐公司持续把全球优质水果引进中国市场。今年，公司把刚刚引进中国市场的肯尼亚牛油果摆在展台显眼位置。

“当得知肯尼亚鲜食牛油果获准进入中国市场时，作为进口水果经销商，我们非常兴奋，第一时间与肯尼亚当地农场和包装厂沟通，探讨挖掘肯尼亚牛油果在中国的市场潜力。”都乐公司相关负责人王娜表示，“希望借助进博会强大的溢出效应，为中国消费者提供更丰富的选择。”

牛油果是肯尼亚重要的出口农产品。今年8月，4个装满牛油果的集装箱从肯尼亚利穆鲁镇的桑瑞普工厂出发，运往中国的北京、上海、广州等城市。这是非洲鲜食牛油果首次出口中国。消息传开后，当地民众种植牛油果的热情高涨。肯尼亚牛油果协会首席执行官欧内斯特·穆托米表示：“中国拥有庞大的市场，会让肯尼亚成千上万的牛油果种植户受益。”

“这几天，家乐福等知名合作商闻讯而来，对进博会上展出的肯尼亚牛油果非常感兴趣。我们正在积极发送样品，测试货架期。如果顺利，后续的销量预计会非常可观。”王娜说。

从今年1月中肯签署肯尼亚鲜食鳄梨（牛油果）输华议定书，到6月中国海关总署允许符合检疫要求的肯尼亚鲜食牛油果出口至中国；从8月鲜食牛油果从肯尼亚发往中国，到肯尼亚牛油果在本届进博会上成功展出……肯尼亚牛油果的进博之旅，成为中国坚定不移扩大对外开放，实现互利共赢的生动体现。

“在中国市场发现更多发展机遇”

为支持最不发达国家参展，历届进博会都为最不发达国家企业提供免费摊位，以更好帮助这些国家推广当地特色食品、传统工艺和旅游文化。今年，来自最不发达国家的企业签约使用免费摊位数量比上届进博会增加近一倍。

来自几内亚比绍的腰果今年首次在进博会上展出。尽管没有精美的包装，摆在展台上的一袋袋饱满的腰果还是吸引了不少客商询问。

腰果出口是几内亚比绍大部分农民的主要收入来源。“农业合作可以为当地民众带来实实在在的好处。我们希望借助进博会平台，帮助当地农户推销土特产。如果几内亚比绍的腰果能够直接出口中国，当地民众的收入预计将大幅提高。”几内亚比绍中国贸易商会副会长吴咏涛说。

几内亚比绍驻华大使安东尼奥·塞里弗·恩巴洛在接受记者采访时表示，进博会提供了一个很好的机会，让几内亚比绍可以展示腰果这一主要出口产品。我们希望借此吸引更多投资者，帮助当地民众增加就业，并实现技术更新和产业升级。

同样是首次参加进博会，全巴基斯坦商业出口商协会参展商的名片上写着这样一句话：“期望此次巴基斯坦展区不仅能促进两国经济发展、贸易往来，更成为两国友好关系的见证。”祖母绿宝石、喜马拉雅盐、巴斯马蒂大米……手掌大小的宣传册上，对这些产品的介绍别具特色。

全巴基斯坦商业出口商协会参展商负责人缪岚告诉记者，申请到展位后，他们第一时间联系了巴基斯坦驻华使领馆，请其推荐巴基斯坦的特色产品。“希望巴基斯坦企业能够通过进博会在中国市场发现更多发展机遇。”

“带动大家一起致富”

与进博会举办地国家会展中心（上海）仅一条马路之隔，坐落着2018年设立的进博会常年交易服务平台——绿地全球商品贸易港。在贸易港二楼，有一家阿富汗进口商品馆，主要销售阿富汗手工羊毛地毯。店主名叫阿里·法伊兹，来自阿富汗首都喀布尔。

今年是阿里连续第三年参加进博会，他带来了阿富汗的松子、葡萄干、石榴、藏红花等特色产品。除在消费品展区有展位外，他还在食品及农业展区申请了展位，展位面积越来越大，聘用的员工也从去年的5人增加到了今年的11人。

接受采访期间，阿里频繁接到洽谈生意的电话，不时有观众前来询问羊毛地毯的价格。“有一位客户看了有关我们的报道，第一时间就来买走了最大的一块地毯。”阿里说，这块地毯的销售所得几乎相当于四五个阿富汗地毯编织工人家庭一年的总开销。

阿里的展台上今年还多了两个十分显眼的透明橱窗，里面展示着精美的传统工艺品。这是阿里从阿富汗仅有的一家青金石盘工厂收来的。“这些阿富汗传统工艺品很珍贵，工厂主却无法找到好的销路。得知我可以把产品带到中国，这位工厂主满怀期待地把这些传统工艺品交给了我。”阿里说。

与阿里一样借助进博会平台帮助本国民众增收的，还有来自尼泊尔的参展商弗兰克。2020年首次参加进博会，弗兰克就看到了中国市场的广阔商机。“我以前去过很多国家参展。参加进博会后，我就不必东奔西跑推销产品了，这里可以联系到很多客户和生产厂家，带动大家一起致富。”

第四届进博会后，弗兰克在绿地全球商品贸易港开了自己的店。弗兰克介绍，他的企业与尼泊尔当地的一家手工编织厂合作，雇用了600多名女工，工人月收入可折合3000多元人民币。“我们希望把更多尼泊尔产品带到中国，帮助更多尼泊尔民众增加收入。”

进博会日益让中国市场成为世界的市场、共享的市场、大家的市场。正是因为有了进博会，阿里和弗兰克的生意越来越好，带动本国更多民众共创美好生活。

《 人民日报 》（ 2022年11月10日 第 03 版）

、日期处理

1. 检查日期是否有效

该方法用于检测给出的日期是否有效：

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

isDateValid("December 17, 1995 03:24:00");  // true
复制代码

2. 计算两个日期之间的间隔

该方法用于计算两个日期之间的间隔时间：

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
复制代码

距离过年还有90天~

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

该方法用于检测给出的日期位于今年的第几天：

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

dayOfYear(new Date());   // 307
复制代码

2021年已经过去300多天了~

4. 时间格式化

该方法可以用于将时间转化为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());  // 返回当前时间 09:00:00
复制代码

二、字符串处理

1. 字符串首字母大写

该方法用于将英文字符串的首字母大写处理：

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

capitalize("hello world")  // Hello world
复制代码

2. 翻转字符串

该方法用于将一个字符串进行翻转操作，返回翻转后的字符串：

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

reverse('hello world');   // 'dlrow olleh'
复制代码

3. 随机字符串

该方法用于生成一个随机的字符串：

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

randomString();
复制代码

4. 截断字符串

该方法可以从指定长度处截断字符串:

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...'
复制代码

5. 去除字符串中的HTML

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

const stripHtml = html => (new DOMParser().parseFromString(html, 'text/html')).body.textContent || '';
复制代码

三、数组处理

1. 从数组中移除重复项

该方法用于移除数组中的重复项：

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

console.log(removeDuplicates([1, 2, 2, 3, 3, 4, 4, 5, 5, 6]));
复制代码

2. 判断数组是否为空

该方法用于判断一个数组是否为空数组，它将返回一个布尔值：

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

isNotEmpty([1, 2, 3]);  // true
复制代码

3. 合并两个数组

可以使用下面两个方法来合并两个数组：

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

const merge = (a, b) => [...a, ...b];
复制代码

四、数字操作

1. 判断一个数是奇数还是偶数

该方法用于判断一个数字是奇数还是偶数：

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

isEven(996); 
复制代码

2. 获得一组数的平均值

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

average(1, 2, 3, 4, 5);   // 3
复制代码

3. 获取两个整数之间的随机整数

该方法用于获取两个整数之间的随机整数

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

random(1, 50);
复制代码

4. 指定位数四舍五入

该方法用于将一个数字按照指定位进行四舍五入：

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

round(1.005, 2) //1.01
round(1.555, 2) //1.56
复制代码

五、颜色操作

1. 将RGB转化为十六机制

该方法可以将一个RGB的颜色值转化为16进制值：

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

rgbToHex(255, 255, 255);  // '#ffffff'
复制代码

2. 获取随机十六进制颜色

该方法用于获取一个随机的十六进制颜色值：

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

randomHex();
复制代码

六、浏览器操作

1. 复制内容到剪切板

该方法使用 navigator.clipboard.writeText 来实现将文本复制到剪贴板：

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

copyToClipboard("Hello World");
复制代码

2. 清除所有cookie

该方法可以通过使用 document.cookie 来访问 cookie 并清除存储在网页中的所有 cookie：

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

3. 获取选中的文本

该方法通过内置的 getSelection 属性获取用户选择的文本：

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

getSelectedText();
复制代码

4. 检测是否是黑暗模式

该方法用于检测当前的环境是否是黑暗模式，它是一个布尔值：

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

console.log(isDarkMode)
复制代码

5. 滚动到页面顶部

该方法用于在页面中返回顶部：

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

goToTop();
复制代码

6. 判断当前标签页是否激活

该方法用于检测当前标签页是否已经激活：

const isTabInView = () => !document.hidden; 
复制代码

7. 判断当前是否是苹果设备

该方法用于检测当前的设备是否是苹果的设备：

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

isAppleDevice();
复制代码

8. 是否滚动到页面底部

该方法用于判断页面是否已经底部：

const scrolledToBottom = () => document.documentElement.clientHeight + window.scrollY >= document.documentElement.scrollHeight;
复制代码

9. 重定向到一个URL

该方法用于重定向到一个新的URL：

const redirect = url => location.href = url

redirect("https://www.google.com/")
复制代码

10. 打开浏览器打印框

该方法用于打开浏览器的打印框：

const showPrintDialog = () => window.print()
复制代码

七、其他操作

1. 随机布尔值

该方法可以返回一个随机的布尔值，使用Math.random()可以获得0-1的随机数，与0.5进行比较，就有一半的概率获得真值或者假值。

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

randomBoolean();
复制代码

2. 变量交换

可以使用以下形式在不适用第三个变量的情况下，交换两个变量的值：

[foo, bar] = [bar, foo];
复制代码

3. 获取变量的类型

该方法用于获取一个变量的类型：

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
复制代码

4. 华氏度和摄氏度之间的转化

该方法用于摄氏度和华氏度之间的转化：

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
复制代码

5. 检测对象是否为空

该方法用于检测一个JavaScript对象是否为空：

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