function Student(myName, myAge, myScore) { Person.call(this,myName,myScore);//在子类中通过...call/apply方法借助父类的构造函数 //1`改变函Person的this指向,使之指向Student; } Student.prototype=...student的实例对象--》student的构造函数--》然后是person的实例对象--》 Student.prototype.coustructor指向了student的构造函数。...){ console.log(this.name, this.age); } } /* 1.在ES6...中如何继承 1.1在子类后面添加extends并指定父类的名称 1.2在子类的constructor构造函数中通过super方法借助父类的构造函数 */
run"); } } let p=new Person("cyg",20); p.say(); console.log(Person.num); Person.run(); */ //以下es6...constructor(myName, myAge) { this.name = myName; this.age = myAge; } //es6...中实例的和静态的属性与方法....", 18); p.say(); console.log(Person.num); Person.run();*/ /* class Person { // 在ES6...标准中添加实例属性都需要在constructor中添加 constructor() { this.name="cyg"; this.age=20;
在编码过程中,我们经常定义许多对象和数组,然后有组织地从中提取相关的信息片段。ES6 中添加了可以简化这种任务的新特性:解构。解构是一种打破数据结构,将其拆分为更小部分的过程。...这段代码中 details.firstName 的值被存储在变量 firstName 中,details.age 的值被存储在变量 age 中。这是对象解构的最基本形式。...在上面的代码中,我们从数组 list 中解构出数组索引 0 和 1 所对应的值并分别存储至变量 houseNo 和 street 中。...这段代码中使用解构语法从数组 list 中获取索引 0 和索引 2 所对应的元素,city 前的逗号是前方元素的占位符,无论数组中的元素有多少个,都可用这种方式来提取想要的元素。...不定元素 在数组中,可以通过...语法将数组中的其余元素赋值给一个特定的变量,就像这样: ?
ES6相关概念(★★) 什么是ES6 ES 的全称是 ECMAScript , 它是由 ECMA 国际标准化组织,制定的一项脚本语言的标准化规范。 版本更新 为什么使用 ES6 ?...ES6新增语法 let(★★★) ES6中新增了用于声明变量的关键字 let声明的变量只在所处于的块级有效 if (true) { let a = 10; } console.log(a...区别 解构赋值(★★★) ES6中允许从数组中提取值,按照对应位置,对变量赋值,对象也可以实现解构 数组解构 let [a, b, c, d, e] = [1, 2, 3]; console.log...,变量的值为undefined 数组解构用中括号包裹,多个变量用逗号隔开,对象解构用花括号包裹,多个变量用逗号隔开 利用解构赋值能够让我们方便的去取对象中的属性跟方法 箭头函数(★★★) ES6中新增的定义函数的方式...this,箭头函数中的this指向是它所定义的位置,可以简单理解成,定义箭头函数中的作用域的this指向谁,它就指向谁 箭头函数的优点在于解决了this执行环境所造成的一些问题。
推荐 菜鸟教程 https://www.runoob.com/w3cnote/es6-object.html 本文中也穿插讲了函数 如果不懂 移步 js入门(ES6)[五]—函数 对象 什么是对象...对象就是一个个体 比如人 属性有 耳朵 眼睛 鼻子 等等 人会动 会吃饭 会说话 定义对象 对象有属性 好比人有眼睛鼻子 对象有方法 好比人会说话吃饭 属性定义 代码中的方法都可以 name:“属性值...注意是属性名 方法其实也是 对象的属性 只不过可以执行 方法的定义也有很多种方法 普通定义 类似于下面的say say: function(){xxxx} 引用外部方法 如下的look 在外部定义 引用时这样写...console.log(people.say()) console.log(people) 关于this 其实我们一直都省略了this 一般this指向window 因为在window这个对象中...console.log(this.people) console.log(this.num1) console.log(this) console.log(window) 但是在window下属的对象中
推荐菜鸟es6教程 https://www.runoob.com/w3cnote/es6-function.html 本文中也穿插讲了 对象 如果不懂 请移步 js入门(ES6)[四]—对象...函数 什么是函数 基础函数 函数返回值return 返回一个值 中断函数的执行 带参函数 一个带名参数 两个或多个参数 不定参数 不定参数和带名参数一起 不定参数和一个带名参数 不定参数和多个带名参数...} var str = hello() console.log(hello()) console.log(str) 中断函数的执行 如果不加return 是这样的 function hello() {...我今年" + theFun[1] + "我手机号" + phone + "住址" + address) } hello(12345678900, "太空", "小红", 18) 嵌套函数 在一个函数中...是和外部的this一样的 都是window 所以 箭头函数使用场景 使用在想要调用 外部参数的时候 而非箭头函数想要引用外部参数怎么办呢 使用一个参数引用this var a = 2; let
文章目录 JS es6的Class类详解 class基本语法 Class的基本语法之constructor Class的基本语法之类的调用方式 Class的基本语法之getter和setter Class...的基本语法之类的属性名 Class的基本语法的特别注意点 Class的静态属性和方法 Class的私有方法和私有属性 构造函数的新属性 构造函数的新属性 JS es6的Class类详解 class基本语法...上面代码中,Square类的方法名getArea,是从表达式得到的。...(2)不存在提升 new foo(); class foo{}; 上面代码中,Foo类使用在前,定义在后,这样会报错,因为 ES6 不会把类的声明提升到代码头部。...类相当于实例的原型,所有在类中定义的方法,都会被实例继承。
web开发 实现web中功能 js是解释型语言,我们在编译c语言时,会发现下面有个编译成功,然后出现exe文件,再运行exe文件,就是直接编译成机器语言,但是js不是编译后运行,而是边运行边解释,不直接生成机器语言...,先生产中间代码,然后由解释器边解释边运行 ECMAScript 6.0 简称ES6:是JS的版本标准,2015.06 发版。...重要的事情说三遍,多看文档 JavaScript ES6 JS—赋予网页生命 一个简单的小示例带你了解js的效果 首先,给网页一个"脸" ? <!...学习JS的方法 多学多练习多看文档 JavaScript手册 ES6教程 大家好,我是代码哈士奇,是一名软件学院网络工程的学生,因为我是“狗”,狗走千里吃肉。...想把大学期间学的东西和大家分享,和大家一起进步。但由于水平有限,博客中难免会有一些错误出现,有纰漏之处恳请各位大佬不吝赐教!
Node.js 中使用 ES6 中的 import / export 的方法大全 三种方法。 先上图。...image.png 方法1 放弃使用 ES6, 使用 Node中的 module 模块语法 util_for_node.js function log(o) { console.log(o);...因为一些历史原因,虽然 Node.js 已经实现了 99% 的 ES6 新特性,不过截止 2018.8.10,How To Enable ES6 Imports in Node.JS 仍然是老大难问题...中使用 ES6 中的 import / export 方法。...Modules规范的Node文件方案在一片讨论声中应运而生。
作者:kurtshen ES6 新增了几种集合类型,本文主要介绍Set以及其使用。 其基本描述为: Set对象是值的集合,你可以按照插入的顺序迭代它的元素。...Set中的元素只会出现一次,即 Set 中的元素是唯一的。 它的声明: new Set([iterable]); 其中iterable是一个可迭代对象,其中的所有元素都会被加入到 Set 中。...对于ruby或者是python比较熟悉的同学可能会比较了解set这个东东。它是ES6 新增的有序列表集合,它不会包含重复项。...但其实Set集合中的值是不能重复的,如果所需要的数据结构是要允许有重复项的,那么Set也没有什么用。...,而Array中可以存储重复的元素。
ES6 提供的许多新特性。...用这些新特性,我们能在不降低代码可读性与维护性的基础上畅快地写 JavaScript~ 箭头函数 将数组的内容 * 2 以前我们这么写 [1, 2, 3].map(function(each){...return each * 2; }); 用 ES6 只需这样写 [1, 2, 3].map(each=> each * 2); // 或 [1, 2, 3].map((each)=> each * 2...return each * 2; }); 默认参数 以前我们这么写 var introSomeBody = fuction(name){ name = name || 'Jack'; } 用 ES6...return nums.reduce((prev, curr)=>{ return prev + curr; }, 0); } 解构(Destructuring)赋值 交换两个变量的值
在网上了解了ES6模块的一个基本机制,所以记录一下笔记。 ES6中模块不会重复执行 一个模块无论被多少个地方引用,引用多少次,模块内部始终只执行一次。...ES6中模块输出值的引用 在ES6中,导出输出的值会动态关联模块中的值: // count.js let count = 0 let add = function () { count ++ } export...,优先于模块中的其他部分的执行。...感觉CommonJS的加载方式套用在ES6,ES6的加载方式套用在CommonJS都能说的通。。CommonJS模块不也是只会加载一次嘛,套用在ES6感觉都没毛病。。。...但是,ES6可以执行上面的代码,a.js之所以能够执行,原因就在于ES6加载的变量都是动态引用其所在模块的。只要引用存在,代码就能执行。
在ES6之前,如果我们想要将字符串和一些动态的变量(标识符)拼接到一起,是非常麻烦和丑陋的 ES6允许我们使用字符串模板来嵌入JS的变量或者表达式来进行拼接: 首先,我们会使用 `` 符号来编写字符串...`) // => age is 23 // ${expression}中可以使用合法的js表达式 console.log(`age is ${age * 2}`) // => age is 46 function...// => 1 } baz() 复制代码 剩余参数 ES6中引用了rest parameter,可以将不定数量的参数放入到一个数组中 以......,而 arguments 对象包含了传给函数的所有实 arguments对象不是一个真正的数组,而rest参数是一个真正的数组,可以进行数组的所有操作 rest参数是ES6中提供的一种替代arguments...,从而覆盖掉它内部的某个属性 Symbol就是为了解决上面的问题,用来生成一个独一无二的值 Symbol值是通过Symbol函数来生成的,生成后可以作为属性名 在ES6中,对象的属性名可以使用字符串,也可以使用
js是单线程执行 同一时间只能做一件事(任务) 但是有子线程 任务分两种 一种是同步任务 一种是异步任务 同步任务在主线程中排队执行 异步任务进入一个任务队列 在同步任务形成的执行栈完成后 再执行异步任务的队列中的任务....then(() => { console.log(4) }); five() 异步编程 Promise 对象 Generator 函数 基础用法 async 函数 基础用法 小示例 菜鸟教程的相应教程地址...es6菜鸟Promise对象 es6菜鸟Generator函数 es6菜鸟async函数 Promise 对象 promise可以获取异步操作的信息 主要有三种状态 pending(进行中)...为定时器 用法为setTimeout(function(){},time) function()为你要执行的 time为触发时间 比如2000 就是2秒后触发 Generator 函数 使用 yield...} async function testOne() { let data = 111; data = await one(); console.log(data) } testOne() 打印的是
✍️ 作者简介: 前端新手学习中。...作者主页: 作者主页查看更多前端教学 专栏分享:css重难点教学 Node.js教学 从头开始学习 ajax学习 目录 声明定义Symbol的几种方式 使用Symbol解决字符串耦合问题 扩展特性与对象属性保护...声明定义Symbol的几种方式 Symbol类型具有唯一性。...hd.name = 'xiaoxie' console.log(hd.name);//undefined 给创建的symbol变量添加描述 //添加描述 let hd = Symbol("坚毅的小解同志...iterator of Object.getOwnPropertySymbols(hd)) { console.log(iterator);//Symbol(这是一个Symbol类型) } //遍历对象中的所有属性
大家好,又见面了,我是你们的朋友全栈君。 es6尚未得到所有浏览器的全部支持将es6转化为es5必要。...在项目中创建 babel.config.js 文件(不可更改) 在文件中写入如下代码 const presets =[ ["@babel/env", { targets: {...文件中 测试 import m2 ,{ pink as start} from '..../m1.js'; console.log(m2); console.log(start); 如果只是单纯的执行某一文件可以直接调用 import 文件路径 调用文件使用 npx babel-node...如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。
ES6解构:es6允许按照一定模式,从数组和对象中提取值,对变量进行赋值,这被称之为解构。 解构赋值是对赋值运算符的扩展。 他是一种针对数组或者对象进行模式匹配,然后对其中的变量进行赋值。...在代码书写上简洁且易读,语义更加清晰明了;也方便了复杂对象中数据字段获取。 解构模型 在解构中,有下面两部分参与: 1.解构的源,解构赋值表达式的右边部分。...undefined 解构一般有三种情况,完全解构,不完全解构,解构不成功,在上述例子中存在完全解构和解构不成功的例子,下面来看一下不完全解构的例子 let [x,y] = [1,2,3]; console.log...console.log(y); //b let [x,y = 'b'] = ['a',undefined]; console.log(y); //b ,数组成员为undefined时,默认值仍会生效(因为在ES6...,而不是为变量x和y指定默认值,所以与前一种写法的结果不太一样,undefined 就会触发函数的默认值 7.对象解构中的 Rest let {a, b, ...rest} = {a: 10, b: 20
class不存在变量提升 new A(); // ReferenceError class A {} 因为 ES6 不会把类的声明提升到代码头部。...ES6的继承机制完全不同,实质是先将 父类实例对象的属性和方法,加到 this 上面(所以必须先调用 super 方法),然后再用子类的构造函数修改 this。...ES6 要求,子类的构造函数必须执行一次super函数。...也就是说,super()内部的this指向的是B。 super作为对象调用 在普通方法中,指向父类的原型对象;在静态方法中,指向父类。...ES6的继承和ES5的继承区别在于: ES5的继承,实质是先创建了子类的实例对象 this, 然后再将 父类的方法添加到 this上面 ES6的继承是先将父类实例对象的属性和方法,加到 this 上面(
ES6标准新增了一种新的函数:Arrow Function(箭头函数)。为什么叫Arrow Function?...因为它的定义用的就是一个箭头: x => x * x 相当于: function(x){ return x*x; } 箭头函数相当于匿名函数,并且简化了函数定义。...箭头函数表达式的语法比函数表达式更简洁,并且没有自己的this,arguments,super或new.target。箭头函数表达式更适用于那些本来需要匿名函数的地方,并且它不能用作构造函数。...[i]; } return sum; } 如果要返回一个对象,就要注意,如果是单表达式,这么写的话会报错: // SyntaxError: x => { foo: x } 因为和函数体的{...... }有语法冲突,所以要改为: // ok: x => ({ foo: x }) this 箭头函数看上去是匿名函数的一种简写,但实际上,箭头函数和匿名函数有个明显的区别:箭头函数内部的this是词法作用域
先说一下async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,因为async就是异步的意思, 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。...这时,你可能注意到控制台中的Promise 有一个resolved,这是async 函数内部的实现原理。...其实它后面可以放任何表达式,不过我们更多的是放一个返回promise 对象的表达式。...就这一个函数,我们可能看不出async/await 的作用,如果我们要计算3个数的值,然后把得到的值进行输出呢?...再总结一下: async和await基本是组合使用的,async用来声明一个异步方法,返回的是一个promise对象,如果要获取到对应的返回值,就需要使用.then方法(不清楚的可以查看promise对象
领取专属 10元无门槛券
手把手带您无忧上云