this关键字和ES6

一丶this关键字

概念:js中内置了this关键字,在不同的作用域表示的含义不同

1.含义;

1.全局的this代表window

console.log(this)

2.普通函数中的this代表window (严格模式中普通函数的this代表undefined)

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

3.自调用函数中的this代表window

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

4.定时器中的this代表window

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

5.事件函数中的this代表当前事件源/标签

<button  id="btn">按钮</button>

btn.οnclick=function(){   console.log(this)     }

6.对象方法中的this代表当前对象

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

2.this关键字的理解

函数定义好,我们并不能确定其中的this代表什么,关键取决于谁调用这个函数,它就代表谁

fn()   =====  window.fn()   代表window

document.onclick = fn   ===    document.onclick()    代表document

obj.fn()    代表对象obj

window.setTimeout() ==  window    代表window

自调用函数  === window.函数()       代表window

全局中的this     代表window

3.改变this的含义

1.call     语法 :  函数.call(改变后的this含义,调用的实参)

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

function add(a,b){ console.log(a+b);console.log(this); } add(1,2)  -----    add.call(document,3,4)

2.apply    语法:  函数.apply(改变后的this含义,[调用的实参])

function add(a,b){ console.log(a+b);console.log(this); } add(1,2)  -----    add.apply(document,[3,4])

3.bind     语法:  函数.bind(改变后的this含义)  

function add(a,b){ console.log(a+b);console.log(this); }  var newAdd = add.bind(document) newAdd( 3, 4 )

复制函数, 返回一个新函数  新函数和原函数不是一个   新函数的this含义改变

总结: call  apply 是调用函数并改变this     bind 是复制一个新的函数出来 并返回this

4.伪数组

伪数组是一个对象,这个对象中必须有length属性,如果length不为0,那么这个对象中必须由下标和对应的数据

3.1.bind使用场景

document.querySelector('button').onclick = function() {

   setTimeout((function() {

        // 改变btn的背景颜色

        this.style.backgroundColor = 'red'

    }).bind(this), 500)       }

定时器外面的this代表document,定时器里面的this代表定时器外面的this,所以定时器里面的this就代表document,  查找的时候是向外查找 

3.2.call和apply使用场景

精准的检测对象的具体类型

语法:对象.toString.call(数据)

console.log(  {}.toString.call(date)  )    输出结果:  [object  Date]

{}用toString,转成字符串的结果是 [object  Object]    toString方法中的this代表的是{} 

语法:对象.toString.apply(数据)

apply的使用场景和call一样

二丶ES6

1.定义变量

1.let是es6新增的定义便令的关键字  使用方式跟var是一样的

let  a = 20  //  let定义变量没有预解析   

不允许重复定义(就是一个变量名不能赋两次值 例如 var a=10 ; var a= 20;)

let定义的变量会自带块级作用域(全局定义的变量不在window)

 2.const-定义常量 -使用方式跟var一样

let的特性const都有   const定义就必须赋值  const a = 20    值不能更改

2.箭头函数

是es6中提供的新的定义函数的语法

其实就是对以前函数定义的一种简写 ------  只能简写匿名函数

语法: (形参)  => {代码段}

   

当大括号中只有一行代码的话,就可以省略大括号  var add = a => console.log(a+6)  add(2) 

 使用场景:通常在数组中使用

数组.方法(function(v){    return 内容   })

数组.方法(v => 内容)

箭头函数中没有this关键字 - 可以说箭头函数中的this代表的是箭头函数所在作用域中的this

箭头函数定义好了就已经知道this代表什么了        箭头函数中的this不能修改

3.形参默认值

 4.模板字符串 (es6提供的一种新的定义字符串的语法)

语法: `字符`

var  str = `

a

b

`

可以换行书写，保持字符串中的换行和空格

模板字符串中可以识别变量，使用美元符大括号：${变量}

var imgPath = 'a/b/c/1.jpg'(图片地址)

var img = '<img src="'+imgPath+'" />'

var img = `<img src="${imgPath}" />`

5.解构赋值 (是快速的方便的批量的把对象或数组中的多个值赋值给多个变量)

对象解构:  变量名必须与属性名一致

var obj = { name : '张三' ,  age : 12 ,  inMan : true }

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

在解构的时候取别名   取别名后原来的名称就不能使用了

var {name: a ,  age: b , isMan: c } = obj     console.log(a,b,c)

 数组解构

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

 

 6.展开合并运算符

 将对象展开成多个键值对

语法:...对象 - 将对象展开成多个键值对

 

 数组合并

语法:...数组名   将多个值收集在一个数组中

 7.对象简写

 当对象属性名和对应的值所使用的变量名同名了,就可以简写了

 

 当对象的方法的值是一个匿名函数的时候，方法可以简写

  

 8.Map

 Map：这是一种es6新提供的一种对象数据

Map数据其实是一种键值对

object的键必须是字符串，如果给的不是字符串，会转成字符串作为对象的键

Map的键，可以是任意数据类型

定义:  var m =  new  Map()

map的结构使用[]，其中的数据也必须是[]，在里面的[]中第一个为键，第二个为值，如果只有键没有值，默认的值为undefined

Map的操作方法：

设置键值对:  map.set(键,值) ,    如果map中已经有了当前指定的键，后面的值会覆盖前面的值。

根据键获取值：map.get(键)。返回获取到的值。如果获取一个map中不存在的键，返undefined。

删除键值对：map.delete(键)。返回布尔值，代表是否删除成功。删除map中不存在的键，返回false。

判断map中是否包含某个键值对：map.has(键)。返回布尔值

获取map中键值对的数量：map.size，返回数字，

清空map中的数据：map.clear()。没有返回值，

获取所有键的集合：map.keys()，返回一个集合，

获取所有值的集合：map.values()，返回一个集合，

遍历map：map.forEach((item, key) => {})，

9.set

es6提供的一种新的对象类型的数据 - Set

官方：Set是所有键的集合

我们语言：新型的数组，数组中不能有重复的元素

定义

var s = new Set()

 给set集合中添加值：set.add(值)。返回添加后的新set。如果添加的数据在set中存在，则添加不进去,已经存在的元素是添加不进去的：

从set中删除元素：set.delete(元素)。返回布尔值，表示是否删除成功。

查看set中数据的长度：set.size，返回数字。

判断set中是否有某个数据：set.has(数据)。返回布尔值

清空set中的数据：set.clear()。没有返回值，

遍历set：set.forEach(item => {})。

10.for ... of

es6提供 了一种新的遍历语法

语法：

for(var a of 数组/字符串) {

}

for in用来遍历键。可以遍历的数据如下：

• 可以遍历object类型，只要类型是object就能遍历，但能遍历的只有可遍历/可枚举的属性，（也就是enumerable属性为true的属性）；

• 可以遍历数组，但遍历出来的下标是字符串，遍历数组的时候会将数组的下标作为键

• 可以遍历字符串，遍历出来的下标也是字符串

• 如果对象的原型中有可遍历的属性，会将原型中的可遍历属性也遍历出来。如果原型中的可遍历属性和对象本身的可遍历属性重名，就只遍历对象本身的属性了。

for of用来遍历值。可以遍历的数据如下：

• 可以遍历数组，遍历出来的是数组中的每个元素

• 可以遍历字符串，遍历出来的是字符串中的每个字符

• 可以遍历set集合。

• 可以遍历Map集合

• 不可以遍历对象