当前位置：网站首页>ES6-- 模板字符串、对象的简化写法、箭头函数

ES6-- 模板字符串、对象的简化写法、箭头函数

2022-06-25 21:50:00 【攀登程序猿】

模板字符串 -- `我是超人`

特点：

（1）支持换行 -- 书写html标签的时候会使用

（2）支持连接 --

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>Title</title>
	</head>
	<body>
		<div class="container">

		</div>

		<script>
            // 支持换行与拼接
            let container = document.querySelector('.container')
            let apple = '苹果'
            let pear = '梨'
            container.innerHTML = `<ul>
<li>${apple}</li>
<li>${pear}</li>
</ul>`

		</script>
	</body>
</html>

那么字符串拼接哪家好呢？

JS中三种字符串连接方式及其性能比较_lxw1844912514的技术博客_51CTO博客

【js运算性能系列】拼接字符串的方法及性能比较 - SegmentFault 思否

结论就是：

在旧浏览器（ie7-）下用 join 会更高效。
在现代浏览器，尽量用"+",更高效。
当然，在少数现代浏览器里 “+” 不一定会比 join 快（如，safari 5.0.5，opera 11.10)
本身是字符串数组的，直接 join 会更好。
在"+"与concat之间，当然是优选使用"+"，方便又直观又高效。

对象的简化写法

特点：

（1）属性名和变量一致时，可以直接给定，定义的方法也可以省略function

            let name = '尚硅谷'
            let change = function () {
                console.log('我来自尚硅谷')
            }
            const school = {
                name,
                change,
                improve() {
                    console.log('我可以提高技能')
                }
            }

箭头函数

特点：

（1）简化函数的书写，尤其是回调函数

（2）箭头函数只能用赋值式写法，不能用声明式写法

（3）如果参数只有一个，可以不加括号，如果没有参数或者参数多于一个就需要加括号

（4）如果函数体只有一句话，可以不加花括号

（5）如果函数体没有括号，可以不写return，箭头函数会帮你return

（6）不能作为构造函数实例化对象 let User = (name,age)=>{XXX}；new User是会报错的

（7）不能使用arguments变量，let User = (name,age)=>{console.log(this,arguments)}；arguments会报错

（8）this指向的是所在的对象的父级函数的作用域（function）

            let obj1 = {
                xiaopin: '卖车',
                sayHello: function () {
                    let sayHello = () => console.log(this)
                    sayHello()
                }
            }
            obj1.sayHello()

可以明显观察到，箭头函数的父级（函数）是function sayHello，function sayHello的作用域为obj1

参考自：JS中的箭头函数与this - Rogn - 博客园

ES6箭头函数的this指向详解_深漂程序员小庄的博客-CSDN博客_es6箭头函数的this

尚硅谷Web前端ES6教程，涵盖ES6-ES11_哔哩哔哩_bilibili

this问题

JsvaScript中的this

(1)作为函数被调用，在非严格模式下，this指向的是window；在严格模式下，this指向的是undefined

	<body>
		<div class="container"></div>
		<script>
            function f() {
                console.log(this)
            }
            f()

		</script>
	</body>

上面的实例是非严格模式，输出的结果如下，可以看出明显是window：

	<body>
		<div class="container"></div>
		<script>
            function f() {
                'use strict'
                console.log(this)
            }
            f()

		</script>
	</body>

图中，'use strict'是设置严格模式，那么什么是严格模式呢？JavaScript 严格模式

(2)作为对象的方法调用时，此时指向方法的所有者，即对象

注：箭头函数是没有历史的，继承的是父级函数的作用域的历史，即obj的历史，即window

            let obj = {
                name: '赵云',
                show1() {
                    console.log('show1:', this)
                }, // obj

                show2: function () {
                    console.log('show2', this)
                }, // obj


                show3: () => {
                    console.log('show3', this)
                } // window
            }
            obj.show1();
            obj.show2();
            obj.show3();

（3）作为构造函数来使用时

构造函数的三步
（1）构造了一个空对象
（2）将空对象的this传递给User，并且赋值 
（3）将新对象作为new的结果返回
（4）如果构造函数返回为引用对象，则返回的是引用对象

            function User() {
				this.wx = '公众号';
				this.bilibili = 'hhh';

            }

            let hhh = new User();
            console.log('hhh',hhh) // 输出对象

			// 构造函数的三步（1）构造了一个空对象（2）将空对象的this传递给User，并且赋值 (3)将新对象作为new的结果返回
			// 那么既然返回了，那如果构造函数有返回值，会如何呢
            function User1() {
                this.wx = '公众号';
                this.bilibili = 'hhh';
				return '罗浩三'
            }

            let hhh1 = new User1();
            console.log('罗浩三',hhh1) // 公众号，hhh


            function User2() {
                this.wx = '公众号';
                this.bilibili = 'hhh';
                return {
                    name:'罗浩三',
	                age:18
                }
            }

            let hhh2 = new User2();
            console.log('罗浩三',hhh2) // 罗浩三 18


            function User3() {
                this.wx = '公众号';
                this.bilibili = 'hhh';
                return ['罗浩三',18]
            }

            let hhh3 = new User3();
            console.log('罗浩三',hhh3) // 罗浩三 18

（4）通过call和apply显示的修改this

方法中的this，在非严格模式下会显示window，使用call和apply可以设置方法中的this指向谁

注：箭头函数使用call和apply也是不会生效的，还是继承父级的this

			let objCall = {
			    name:'关羽',
				age:18
			}

            function f() {
                console.log(this,arguments)
            }

            f.call(objCall,1,2,3)
			f.apply(objCall,[1,2,3])

            let obj = {
                name: '赵云',
                show1() {
                    console.log('show1:', this)
                }, // obj

                show2: function () {
                    console.log('show2', this)
                }, // obj


                show3: () => {
                    console.log('show3', this)
                } // window
            }
            obj.show1();
            obj.show2();
            obj.show3();

            obj.show1.call(objCall);
            obj.show2.call(objCall);
            obj.show3.call(objCall);