ES6笔记————let，箭头函数，剩余参数

本文介绍: 箭头函数中的t hi s 指向是它所定义（声明）的位置，可以简单理解成，定义箭头函数中的作用域的t hi s 指向谁，它就指向谁。const obj = { name: ‘张三’}//t hi s 指向是obj 对象//t hi s 指向的是箭头函数定义的位置，那么这个箭头函数定义在fn 里面，而这个 fn指向是的obj 对象，所以这个 t hi s也指向是obj 对象//{ name: ‘张三’}resFn();//{ name: ‘张三’}

一.let,var,const区别

一：全局作用域下this指向
			1:普通函数
			function global(){
				console.log(this);//window
			}
			global();
			2：箭头函数
			const global = ()=>{
				console.log(this);//window
			}
			global();
			
			
			二：对象里面的this指向
			1:普通函数
			const Person = {realname:"张三",age:19,
			   say:function(){
				   console.log(this.realname);//当前的对象 "张三"
			   }
			}
			Person.say();
			
			2:箭头函数
			const Person = {realname:"张三",age:19,
			   say:()=>{
				   console.log(this);//window
			   }
			}
			Person.say();
			
			三：构造函数的this指向
			1:普通函数
			
			function  Person(realname,age){
				this.realname = realname;
				this.age = age;
				this.say = function(){
					console.log(this);
				}
			}
			const P1 = new Person("张三",19);
			P1.say();
			
			const P2 = new Person("李四",19);
			P2.say.call(P1);//原来李四，现在是张三 call和apply改变this指向，区别传输参数的区别
			
			
			2:箭头函数
			
			function  Person(realname,age){
				this.realname = realname;
				this.age = age;
				this.say = ()=>{
					console.log(this);
				}
			}
			const P1 = new Person("张三",19); 
			P1.say();

			const P2 = new Person("李四",19);
			P2.say.call(P1);//不能改变箭头函数的this指向
			
			
			总结：普通函数与箭头函数this的区别
			1：普通的函数this与调用者有关，调用者是谁就是谁;
			2：箭头函数的this与当时定义的上下文的this有关，this是静态的一旦定义了就无法改变

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!-- 点击按钮   2s后显示：文字被点击，在点击出现文字：点击被取消。 -->
<!-- （附加：点击10次后提示“今日点击次数已上限，按钮变成灰色”） -->

<body>
    <button>点击</button>
    <script>
        let bth = document.querySelector("button")
        let flag = false
        let num=0
        bth.addEventListener("click", function () {
            flag = !flag
            num++
            if(num>10){   
                this.innerHTML="今日点击次数已上限"
                this.disabled=true
                this.style.backgroundColor="grey"
                return false
            }
            time1=setTimeout(() => { 
                if (flag) {
                    // console.log(this);
                    this.innerHTML="文字被点击"
                }
                else{
                    this.innerHTML="点击被取消"
                }
            }, 100);

        })
    </script>
</body>

</html>

1:rest参数
			function demo(...nums){
				console.log(nums);//数组
				console.log(...nums);//解构数组
			}
			demo(1,2,3);
			
			2:rest参数 对象
			function connect({username,...info}){
				console.log(username);
				console.log(info);
			}
			connect(
			   {username:"root",password:"123456",port:"3306"}
			)
			
			3:输出数组
			const arr = [1,2,3];
			console.log(...arr);
			
			4:合并两个数组
			const arr1 = [1,2,3];
			const arr2 = [4,5,6];
			console.log([...arr1,...arr2]);
			
			
			5:将类数组转为数组
			const liNode = document.querySelectorAll("li");
			console.log(typeof [...liNode]);
			
			const arr1 =  [1,2,3];
			const arr2 =  [...arr1];//复制数组
			arr1[0] = 10;
			console.log(arr2);
			
			
			6:剩余参数必须放入最后(rest参数) 不然报错
			function demo(a,b,...nums){
				console.log(nums);//数组
			}
			demo(1,2,3,4,5);

显示所有内容

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

函数指向箭头

一.let,var,const 区别

let

关键字 用来 声明 块级 变量。

— 特点就是在{}声明 具有 块级 作用域，v ar 变量无此特点。

— 防止循环 变量 编程 全局变量。

— let 关键词无变量 提升。

— let 关键词有暂时性死区的特点。{先声明后使用}

const

声明 常量，常量 就是值（内存地址）不能变化的量。

对象的本身是可变的，所以可以 添加 属性，但是地址 不可改变

区别

使用 v ar 声明的变量，其作用域为该语句所在的函数内，且存在 变量 提升现象

– 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在 变量 提升

– 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

– 使用let，const的声明的变量不属性顶层对象，返回undefined。

二，解构

1 数组 解构

2对象 解构

三，箭头函数

1 基础语法

2 省略 写法

3 对象方法里的this

4 apply/call调用时的th is

5 箭头函数中th is

8 箭头函数应用

四，剩余函数

发表回复取消回复

一.let,var,const区别

关键字用来声明块级变量。

— 特点就是在{}声明具有块级作用域，var变量无此特点。

— 防止循环变量编程全局变量。

— let 关键词无变量提升。

— let 关键词有暂时性死区的特点。{先声明后使用}

声明常量，常量就是值（内存地址）不能变化的量。

对象的本身是可变的，所以可以添加属性，但是地址不可改变

区别

使用 var 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

– 使用 let 声明的变量，其作用域为该语句所在的代码块内，不存在变量提升

– 使用 const 声明的是常量，在后面出现的代码中不能再修改该常量的值

– 使用let，const的声明的变量不属性顶层对象，返回undefined。

二，解构

1 数组解构

2对象解构

三，箭头函数

1 基础语法

2 省略写法

3 对象方法里的this

4 apply/call调用时的this

5 箭头函数中this

8 箭头函数应用

四，剩余函数

相关文章

发表回复 取消回复

一.let,var,const 区别

— 特点就是在{}声明具有块级作用域，v ar 变量无此特点。

使用 v ar 声明的变量，其作用域为该语句所在的函数内，且存在变量提升现象

4 apply/call调用时的th is

5 箭头函数中th is

发表回复取消回复