模板字符串 -- `我是超人`
特点:
(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);