ES6箭头函数和模板字符串

简介: ES6箭头函数和模板字符串

具体内容:

箭头函数的声明:

Es6允许使用箭头函数(=>)定义

上面是箭头函数的语法和例子 箭头函数的作用:简化断码,使用方便 关于箭头函数中this的指向: 普通函数中的this: This总是表示他的直接调用者(js的this是执行上下文)例如:obj.func,那么func中的this值得就是obj 在默认情况下(非严格模式下,未使用‘user starict’),没找到直接调用者,则this指的是window(约定俗成) 在严格模式下,没有直接调用者的函数中的this,是undefined 使用call,apply,bind(es5新增)绑定的,this指的是绑定的对象 //如果说使用箭头函数传入对象的话,也就是json的格式 var p =name =>({name:"杨过a",age:18}) console.log(p("a"))

//声明一个对象
function Person(name,age) {
    this.name = name;
    this.age = age;
}
let v = new Person("wyh",30);
p.say = function () {
    console.log(this.name+"==="+this.age);
}
p.say();
console.log(v)

我们在来写个例子看一下我们所说的哪两种情况

我们使用绑定的形式可以解决这个问题

这样我们在控制台就可以看到不在是undefined的找不到了

箭头函数中的this:

在箭头函数中,没有自己的this,他的this是继承而来的;默认的指向在定义他时的对象(宿主对象),而不是执行时的对象,定义他的时候,可能环境时window;箭头函数可以方便的让我们在setTimeout,setInterval中方便的使用this

箭头函数中this指向的固定化,并不是因为箭头函数的内部有this绑定机制,实际原因是箭头函数根本没有自己的this,导致内部的this就是外层代码块的this

那我们可以改变一下我们的代码看看

数组的新方法:

Map 映射

Reduce 汇总

Filter 过滤器

forEach 循环(迭代)

Some() 一个为true就会返回true

every() 必须所有都为true才会返回true

模板字符串和字符串中新增的方法: StartsWith 以什么什么开始 endsWith 以什么什么结束 函数的参数三点运算符号: 解构赋值: 注意: 1. 左右两边结构必须一样 2. 右边必须有值 3. 声明和赋值不能分开


目录
相关文章
|
8月前
ES6之箭头函数
ES6之箭头函数
|
2月前
|
JavaScript
哪些场景适合使用 ES6 的箭头函数?
总之,当需要简洁地定义函数、处理回调函数、避免 `this` 指向问题以及进行函数式编程等场景时,ES6的箭头函数都是一个很好的选择。但需要注意的是,箭头函数也有一些限制,如不能作为构造函数使用等,在使用时需要根据具体情况进行选择。
|
2月前
|
安全 JavaScript 前端开发
es6 箭头函数
【10月更文挑战第26天】ES6箭头函数为JavaScript开发者提供了一种更简洁、更直观的函数定义方式,同时其独特的`this`绑定和无`arguments`对象等特性也使得在一些特定场景下的代码编写更加方便和安全,但在使用时也需要注意其与普通函数的区别,以确保正确地使用和理解箭头函数。
117 62
|
2月前
|
自然语言处理
ES6 中箭头函数和普通函数区别
【10月更文挑战第19天】这些仅是对箭头函数和普通函数区别的一些主要方面进行的详细阐述,实际应用中可能还会有更多具体的细节和情况需要进一步探讨和理解。可以根据自己的需求进一步深入研究和实践,以更好地掌握它们在不同场景下的应用。
39 2
|
4月前
|
JavaScript 前端开发
ES6+ 特性,箭头函数、解构赋值、模块导入
ES6+ 特性,箭头函数、解构赋值、模块导入
ES6学习(4)箭头函数
ES6学习(4)箭头函数
|
8月前
Es6箭头函数
Es6箭头函数
76 0
|
前端开发
ES6系列笔记-箭头函数
ES6系列笔记-箭头函数
33 1

热门文章

最新文章