推荐菜鸟es6教程 https://www.runoob.com/w3cnote/es6-function.html 本文中也穿插讲了 对象 如果不懂 请移步 js入门(ES6)[四]—对象...函数 什么是函数 基础函数 函数返回值return 返回一个值 中断函数的执行 带参函数 一个带名参数 两个或多个参数 不定参数 不定参数和带名参数一起 不定参数和一个带名参数 不定参数和多个带名参数...嵌套函数 对象内函数(方法) 箭头函数 基础写法 带参数写法 一个参数 两个或多个参数 不定参数 不定参数和带名参数一起 一个带名参数 多个带名参数 用法 什么是函数 其实就是把一些操作封装起来...方便多次使用 一般大公司会要求 函数不得超过 几行 超过就要再写个函数嵌套 基础函数 //写一个名为 hello的函数 function hello(){ console.log("hello world...在一个函数中 调用另外一个函数 function say() { console.log("hello") } function hello() { say() } hello() 对象内函数
JS中this的四种用法 1.在一般函数方法中使用 this 指代全局对象 function test(){ this.x = 1; alert(this.x); } test(...如果把最后一行代码修改为 o.m.apply(o); //1 ES6中箭头函数与普通函数this的区别 普通函数中的this: 1. this总是代表它的直接调用者, 例如 obj.func ,那么...结果:window,window 第一个this:f1调用时没有宿主对象,默认是window 第二个this:继承父级的this,父级的this指代的是window 关于this指向问题的讨论一直是学习js...); }); } } obj.fn();//object this又指向函数的宿主对象了 为了更加清楚的对比一般函数和箭头函数this指向的区别,我们给对象添加变量 var obj=...,this指向了window(匿名函数,没有调用的宿主对象),而window对象并没有num属性(num属性在obj中定义),而在使用箭头函数的情况下,this的指向却对象obj1,自然可以输出obj1
// 从ES6开始, 可以直接在形参后面通过=指定默认值 // 注意点: ES6开始的默认值还可以从其它的函数中获取 第七绝·: JS匿名函数核心 16 <body...{}中的的作用域, 我们称之为"局部作用域" 3.在ES6中只要{}没有和函数结合在一起, 那么应该"块级作用域" 4.块级作用域和局部作用域区别 4.1...之前和ES6分开研究 1.需要明确: 1.ES6之前定义变量通过var 2.ES6之前没有块级作用域, 只有全局作用域和局部作用域 3.ES6之前函数大括号外的都是全局作用域...浏览器在执行JS代码的时候会分成两部分操作:预解析以及逐行执行代码 也就是说浏览器不会直接执行代码, 而是加工处理之后再执行, 这个加工处理的过程, 我们就称之为预解析 2.预解析规则
箭头函数提供了一种更加简洁的函数书写方式。...var f = (a,b) => a+b; f(6,2); //8 当箭头函数函数体有多行语句,用 {} 包裹起来,表示代码块,当只有一行语句,并且需要返回结果时,可以省略 {} , 结果会自动返回。...this 对象,是定义函数时的对象,而不是使用函数时的对象。...,也就是不能使用 new 命令,否则会报错 适合使用的场景 ES6 之前,JavaScript 的 this 对象一直很令人头大,回调函数,经常看到 var self = this 这样的代码,为了将外部...this 传递到回调函数中,那么有了箭头函数,就不需要这样做了,直接使用 this 就行。
ES6相关概念(★★)什么是ES6ES 的全称是 EC... 请注意,本文编写于 2056 天前,最后修改于 169 天前,其中某些信息可能已经过时。...ES6相关概念(★★) 什么是ES6 ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 版本更新 为什么使用 ES6 ?...ES6新增语法 let(★★★) ES6中新增了用于声明变量的关键字 let声明的变量只在所处于的块级有效 if (true) { let a = 10; } console.log(a...(★★★) ES6中新增的定义函数的方式。...() => {} // ():代表是函数; =>:必须要的符号,指向哪一个代码块;{}:函数体 const fn = () => {} //代表把一个函数赋值给fn fn(); // 调用函数 函数体中只有一句代码
第一部分,ES6 中的 Generator 在 ES6 出现之前,基本都是各式各样类似Promise的解决方案来处理异步操作的代码逻辑,但是 ES6 的Generator却给异步操作又提供了新的思路...说来话长,这要从 ES6 的另一个概念Iterator说起。 第二部分,Iterator 遍历器 ES6 中引入了很多此前没有但是却非常重要的概念,Iterator就是其中一个。...其中,Set和Map也是 ES6 中新增的数据类型。...yield 'x' yield 'y' } for (let item of G1()) { console.log(item) } 之前学过的yield后面会接一个普通的 JS...不过,JS 还是 JS,单线程还是单线程,异步还是异步,callback还是callback。这一切都不会因为有一个Generator而有任何变化。
ES6之后,允许使用箭头=>来定义函数。首先我们来总结一下箭头函数存在的意义,之后再来细细的看它的使用方法。...箭头函数表达式的语法比函数表达式更短,并且不绑定自己的this,arguments,super或者new.target。这些函数表达式最适合用于非方法函数,并且它们不能用作构造函数。...() => {函数声明} 箭头函数的一个用处就是简化回调函数。...,这个箭头函数的定义生效是在foo函数生成时的,而它的真正执行要等到100毫秒之后,如果是普通函数,执行时this应该指向全局函数window,这时应该输出21。...建议参考阮一峰老师的ES6的这本书。
ES6(ECMAScript 2015)引入了箭头函数(Arrow Functions),它是一种更简洁和更具表达力的函数定义方式。...箭头函数具有更短的语法形式,隐式绑定了this,并且没有自己的this、arguments、super 或 new.target。基本语法:箭头函数使用箭头(=>)来分隔参数和函数体。...在上面的示例中,我们定义了一个简单的箭头函数hello,它不带参数,并在函数体中打印了一条消息。隐式返回:箭头函数还具有隐式返回的特性。...在greet方法内部,我们使用箭头函数来定义一个延迟执行的函数,该函数打印问候消息并使用this.name访问person对象的name属性。...注意事项:尽管箭头函数具有许多优点,但也有一些限制和注意事项:箭头函数没有自己的this,因此无法用作构造函数。箭头函数也没有自己的arguments对象,但可以通过使用剩余参数语法来获取参数。
带默认值参数的函数:var get_name = function(url, id=1, callback){}; 如果传入了第二个参数,将不会使用默认值 如果给第二个参数赋值为undefined...延展运算符:var args = ['url', 123, 'st']; get_names(...args); new.target: 使用new创建一个对象时,会被赋值为新对象的构造器 ES6...允许在代码块中定义函数,在严格模式中,块级函数只能在块级作用域中使用,而非严格模式中,块级函数会被提升到全局 箭头函数 没有this,super,arguments,new.target,这些值由所在的...、最靠近的非箭头函数来决定 不能使用new来调用 没有原型 不能更改this 不允许有重复的具名参数 语法 var reflect = value => value; var sum...) 进行尾调用的函数在尾调用返回结果后不能做额外操作 尾调用的结果作为当前函数的返回值
箭头函数是Es6新增加的一个语法特性,在简化编码方面,有着巨大亮点。 下文就是我对于箭头(=>)函数的定义与实用说明。...(a, b){return a + b;} console.log(add(1, 1)) 运行结果 用法三(箭头函数的代码块大于一行...定于语法 // 这个正常写法需要写到上面 不然语法报错 [1,2,3].map(function (x) { return x + x; }); // =>函数写法...> // 这个正常写法需要写到上面 不然语法报错 [1,2,3].map(function (x) { return x + x; }); // =>函数写法
推荐 菜鸟教程 https://www.runoob.com/w3cnote/es6-object.html 本文中也穿插讲了函数 如果不懂 移步 js入门(ES6)[五]—函数 对象 什么是对象...Object.assign(本体,拓展1,拓展2…) 使用如下 Object.assign(people, { say: function() { return "hello" } }) 一样可以引用外部函数
myName, myAge, myScore) { Person.call(this,myName,myScore);//在子类中通过call/apply方法借助父类的构造函数...student的实例对象--》student的构造函数--》然后是person的实例对象--》 Student.prototype.coustructor指向了student的构造函数。...){ console.log(this.name, this.age); } } /* 1.在ES6...中如何继承 1.1在子类后面添加extends并指定父类的名称 1.2在子类的constructor构造函数中通过super方法借助父类的构造函数 */
ES6中可以使用rest参数,单独使用时返回null。 注意:Function.arguments[]与内部属性arguments是不一样的。...提示:在ES6中新增加了变量声明的关键字let与const,用let和const声明的变量可以受到块作用域的约束,只能在定义它们的块中访问。...var a=undefined; console.log(a); console.log(b); a=100; //未使用var声明的变量,没有hosting b=200; 在ES6...使用IIFE封装代码并保存到一个独立的.js文件中,测试不同参数的输出结果。 推荐实现步骤 步骤1:编写JavaScript脚本,分阶段完成功能。...setsex("女"); console.log(stu.getuid()+","+stu.getsex()); //102,女 七、源代码 https://gitee.com/zhangguo5/JS_ES6Demos.git
ES6基础系列(三)箭头函数 一、基本用法 先来看看 ES5 中我们怎么写一个函数 const foo = function (num) { return num + 1; }; 再来看看...ES6 为我们提供的箭头函数 const foo = (num) => num + 1; 看这个例子难道箭头函数是为了让我们的代码看上去更“高大上”吗?...箭头函数中的 this,就绑定在它最近一层非箭头函数的 this. 一句话理解:箭头函数内部的 this 是词法作用域,由上下文确定。...this 指向对象 第二个箭头函数,它的 this 绑定在最近一层非箭头函数,也就是 obj 上 2.2 没有 arguments 箭头函数没有自己的 arguments 对象,这不一定是件坏事,因为箭头函数可以访问外围函数的...参考 ES6 系列之箭头函数 廖雪峰:箭头函数 写在最后 关于我 花名:余光(沉迷 JS,虚心学习中) 如果您看到了最后,对文章有任何建议,都可以在评论区留言 这是文章所在 GitHub 仓库的传送门,
函数参数的默认值 与解构赋值默认值结合使用 rest参数 严格模式 name 属性 箭头函数 嵌套的箭头函数 函数参数的尾逗号 函数参数的默认值 ES6 之前,不能直接为函数的参数指定默认值,只能采用变通的方法...function foo() {} foo.name // "foo" 这个属性早就被浏览器广泛支持,但是直到 ES6,才将其写入了标准。 需要注意的是,ES6 对这个属性的行为做出了一些修改。...如果将一个匿名函数赋值给一个变量,ES5 的name属性,会返回空字符串,而 ES6 的name属性会返回实际的函数名。...var f = function () {}; // ES5 f.name // "" // ES6 f.name // "f" 如果将一个具名函数赋值给一个变量,则 ES5 和 ES6 的name...const bar = function baz() {}; // ES5 bar.name // "baz" // ES6 bar.name // "baz" 箭头函数 ES6 允许使用“箭头”(
构造函数继承的概念构造函数继承是一种通过创建子类来继承父类的属性和方法的方式。通过构造函数继承,子类可以获得父类的实例属性,并且可以调用父类的构造函数来初始化这些属性。...构造函数继承的关键在于使用super()函数在子类的构造函数中调用父类的构造函数。这样可以确保子类继承了父类的属性,并完成了属性的初始化过程。...语法ES6中构造函数继承的语法如下:class ChildClassName extends ParentClassName { constructor(/* 子类构造函数参数 */) { super...然后,在子类的构造函数中使用super()函数来调用父类的构造函数。这样可以确保子类继承了父类的属性,并完成了属性的初始化。示例让我们通过一些示例来理解ES6中构造函数继承的使用。...在子类的构造函数中,我们使用super()函数调用了父类Parent1的构造函数,并分别调用了父类的method1()和method2()方法。
一、函数参数的默认值 1、基本用法 ES6 允许为函数的参数设置默认值,即直接写在参数定义的后面。...函数调用时,函数体内部的局部变量x影响不到默认值变量x。 如果此时,全局变量x不存在,就会报错。...function f(y = x) { let x = 2; console.log(y); } f() // ReferenceError: x is not defined 二、rest 参数 ES6...三、箭头函数 1、基本用法 ES6 允许使用“箭头”(=>)定义函数。...3、嵌套的箭头函数 箭头函数内部,还可以再使用箭头函数。下面是一个 ES5 语法的多重嵌套函数。
// 普通函数 let fun = function () { console.log('原始函数') } fun() // 没有形参的时候 let fun1 = () => console.log...console.log(x, y) return x + y } fun5(30, 31) 箭头函数的this: 箭头函数没有自己的this,箭头函数的this不是调用的时候决定的,而是在定义的时候处在的对象就是它的...this 箭头函数的this看外层是否有函数,如果有,外层函数的this就是内部箭头函数的this,如果没有,则this是window let btn1 = document.getElementById...console.log(this) } } } 箭头函数没有arguments,caller,callee 箭头函数本身没有arguments,如果箭头函数在一个...,要加一个小括号 var func = () => ({ foo: 1 }); //正确 var func = () => { foo: 1 }; //错误 多重箭头函数就是一个高阶函数,相当于内嵌函数
function foo() { setTimeout( () => { console.log("id:", this.id); },...
箭头函数基本形式 wdnda 箭头函数基本特点 「1.箭头函数this为父作用域的this,不是调用时的this」 箭头函数的this永远指向其父作用域,任何方法都改变不了,包括call,apply...普通函数的this指向调用它的那个对象。...「2.箭头函数不能作为构造函数,不能使用new」 由于this必须是对象实例,而箭头函数是没有实例的,此处的this指向别处,不能产生person实例,自相矛盾。「3....箭头函数没有arguments,caller,callee」 箭头函数本身没有arguments,如果箭头函数在一个function内部,它会将外部函数的arguments拿过来使用。...箭头函数返回对象时,要加一个小括号」 var func = () => ({ foo: 1 }); //正确 var func = () => { foo: 1 }; //错误 「8.箭头函数在ES6
领取专属 10元无门槛券
手把手带您无忧上云