JS入门到精通详解（10）
this指向详解
//1. this所在function被哪个对象调用了，this就指向这个调用的对象。
//2. 如果function没有明确的调用对象，那么 this指向window
this出现在全局范围调用函数时，永远指向window (this所在的function没有被明确的对象调用时，this指向window)
var Car = function() {
console.log(this); // window
console.log(this.Car==window.Car,Car==window.Car); // true true
}
Car();this出现在函数作用域严格模式中，永远不会指向window
函数中使用ES5的严格模式‘use strict'，this为undefined
function car() {
'use strict'
console.log(this); // undefined
}
car();当某个函数为对象的一个属性时，在这个函数内部this指向这个对象
var car = {
name:'丰田',
run() {
console.log(this); // {name: "丰田", run: ƒ}
}
}this出现在构造函数中，指向构造函数新创建的对象
var Car = function(name) {
this.name = name;
console.log(this); // Car {name: "亚洲龙"}
// Car {name: "汉兰达"}
}
var myCar_1 = new Car('亚洲龙');
var myCar_2 = new Car('汉兰达');当一个元素被绑定事件处理函数时，this指向被点击的这个元素
var btn = document.querySelector('button');
btn.onclick = function() {
console.log(this); // <button>this</button>
}this出现在箭头函数中时，this和父级作用域的this指向相同
const obj = {
Car() {
setTimeout(function() {
setTimeout(function() {
console.log(this); // window
})
setTimeout(()=>{
console.log(this); // window
})
})
setTimeout(() => {
setTimeout(function() {
console.log(this); // window
})
setTimeout(()=>{
console.log(this); // obj
})
})
}
}
obj.Car();强行改变 this 指向
修改上下文中的this指向方法 (函数的方法，改变的是函数内部的this指向)
call(对象,参数1,参数2,……) ：返回对象(直接调用)
apply(对象,数组或arguments) ： 返回对象（直接调用）
bind(对象,参数1,参数2,……) ： 返回函数（需要再调用一次）
ES6相关内容
let / const
let : 用于声明变量（必面面试题）
必须先声明，后使用。（变量不再做提升了）
let声明的全局变量不是window对象的属性。
在同一个作用域中，let不能重复声明同一个变量。
let声明会产生块级作用域,for循环有两个作用域，for本身是一个作用域，for循环体又是子级作用域。
const ： 用于声明常量
常量一旦声明，不允许修改。
基本类型的数据，值不允许修改。
复合类型的数据，引用地址不允许修改。
let 和 const 的区别
let 声明的变量的值可以改变，const 声明的变量的值不可以改变
let 声明的时候可以不赋值，const 声明的时候必须赋值
箭头函数
箭头函数是 ES6 里面一个简写函数的语法方式
重点： 箭头函数只能简写函数表达式，不能简写声明式函数
function fn() {} // 不能简写
const fun = function () {} // 可以简写
const obj = {
fn: function () {} // 可以简写
}语法： (函数的行参) => { 函数体内要执行的代码 }
const fn = function (a, b) {
console.log(a)
console.log(b)
}
// 可以使用箭头函数写成
const fun = (a, b) => {
console.log(a)
console.log(b)
}箭头函数不利于阅读
箭头函数中没有this指向，指向上下文中的this.
箭头函数不能实现构造函数
箭头函数不能new
建议在回调函数中使用箭头函数。
箭头函数内部没有 arguments 这个参数集合
函数的行参只有一个的时候可以不写 () 其余情况必须写
函数体只有一行代码的时候，可以不写 {} ，并且会自动 return
回调函数：当一个函数作为另一个函数的参数时，这个函数就是回调函数。
js中的回调函数的理解：回调函数就是传递一个参数化函数，就是将这个函数作为一个参数传到另外一个主函数里面，当那个主函数执行完之后，再执行传递过去的函数，走这个过程的参数化的函数，就叫回调函数，换个说法也就是被作为参数传递到另一个函数（主函数）的那个函数就叫做回调函数。
函数参数默认值
我们在定义函数的时候，有的时候需要一个默认值出现
就是当我不传递参数的时候，使用默认值，传递参数了就使用传递的参数
function fn(a) {
a = a || 10
console.log(a)
}
fn() // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20在 ES6 中我们可以直接把默认值写在函数的行参位置
function fn(a = 10) {
console.log(a)
}
fn() // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20这个默认值的方式箭头函数也可以使用
const fn = (a = 10) => {
console.log(a)
}
fn() // 不传递参数的时候，函数内部的 a 就是 10
fn(20) // 传递了参数 20 的时候，函数内部的 a 就是 20注意： 箭头函数如果你需要使用默认值的话，那么一个参数的时候也需要写 （）
模板字符串
ES5 中我们表示字符串的时候使用 '' 或者 ""
在 ES6 中，我们还有一个东西可以表示字符串，就是 **``**（反引号）
let str = `hello world`
console.log(typeof str) // string和单引号还有双引号的区别
反引号可以换行书写
// 这个单引号或者双引号不能换行，换行就会报错了
let str = 'hello world'
// 下面这个就报错了
let str2 = 'hello
world'let str = `
hello
world
`
console.log(str) // 是可以使用的反引号可以直接在字符串里面拼接变量
// ES5 需要字符串拼接变量的时候
let num = 100
let str = 'hello' + num + 'world' + num
console.log(str) // hello100world100
// 直接写在字符串里面不好使
let str2 = 'hellonumworldnum'
console.log(str2) // hellonumworldnum// 模版字符串拼接变量
let num = 100
let str = `hello${num}world${num}`
console.log(str) // hello100world100解构赋值
对象解构：可以快速读取对象中的属性或方法。
let {a = 1,b = 2,c = 3} = {c : 8,a : 2,b : 3}
数组解构: 可以快速读取数组中的元素。
let [a = 1,b = 2,c = 3] = [4,5,6];
好处？
可以快速交换两个变量中的值
函数中的形参可以设置默认值
函数中的形参可以不按照顺序传递
函数中的返回值可以一次返回多个数据了。
... 运算符(展开运算符)
ES6 里面号新添加了一个运算符 ... ，叫做展开运算符
作用是把数组展开
let arr = [1, 2, 3, 4, 5]
console.log(...arr) // 1 2 3 4 5合并数组的时候可以使用
let arr = [1, 2, 3, 4]
let arr2 = [...arr, 5]
console.log(arr2)也可以合并对象使用
let obj = {
name: 'Jack',
age: 18
}
let obj2 = {
...obj,
gender: '男'
}
console.log(obj2)在函数传递参数的时候也可以使用
let arr = [1, 2, 3]
function fn(a, b, c) {
console.log(a)
console.log(b)
console.log(c)
}
fn(...arr)
// 等价于 fn(1, 2, 3)对象简写形式
当对象中的key和value的名字相同时，可以只写一个key.
let id = 1;
let name = '手机';
let price = 4999;
//创建一个对象
let obj = {
id, // id : id 名字相同，可以简写
name,
price,
num : 2
}模块化语法 import / export
export : 导出模块
import ： 导入模块
实现方法
先定义模块，再导出模块
//定义模块
let user = '张三';
let age = 18;
function show(){
return '姓名' + user + '年龄' + age;
}
//导出模块
export {user,age,show};
//导入模块
import {user,age,show} from './tools.js';边定义模块，边导出模块
//边定义模块，边导出模块
export let user = '张三';
export let age = 18;
export function show(){
return `姓名${user},年龄${age}`;
}
//导入模块
import {user,age,show} from './tools.js';以别名的方式导出模块
let a = '李四';
let b = 19;
function c(){
return `姓名：${a},年龄：${b}`;
}
export {a as user,b as age,c as show};
//导入模块
import {user,age,show} from './tools.js';导入 导出默认模块
//导出默认模块（只能有一个）
let user = '王五';
let age = 20;
function a(){
return `姓名：${user},年龄：${age}`;
}
export {user,age};
export default a;
//导入模块
import {user,age} from './tools.js';
//导入默认模块
import display from './tools.js';Set / Map / for ... of
Set : 天然具有去重的功能。（为了数组）
创建set对象
let set = new Set();
let set = new Set([1,2,1,2,1,2,3]);
属性
size : 长度和length类似
方法：
set.add(元素) : 添加元素，返回set对象
set.has(元素) : 检测元素是否在set对象中，返回布尔值
set.delete(元素) : 删除指定元素，返回布尔值
set.clear() : 清空set对象
set.forEach((value,key,set) =>{}) : 遍历set对象
set.keys() : 获取所有的key
set.values() : 获取所有的value
set.entries() : 获取所有的key和value
for of
for(循环变量 of set|map){
语句组;
}Map（二维数组），解决对象会覆盖而存在。没有缺陷
创建map对象
let map = new Map();
let map = new Map([
[1,'one'],
[2,'two'],
['2','three'],
[true,'four'],
[3,'five']
]);
属性
size : 长度
方法：
map.set('key','value') : 添加元素，返回map对象
map.get('key') : 获取value
map.has(元素) : 检测元素是否在map对象中，返回布尔值
map.delete(元素) : 删除指定元素，返回布尔值
map.clear() : 清空map对象
map.forEach((value,key,map) =>{}) : 遍历map对象
map.keys() : 获取所有的key
map.values() : 获取所有的value
map.entries() : 获取所有的key和value
for of
for(循环变量 of set|map){
语句组;
}