js的第14天

目录

前言

一、改变this指向

二、ES6新特性

1）let和const关键字（用于声明变量）

2）箭头函数

1.定义函数方式

2.箭头函数的作用

3.箭头函数的简写

4.箭头函数this指向问题

3）函数参数默认值

4）解构赋值

5）展开运算符

6）对象字面量简化写法

---

前言

          上节课介绍到this关键字的概念，这节课我们来学习如何改变this指向（改变this的默认指向），今天还要学习Es6新特性，ES6 经过持续几年的磨砺,它已成为 JS 有史以来最实质的升级,特性涵盖范围甚广, 小到受欢迎的语法糖,例如箭头函数 (arrow functions)和简单的字符串插值 (string interpolation),大到烧脑的新概念,例如代理 (proxies)和生成器 (generators)；它将彻底改变程序员们编写JS代码的方式。

 

---

一、改变this指向

1）函数方法call方法：附加在函数调用后使用，可以忽略本身的this指向

函数名.call(this指向的新对象,参数1,参数2...)

对象方法.call(this指向的新对象,参数1,参数2...)

2）apply方法

函数名.apply(this指向新对象,[参数1,参数2...])

对象方法.apply(this指向新对象,[参数1,参数2...])

3）bind方法

var 新函数 = 函数名.bind(this指向新对象)

var 新函数 = 对象方法.bind(this指向新对象)

新函数(参数1,参数2....)

代码如下:(示例）

 <button>按钮</button>

    <script>
        var obj = {
            name:'jack'
        }

        var btn = document.querySelector('button')

        btn.addEventListener('click',function(){
            console.log('this -> ',this)
        })


        function fun(m,n){
            console.log('m ',m, ' n ',n);
            console.log('this -> ',this) // window -> obj
        }
        // fun()
        // fun.call(obj,10,20)
        // fun.apply(obj,[10,20])
        var newFun = fun.bind(obj)
        newFun(10,20)

    </script>

 

---

二、ES6新特性

1）let和const关键字（用于声明变量）

1. let 和 const 关键字

声明变量

var num

let num

const num

2. 区别

let 和 var

1.let没有变量提升(预解析) let声明变必须先定义再使用

console.log(num)

var num = 100

2. let声明的变量，不能重复声明变量

var num = 100

var num = 200

3. let具块作用域

全局作用域

局部作用域

块作用域 let

const 和 let

const声明的变量称为常量，只能赋值一次

const num = 100

num = 200 x报错

3. 应用场景

1.考虑兼容问题

使用var

2. 变量可以多次改变值

let

3. 变量只赋值一次后，不再改变

const

2）箭头函数

1.定义函数方式

function fn(){} 声明式

var fn = function(){} 函数表达式

()=>箭头函数

2.箭头函数的作用

作用:简化函数(匿名函数)的书写

语法:

()=>{}

function(){

}

3.箭头函数的简写

简写:

1. 形参只有一个， 括号可以省略

(m)=>{}

m => {}

2. 函数体只有一行代码 大括号省略

() => {console.log('>>>')}

() => console.log('>>>')

()=> {return 100}

3.只有一行代码，并且代码是return语句，大括号和return都可省略

() => 100

 代码如下:(示例）

const btn = document.querySelector('button')
			btn.addEventListener('click', () => {
				console.log('函数体代码')
			})

			const obj = {
				name: 'jack',
				say: () => {
					console.log('say>>>>')
				},
			}
			obj.say()

4.箭头函数this指向问题

箭头函数this指向问题

1. 在事件处理函数中this->事件源

2. 箭头函数中this指向 应用上下文中this对象

应用上下文this对象

 代码如下:(示例） 

<button>按钮</button>
		<script>
			const btn = document.querySelector('button')
			console.log('this -> ', this) // 应用上下文this对象

			function test1() {
				btn.addEventListener('click', () => {
					console.log('this -> ', this)    //指向window
				})

				const obj = {
					name: 'jack',
					say: () => {
						console.log('obj this -> ', this)
					},
				}
				obj.say()
			}
</script>

3）函数参数默认值

ES5 实现方式

m = m || 100

ES6 实现方式

function fun(m = 100){}

4）解构赋值

解构赋值：快速从对象或数组中取出成员的一个语法方式

let { name, age } = obj

注: 大括号中变量名必须与对象属性名相同

解构数组：

const arr=[1,2,3]

let[a,b,c]=arr         //a=1,b=2,c=3 

  代码如下:(示例） 

function test2() {
				const arr = [1, 2, 3]

				// let a = arr[0]
				// let b = arr[1]
				// let c = arr[2]

				let [a, b, c] = arr // 数组解构赋值

				console.log('a :', a, ' b :', b, ' c :', c)
			}
			test2()

5）展开运算符

展开运算符（...)

let[a,b,c]=arr

...arr  ==>1  2  3

展开运算符作用

1.数组合并

let arr=[1,2,3]               

let arr1=[4,5]

let arr2=[...arr,...arr1]             //[1,2,3,4,5]

2.对象合并

let obj={name:'jack' ,age:18}

let obj2={

...obj,

score:98

}                    //{name:'jack' ,age:18,score:98}

3.函数传递多个参数

let arr=[1,2,3]

function fun(a,b,c){                     }

fun(...arr)

6）对象字面量简化写法

对象字面量简化写法：对象属性名和值变量名相同时，只写一个

let name = 'jane'
			let age = 28

			// let obj = {
			//     name:name,
			//     age:age
			// }
			let obj = { name, age }

			console.log(obj) // {name: 'jane', age: 18}