this关键字和ES6

一、this关键字

1、this关键字的含义:在任何一个位置都可以使用，在不同的位置代表的含义是不同的

1.1全局中this关键字默认代表window

console.log(this)

1.2、普通函数的this普通函数 - window

自调用函数 - window

事件函数 - 事件源 - 标签

对象的放方法 - 当前对象

定时器函数 - window

function fn() {
    console.log(this)
}
​
fn()

所谓普通函数，指的是直接拿函数名称调用的函数。

1.3、自调用函数中的this

(function() {
    console.log(this)
})()

1.4、定时器中的this

setTimeout(function() {
    console.log(this)
}, 1000)

1.5、事件函数中的this

<button id="btn">按钮</button>
btn.onclick = function() {
    console.log(this)
}

1.6、对象方法中的this

var obj = {
    name: '张三',
    age: 12,
    eat: function() {
        console.log(this)
    }
}
​
obj.eat()

总结:

全局:window
普通函数+自调用函数+定时器函数:window
事件函数:触发事件的标签
对象方法:当前对象

2、this含义的理解

普通函数，大多都属于window的方法，所以普通函数调用就是调用window的方法；事件的绑定，其实就是在给标签对象添加方法，最终调用，其实也是在调用标签对象的方法；定时器属于window的方法，所以定时器的调用其实就是在调用window的方法

其实一个函数定义好以后，还不能确定其中的this代表什么，主要是看这个函数最终是如何调用的，例：

function fn() {
    console.log(this)
}
​
// 将fn当做事件处理函数
btn.onclick = fn
// 此时fn中的this就代表事件源btn
​
// 将fn当做定时器的处理函数
setTimeout(fn, 1000)
// 此时fn中的this就代表window
​
// 将fn当做对象的方法
var obj = {
    name: '张三',
    age: 12,
    eat: fn
}
obj.eat()
// 此时fn中的this就代表对象obj

根据最终的调用方式，决定最终将函数当做了什么来调用的，才能决定this关键字的含义。

3、this含义的改变

js提供了3个函数来强行修改this关键字的含义：

3.1、call方法

call方法有两个作用：调用函数以及改变函数中的this

3.1.1、调用函数

语法：

函数.call()

例：

function fn() {
    console.log(111)
}
​
fn() // 111
fn.call() // 111

和正常的函数调用一模一样。

3.1.2、改变this

call方法在调用函数的同时传递参数就可以改变this的含义：

函数.call(新的this含义)

例：

function fn() {
    console.log(this)
}
​
fn() // window
fn.call(document) // document

3.1.3、参数处理

如果被调用的函数需要实参时，call方法从第二个参数开始给函数传递实参：

函数.call(新的this含义, 实参1, 实参2, ...)

例：

function fn(a, b) {
    var c = a + b
    console.log(c)
    console.log(this)
}
​
fn(1, 2) // 3 window
fn.call(document, 2, 3) // document 5
fn.call(null, 5, 6) // window 11

给call传递第一个参数为null，就表示将函数中的this改为了window

类数组：也叫作 伪数组

跟数组长得特别特别的像，可惜就不是数组 伪数组本质是什么数据？对象 获取到元素集合属于伪数组

<ul>
   <li>1</li>
   <li>2</li>
   <li>3</li>
</ul>

var lis = document.querySelectorAll('li')

lis这个标签集合就是伪数组

console.log(typeof lis); // object

伪数组其实是一种很像数组的对象

伪数组的键值对中的键，其实是0 1 2 数字，并且他有length属性

var obj = {
//     name: '张三',
//     age: 12
// }
// console.log(obj.length);

伪数组

var obj = {
//     0: '张三',
//     1: '李四',
//     '2': '王五',
//     length: 3
// }
// console.log(obj);
// for (var a = 0; a < obj.length; a++) {
//     console.log(obj[a]);
// }
// console.log(obj.length);

// var arr = [1,2,3]
// arr.push(4)
// console.log(arr);

// var obj = {

// }
// obj.push(666)
// console.log(obj);

所以伪数组没有数组的方法，不能调用

常见的伪数组： 元素集合

document.querySelectorAll()
document.getElementsByTagName()
document.getElementsByName()
document.getElementsByClassName()

函数中的关键字arguments

希望lis可以调用数组方法

console.log(lis);
// lis.slice(0, 2)
// 让伪数组借用数组的slice方法
// console.log([].slice.call(lis, 0, 2))

伪数组转成数组
// [].slice.call(伪数组 )
// var arr = [].slice.call(lis)
// arr.push(666)
// console.log(arr);

使用场景

1. 让伪数组可以调用某些数组方法

   语法：

   数组方法.call(伪数组)
   

   例：

   var divs = document.querySelectorAll('div')
   var arr = []
   var newDivs = arr.slice.call(divs, 0)
   console.log(newDivs);
   

   通常用于将伪数组转成数组，方便调用数组方法处理元素。

   不是所有方法都可以这样做的，因为有些方法中是没有this关键字的。

2. 检测数据为对象时的精准类型

   语法：

   对象.toString.call(数据)
   

   例：

   var obj = {}
   console.log(obj.toString.call(123));
   console.log(obj.toString.call('abc'));
   console.log(obj.toString.call(true));
   console.log(obj.toString.call(undefined));
   console.log(obj.toString.call(null));
   console.log(obj.toString.call([]));
   console.log(obj.toString.call({}));
   console.log(obj.toString.call(function(){}));
   console.log(obj.toString.call(/^abc$/));
   console.log(obj.toString.call(new Date()));
   

apply方法

apply和call的作用是相同的，唯一不同的地方，在于传递实参。

call在调用函数时，给函数传递实参，是从call的第二个参数开始传递；apply给函数传递实参，是将所有实参组成一个数组作为apply的第二个参数传递的：

函数.call(新的this含义, [实参1, 实参2, ...])

例：

function fn(a, b) {
    var c = a + b
    console.log(c)
    console.log(this)
}
​
fn(1, 2) // 3 window
fn.apply(document, [2, 3]) // document 5

使用场景跟call也是一样的。

bind方法

bind方法有两个作用：复制函数，并改变新函数中的this。

3.3.1、复制函数

语法：

函数.bind() // 返回新函数

例：

function fn() {
    console.log(this)
}
​
var newFn = fn.bind()
console.log(newFn)
console.log(fn)
console.log(newFn === fn) // false

复制出来的新函数和原本的函数一模一样，但不是同一个。

3.3.2、改变新函数的this

语法：

函数.bind(新的this含义) // 返回的新函数中，this的含义会变成新的含义

例：

function fn() {
    console.log(this)
}
​
var newFn = fn.bind(document)
fn() // window
newFn() // document

bind不加参数，新函数的this为window：

var obj = {
    name: '张三',
    eat: function() {
        console.log(this);
    }
}
var fn = obj.eat.bind()
fn() // window

3.3.3、bind使用场景

某些函数在使用的时候，希望其中的this为其他对象，可以将原函数通过bind复制使用，并改变其中的this：

document.onclick = function() {
    setTimeout(function() {
        console.log(this)
    }, 1000)
}
// 此时this为window - 因为这是定时器中的this
// 将定时器中的this改为document
document.onclick = function() {
    setTimeout((function() {
        console.log(this)
    }).bind(this), 1000)
}

二、ES6

ES6是现在最流行的语法、

ES6将js从弱类型语言提升到强弱类型语言

ES6是2015年发布的，所以也叫作 ES2015

提供了很多新的语法，让代码更加简洁，更加严谨

es6提供了两个定义变量的关键字： let const

这两个关键字的使用语法跟var一样

var a = 10
// let a = 20

let和var的区别：
// console.log(a);
// var a = 10

console.log(a);
// let a = 10
// 1.let定义变量不能预解析

if (true) {
//     var a = 10
// }
// console.log(a);

// if (true) {
//     let a = 10
// }
// console.log(a);

2.let在if或for的大括号中定义，只能在这个大括号中使用了，将大括号当做是一个作用域 let天生就会自带作用域，无形的 - 块级作用域

var a = 10
// let a = 10
// console.log(window); // 全局中用let定义的变量，不在window中

for (var a = 1; a <= 3; a++) {
//     setTimeout(function() {
//         console.log(a);
//     }, a * 1000)
// }

for (let a = 1; a <= 3; a++) {
//     setTimeout(function() {
//         console.log(a);
//     }, a * 1000)
// }

3.let不允许重复定义一个变量

var a = 1
// var a = 2
// console.log(a);

let a = 1
// let a = 2
// console.log(a);

// const的特性跟let一样，使用方式一样
// console.log(a);
// const a = 10

// if (true) {
//     const a = 10
// }
// console.log(a);

// const a = 10
// const a = 20
// console.log(a);

// const和let的区别：
// 1.const定义变量必须给赋值
// let a
// a = 10
// console.log(a);

// const a
// a = 10
// console.log(a);

// 2.const变量的值不能改 - 常量
// let a = 10
// a = 20
// console.log(a);

// const a = 10
// a = 20
// console.log(a);

ES6中如果定义对象的时候，对象的键 和 键对应的值所使用的变量名 同名 就可以进行简写

var name = '张三'
var age = 12
var gender = '男'

以前的写法

// var obj = {
//     name: name,
//     age: age,
//     gender: gender
// }

Es6简写

// var obj = {
//     name,
//     age,
//     gender
// }
// console.log(obj);

方法简写 以前的方法

// var obj = {
//     name: '张三',
//     age: 12,
//     eat: function() {
//         console.log('吃吃吃吃');
//     }
// }
// console.log(obj);
// obj.eat()

ES6中 如果 键 对应的值是一个匿名函数 就可以简写 简写

var obj = {
    name: '张三',
    age: 12,
    // 方法的简写
    eat() {
        console.log('吃吃吃吃');
    }
}
console.log(obj);
obj.eat()

2、箭头函数

es6中的箭头函数是用来简写函数的

let fn = function(){
    console.log(111);
}

使用箭头函数简写

let fn = ()=>{console.log(111);}

带参数的写法：

let fn = function(a,b){
    console.log(a+b);
}

使用箭头函数改写

let fn = (a,b)=>{console.log(a+b);}

注意：如果只有一个形参的时候，小括号可以省略：

let fn = function(a){
    console.log(a);
}

使用箭头改写

let fn = a = > {console.log(a);}

注意：如果代码块中只有一行代码，箭头函数可以省略大括号，并将这行代码作为返回值

let fn = function(a){
    return a + 1;
}

箭头函数的写法

let fn = a = > a+1;

例：使用箭头函数定义一个返回m到n范围内的随机数的函数：

let fn = (m,n) => parseInt(Math.random()*(n-m+1))+m;

箭头函数使用注意事项：

1. 箭头函数中的this比较混轮，所以在函数和方法中使用到this的时候，就不要用箭头函数
2. 箭头函数中没有arguments

ES6提供了一种用于 简化匿名函数的 语法

// var fn = function() {
//     console.log(666);
// }

简化

// var fn = () => {
//     console.log(666);
// }
// console.log(fn);
// fn()

当小括号中只有一个形参的时候，小括号可以省略 以前的写法

// var arr = [78, 89, 46, 59, 87] // 小明的考试成绩
// // 将所有不及格的成绩找出来
// // var brr = arr.filter(function(item) {
// //     return item < 60
// // })
// // console.log(brr);

用箭头函数简写

// var brr = arr.filter(item => {
//     return item < 60
// })
// console.log(brr);

如果大括号中只有一行代码，大括号可省略

// var fn = () => console.log(666);
// console.log(fn);
// fn()

如果省略了大括号的这一行代码中有return，必须将return省略掉

// var arr = [78, 89, 46, 59, 87] // 小明的考试成绩
// 将所有不及格的成绩找出来
// 用箭头函数简写
// var brr = arr.filter(item => item < 60)
// console.log(brr);

箭头函数中是没有this关键字的

// var fn = (a => {
//     console.log(this);
// })
// fn()

// document.onclick = function() {

//     var fn = () => {
//         console.log(this);
//     }
//     fn()
// }

箭头函数本没有this，他里面的this代表箭头函数所在作用域中的this - 上级作用域中的this - 箭头函数上一行代码中的this

// var fn = function() {
//     console.log(arguments);
// }

// 箭头函数中没有arguments这个关键字
// var fn = () => {
//     console.log(arguments);
// }
// fn(1,2,3)

总结： 箭头函数是对匿名函数的简写 () => {} 如果只有一个形参，省略小括号；如果只有一行代码段，就省略大括号，如果这一行中有return就必须省略return 箭头函数中没有this，他里面的this代表上级作用域的this 箭头函数中没有arguments，要在箭头函数中输出，会报错

ES6提供了语法：让一个形参可以传递实参，也可以不传递。当不传递这个实参的时候，这个形参可以默认就有值

unction fn(a, b = 2) {
//     // 形参就相当于函数内提前定义好的变量，默认的值是undefined
//     // 默认的值2
//     console.log(a, b);
// }
// fn(1)
// fn(1, 3)


// console.log(getRandom(3))
// console.log(getRandom(3, 5))

解构赋值

解析一个数据结构并赋值，可以快速的从对象或数组中取出需要的内容，对象使用大括号，数组使用中括号

5.1、解构对象

之前从对象中取到内容的方式

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let name = obj.name;
let age = obj.age;

解构的方式：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let {name} = obj;
/*
表示从obj中获取name属性，并赋值给声明的name变量
*/

使用说明：

1. obj必须是一个对象
2. obj中必须有name属性

还可以一次性解构多个变量：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let {name,age} = obj; // 声明并赋值了两个变量

可以将变量名换成一个别的名字：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
}
let {name:username,age:a} = obj; // 将obj的name属性值赋值给username变量，age属性值赋值给变量a

多级解构：

let obj = {
    name:"张三",
    age:12,
    sex:"男",
    wife:{
        name:"翠花",
        age:11,
    }
}
let {wife} = obj;
let {name} = wife;
// 写为一行
let {wife:{name:wname}} = obj;

5.2、解构数组

let arr = [1,2,3];
let [num1] = arr; // 从数组中拿出第一个元素赋值给num1变量

使用说明：

解构数组的时候是按顺序取出数组中的值，解构一个变量，只能拿到第一个元素

解构多个元素：

let arr = [1,2,3];
let [num1,num2] = arr; // num1 = arr[0]   num2 = arr[1]

多维数组解构：

let arr = [1,2,3,[4,5,6]];
let [a,b,c,[aa,bb]] = arr;
console.log(aa,bb); // 4 5

利用结构交换两个变量的值：

let num1 = 1;
let num2 = 2;
[num2,num1] = [num1,num2]

解构赋值： 将对象或数组中的多个数据 快速的 简洁的 批量的 赋值给多个变量

// var obj = {
//     name: '张三',
//     age: 12,
//     sex: '男'
// }
// // var name = obj.name
// // var age = obj.age
// // var sex = obj.sex
// // 解构赋值
// var {name, age, sex} = obj // 变量名要跟键的名字保持一致
// console.log(name, age, sex);

// var arr = [1, 2, 3]
// var [a, b, c] = arr
// console.log(a, b, c);

// var a = 1
// var b = 2
// // 最简短的交换两个变量的值
// var [b, a] = [a, b]
// console.log(a, b);

复杂的解构

// var obj = {
//     name: '张三',
//     age: 12,
//     sex: '男',
//     wife: {
//         name: '翠花',
//         age: 13,
//         sex: '女'
//     }
// }
// var {wife} = obj
// var {name} = wife
// var {wife: {name}} = obj
// console.log(name);

// var arr = [1,2,[5,6]]
// var [_, _, [_, b]] = arr
// console.log(b);

var obj = {
    name: '张三',
    age: 12,
    sex: '男'
}

解构并取别名

// var {age: abc} = obj
// console.log(abc);
// console.log(age); // 取别名后原本的名字就不能用了

总结： 快、简、批量将对象或数组的多个数据赋值给多个变量 对象

    var {变量名} = obj 变量名必须和键保持同名
    var {变量名: 新的变量名} = obj 取别名
    var {变量名: {变量名}} = obj 
数组
    var [变量名] = 数组 变量名的值按照数组中的顺序进行赋值
    var [[变量名]] = 数组

展开运算符

将一个数组展开为多个变量赋值给多个形参

let arr = [1,2,3];
function fn(a,b,c){
    console.log(a,b,c); // 1 2 3
}
fn(...arr);

利用展开运算求数组的最大值

let arr = [5,3,6,9,8,1,7];
let max = Math.max(...arr); 
console.log(max); // 9

利用展开运算合并数组

// 之前的写法
let arr = [1,2,3];
let arr1 = [4,5,6].concat(arr);
// 利用展开运算合并
let arr2 = [4,5,6].concat(...arr);
// 再简化
let arr3 = [4,5,6,...arr]

利用展开运算合并对象：

const obj = {
    name:"Jack",
    age:20,
    sex:"男",
}
const obj1 = {
    ...obj,
    wife:{
        name:"Rose",
        age:18
    }
}
console.log(obj1);

7、合并运算符

将多个实参合并为一个数组

function fn(...arr){
    console.log(arr);
}
fn(1,2,3); // [1,2,3]

箭头函数中没有arguments，可以使用合并运算符来模拟arguments

var fn = (...arr) => {console.log(arr)};
fn(1,2,3); // [1,2,3]

8、对象的简写方式

let name = '张三';
let age = 12;
let obj = {
    name,
    age
}
console.log(obj);

如果对象的属性名和变量名同名，则可以光写属性名 快速的将数组/对象展开 数组展开成多个值

// function add(a, b, c) {
//     console.log(a + b + c);
// }
// var arr = [1, 2, 3]
// // add(arr[0], arr[1], arr[2])
// add(...arr) // 将arr展开成3个值作为实参 等同于  add(arr[0], arr[1], arr[2])
// 快速求数组中的最大值
// var arr = [1,5,9,7,6,4,3,2,8]
// console.log( Math.max(...arr) );

对象展开成多个键值对

// var lw = {
//     name: '隔壁老王',
//     sex: '男',
//     age: 60
// }

// var zs = {
//     ...lw, // 快速的将lw展开成多个键值对
//     /*
//     等同于
//         name: '隔壁老王',
//         sex: '男',
//         age: 60
//     */
//     wife: {
//         name: '翠花',
//         age: 13,
//         sex: '女'
//     }
// }
// console.log(zs);
// zs.name = lw.name
// zs.sex = lw.sex
// zs.age = lw.age

将多个值合并成数组

// function add() { // 实参数量不固定，形参无法接收
// function add(...arr) { // 实参数量不固定，将所有实参收集在一个arr数组中
//     console.log(arr);
//     console.log( {}.toString.call(arr) );
// }

// add(1, 2)
// add(1, 2, 3)
// add(1, 2, 3, 4)
// add(1, 2, 3, 4, 5, 6)