js：this的指向与绑定，ES6新增let、const、箭头函数、展开运算符、解构赋值、字符串模板 - 第二十天

最新推荐文章于 2022-09-10 01:17:11 发布

qdcxy_lj

最新推荐文章于 2022-09-10 01:17:11 发布

阅读量134

点赞数

分类专栏： Javascript基础文章标签：前端 javascript es6

本文链接：https://blog.csdn.net/qdcxy_lj/article/details/124204139

版权

Javascript基础专栏收录该内容

22 篇文章 0 订阅

订阅专栏

# 三、this

1、this：一般存在于函数中，是一个指向，只有在执行时才能确定自身的信息，表述当前所属函数的执行对象

- 函数

- 执行

- 对象

- 执行了this所在的函数的对象

2、常见的this绑定情况

- 默认绑定：没有确定隶属对象的函数被直接执行，中的this，指向window（非严格模式，严格模式指向undefined）

- 隐式绑定：属于某个对象的函数，被对象执行时，函数内部的this指向当前的对象

- 隐式丢失：将属于某个对象的函数再次赋值给变量或作为参数传递，此时通过变量或参数执行该函数，this指向window（非严格模式，严格模式指向undefined）

- 强制绑定：利用 **函数的方法（call，apply，bind）** 强制修改this的指向，改成什么就是什么

- 利用bind方法，找回隐式丢失 setTimeout(obj.show.bind(obj),2000)

- new绑定：利用new关键字执行函数，此时函数内部this指向new出来的对象

- 面向对象语法

3、函数的方法 - 强制绑定this的方法

- 函数的方法

- 函数名.xxx（）

- call：立即执行改变了this之后的函数

- 参数:参数1，是要改变的this的指向；参数2，传给了形参..参数n~

- 返回值：自身没有返回值，使用原函数执行的返回值

- apply：立即执行改变了this之后的函数

- 参数:参数1，是要改变的this的指向；参数2，必须为数组,数组会自动解析并将所有数据传入原函数的形参（类似于数组传给了arguments）

- 返回值：自身没有返回值，使用原函数执行的返回值

- bind：不会立即执行改变this之后的函数，作为返回值返回

- 参数：参数1，是要改变的this的指向；参数2，传给了形参..参数n~

- 返回值：改变了this指向之后的新函数

call，apply，bind三者的区别：

```

var res = fn.call("hello", "world", 123);

console.log(res);

var res = fn.apply(123, [456, 789]);

console.log(res);

var res = fn.bind("hahaha","heiheihie","xixixi");

console.log(res);

console.log(res === fn);

res();

```

# 四、ES6新增

1、ES6：ECMAscript

1、新增了声明关键字

- let，const，class，import，export

- let：

- :不允许变量名重复

- 全局变量不属于window

- 块级作用域：花括号就是作用域

- 变量不存在提升

- 暂时性死区

- const

- 拥有let所有特点

- const声明的是常量，声明之后地址不允许被修改，值可以修改

- const>let>var(对象一般用const，其余用let)

2、新增的箭头函数

- 有名函数：正常函数，正常使用

- 匿名函数：自动执行，不能直接使用，只能作为值使用

- 无名函数：非正常函数，不能直接使用，只能作为值使用

- 作为赋值式创建函数的值

- 作为参数使用（回调函数）

- 作为返回值使用（闭包函数）

- 作为事件处理函数

- 作为匿名函数的函数体

- 箭头函数：非正常函数，不能直接使用，只能作为值使用

- 作为赋值式创建函数的值

- 作为参数使用（回调函数）

- 作为返回值使用（闭包函数）

- 作为事件处理函数，不建议

- 作为匿名函数的函数体

- 语法：=>

- 当有且只有一个参数时，可以省略小括号

- 当有且直接设置了返回值时，可以省略花括号和return

- 注意：花括号和return必须同时省略

- 直接返回对象时，如果需要省略return，需要将对象再套一层小括号

- 箭头函数内部没有this，使用上一层this

- 建议使用箭头函数做事件处理函数，否则无法获取事件源

3、新增的运算符 - 展开运算符

- 用来操作复杂数据（打包之后的数据：），数组、对象

- 展开之后数据一定要放在合适的位置

- 数组：展开的位置必须能够接收多个数据,,,只能在能接收多个数据的位置展开

- 对象：展开的位置必须能够接收多个键值对,,,只能在能接收多个对象的位置展开

- 语法：...arr、、、...obj

- 语法：`...数据`

- 应用：

- 深拷贝

- 合并

- 快速传参

- ...等等等

4、新增的解构赋值

- 解构：解开复杂数据的结构进行赋值，数组和对象和字符

- 数组：从左向右依次解构，超出数据长度，解构出undefined

- `let [a, c, b] = [3, 4, 5];`

- 对象：按照键(key)一一对应，不存在的key为undefined

- `let {age,name} = {name:"admin",age:18};`

- 字符：类似于数组

- `let [a,s,d,f] = "hello";`

- 应用：

- 快速传参

- 交换变量的值

- ...等等等

5、字符串的新增

- 对Unicode编码中无法被一个四位十六进制表示的字符提供的支持

- 如：𠮹，需要被两个四位的十六进制表示

- 将字符转成Unicode编码："𠮹".codePointAt()

- 将Unicode编码转成字符：String.fromCodePoint(134073)

- Unicode编码在浏览器中新的表示方式

- "\u{20bb9}"

- 字符的方法

- 是否包含：str.includes(子串，参数1（开始查询索引位置）)

- 是否以xx开头：str.startsWith(子串)

- 是否以指定结尾：str.endsWith(子串)

- 重复字符串：str.repeat(n)

- 字符串模板

- 要求使用反引号包裹字符：`

- 在反引号包裹的字符串中，使用'${}'标记变量

- 支持在代码中直接换行

var str = "hello world";

    console.log(str.includes("o"));

    console.log(str.includes("o", 6));

    console.log(str.includes("o", 9));

    console.log(str.includes("a"));



    console.log(str.startsWith("he"));

    console.log(str.startsWith("hea"));



    console.log(str.endsWith("rld"));

    console.log(str.endsWith("ald"));

    console.log(str.endsWith("d"));



    console.log(str.repeat(5));




    var a = "好";

   

    var msg1 = "今\n天天气真'"+ a +"'啊!";

    console.log(msg1);



    var htmltext = `<div>

                        <span></span>

                    </div>`;



    var msg2 = `今

    天

    天

    气

    真

    "

    ${a}

    "

    啊

    `;

    var msg3 = `今天天气真'${a}'啊`;



    console.log(msg2);

    console.log(msg3);