搜索
您的当前位置:首页ES6中Class类的静态方法

ES6中Class类的静态方法

时间:2023-11-30 来源:乐玩宠

本文主要介绍了ES6中Class类的静态方法,结合实例形式简单总结分析了ES6中class类中静态方法的使用方法与相关注意事项,需要的朋友可以参考下,希望能帮助到大家。

以前看过的es6的东西,又忘了,再总结下:

类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”

上面代码中,Foo类的classMethod方法前有static关键字,表明该方法是一个静态方法,可以直接在Foo类上调用(Foo.classMethod()),而不是在Foo类的实例上调用。如果在实例上调用静态方法,会抛出一个错误,表示不存在该方法。

父类的静态方法,可以被子类继承。

上面代码中,父类Foo有一个静态方法,子类Bar可以调用这个方法。

小编还为您整理了以下内容,可能对您也有帮助:

es6 Class中的set和get

问题记录

1.set和get

  ES6中的get和set

当你在声明一个类的时候,有些属性,是不希望别人可以随意的对它进行更改的,也就是把它定义为  私有属性 ,在ES5的时候基本不可能做到,但是在ES6的时候是可以办到的,而这个就是通过 get 来实现。

在这里定义一个私有属性的时候,用户访问这个属性的入口,跟这个属性的值的存储位置是不一样的,

而且这个时候的age修改是不会被改变的,例如:

这里的age,可以使用es6中的set改变

但是本质来说并不是通过改变age的值,二十通过改变_age的值来间接的改变原age的值,有了这个方法就可以有新的玩法了

2.es6挂载静态方法(static)

在es6中引入了新的东西,static

在使用static时,同样的只需要将方法写在class里,然后在方法的前面加个static就行了

es6 Class中的set和get

问题记录

1.set和get

  ES6中的get和set

当你在声明一个类的时候,有些属性,是不希望别人可以随意的对它进行更改的,也就是把它定义为  私有属性 ,在ES5的时候基本不可能做到,但是在ES6的时候是可以办到的,而这个就是通过 get 来实现。

在这里定义一个私有属性的时候,用户访问这个属性的入口,跟这个属性的值的存储位置是不一样的,

而且这个时候的age修改是不会被改变的,例如:

这里的age,可以使用es6中的set改变

但是本质来说并不是通过改变age的值,二十通过改变_age的值来间接的改变原age的值,有了这个方法就可以有新的玩法了

2.es6挂载静态方法(static)

在es6中引入了新的东西,static

在使用static时,同样的只需要将方法写在class里,然后在方法的前面加个static就行了

Class类和function函数的面向对象设计以及用法区别

Class 为es6之后推荐的为了更加体现面向对象思想的一种方式,但从本质上来说它还是原型链的关系,也就是语法糖。而 function 构造函数的方法则是es6之前常规的面向对象思想体现的一种方式。

本篇文章涉及的原理较多,可以结合下列文章:

面向对象思想 、 构造函数和原型及两者作用 、 原型链以及方法执行顺序

在理解class本质之前,我们先根据构造函数的特性:

那么,我们利用 class Person{} 创建出来的类,是否存在这些特征?

由下图可知,类同样有原型对象prototype且prototype中的constructor同样指向Person类,即证明了 1 和 2 两个论点

因此class类与构造函数之间原理是相同的,class是为了更直观体现出面向对象。

PS :Class 内部只有静态方法,没有静态属性。如果必须定义则类似于函数定义静态成员变量的方式:

Person.sex="男"

之后通过调用静态成员的方式调用即可。

类的静态方法:在类中添加 static ,例如:

重点:

类的继承实现有 extends 关键字

此时的 super 方法必须在constructor内部的第一行,即子类的constructor方法没有调用 super 之前,就使用 this 关键字,结果报错,而放在 super 方法之后就是正确的。

构造函数的实现继承

注意构造函数的继承方法则是利用 call 、 apply 改变指针,同时子对象 Son 的原型对象 prototype 指向 Person 的实例对象,于是便与 Person 的原型链连接起来但却拥有自己的属性和方法。

ES6中的class是如何实现的(附Babel编译的ES5代码详解)



序言


这篇文章主要讲解面试中的一个问题 - ES6中的class语法的实现?

ECMAScript 6 实现了class,class是一个语法糖,使得js的编码更清晰、更人性化、风格更接近面向对象的感觉;也使 IDE 、编译期类型检查器、代码风格检查器等工具更方便地检测代码语法,做静态分析。同样的,这给没有类就缺点什么的软件开发工程师一个更低的门槛去接触js。

ES6 class 的 ES5 代码实现


JavaScript语言的传统方法是通过构造函数定义并生成新对象,这种写法和传统的面向对象语言差异较大。所以,ES6引入了Class这个概念作为对象的模板。

constructor


效果:ES6创建一个class会默认添加constructor方法,并在new调用时自动调用该方法。

ES5:

function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.toString = function () {
return '(' + this.name + ',' + this.age + ')';
}
var p = new Person('Mia', 18);
console.log(p);// Person { name: 'Mia', age: 18 }
ES6:

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return '(' + this.name + ',' + this.age + ')';
}
}
var p = new Person('Mia', 18);
console.log(p);// Person { name: 'Mia', age: 18 }
ES6的class中constructor是构造方法,对应的是ES5中的构造函数Person,this关键字则代表实例对象。

里面的class类可以看做是构造函数的另一种写法,由typeof Person === 'function'为true;Person === Person.prototype.constructor为true可以得出,类的数据类型就是函数,类本身指向构造函数。也可以说class的底层依然是function构造函数。

类的公共方法都定义在类的prototype属性上。可以使用Object.assign一次向类添加多个方法。

特别的:class的内部定义的方法都是不可枚举的(non-enumerable),这一点与ES5的行为不一致。

ES5:

Object.keys(Person.prototype); // ['toString']
ES6:

Object.keys(Person.prototype); // Person {}
不可枚举的代码实现会在后面将ES6代码用Babel转码之后解析。

new调用


效果:class类必须使用new调用,否则会报错。

ES5:

Person()// undefined
ES6:

Person() // TypeError: Class constructor Person cannot be invoked without 'new'
实例的属性


效果:实例的属性是显式定义在this对象上,否则都是定义在原型上。类的所有实例共享一个原型对象,与ES5行为一致。

ES5:

function Person() {
this.grade = {
count: 0
};
}
ES6:

class Person {
constructor() {
this.grade = {
count: 0
};
}
}
此外还要关注新提案,Babel已经支持实例属性和静态属性新的写法。

静态方法


类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

注意:如果静态方法包含this关键字,指的是类。

ES5:

function Person() { }
Person.toSay = function () {
return 'I love JavaScript.';
};
Person.toSay(); // I love JavaScript.
ES6:

class Person {
static toSay() {
return 'I love JavaScript.';
}
}
Person.toSay(); // I love JavaScript.
getter 和 setter


ES6提供 get 和 set 关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为,和ES5行为一致。

ES5:

function Person(name) {}
Person.prototype = {
get name() {
return 'mia';
},
set name(newName) {
console.log('new name:' + newName);
}
}
ES6:

class Person {
get name() {
return 'mia';
}
set name(newName) {
console.log('new name:' + newName);
}
}
ES6 class 底层实现原理


下文主要用babel转码器分别对class中几个主要的方法进行转码,分析ES5的实现方式。

Babel是如何编译class的


将下面的代码使用babel转码器转换成ES5代码,按照代码结构和功能分块进行讲解。

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return '(' + this.name + ',' + this.age + ')';
}
}
var p = new Person('Mia', 18);
运行模式


"use strict";//class默认开启严格模式

私有函数:


JS开发者在变量名或函数名前缀加下划线,一般表示私有。

前缀加下划线表示私有仅仅是一个约定俗成的习惯,澄清意图,并没有做其他处理。由于ECMAScript草案中并没有定义私有变量的方法,所以在此限定之下仍可以在函数外或作用域外访问该函数或变量。

_instanceof和_classCallCheck的作用

检查声明的class类是否通过new的方式调用,否则会报错。

function _instanceof(left, right) {
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
return right[Symbol.hasInstance](left);
} else {
return left instanceof right;
}
}
function _classCallCheck(instance, Constructor) {
if (!_instanceof(instance, Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
_createClass和_defineProperties的作用

_createClass函数有三个参数,Constructor是传入构造函数Person,protoProps 是要添加到原型上的函数数组,staticProps 是要添加到构造函数本身的函数,即静态方法。这里的第二个和第三个参数是可以缺省的,会在_createClass 函数体内判断。

_createClass 函数的作用是收集公有函数和静态方法,将方法添加到构造函数或构造函数的原型中,并返回构造函数。

defineProperties 是将方法添加到构造函数或构造函数的原型中的主要逻辑,遍历函数数组,分别声明其描述符。若enumerable 没有被定义为true,则默认为fals,设置 configurable 为true。以上两个布尔值是为了* Object.keys() 之类的方法被遍历到。如果存在 value,就为 descriptor 添加 value 和 writable 属性,如果不存在,就直接使用 get 和 set 属性。

最后,使用 Object.defineProperty 方法为构造函数添加属性。

function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
class类实现


var Person =
/*#__PURE__*/
function () {
function Person(name, age) {
_classCallCheck(this, Person);
this.name = name;
this.age = age;
}
_createClass(Person, [{
key: "toString",
value: function toString() {
return '(' + this.name + ',' + this.age + ')';
}
}]);
return Person;
}();
var p = new Person('Mia', 18);
解析:

不使用new调用时,this指向window,所以instance instanceof Constructor为false,抛出异常。

通过调用_createClass函数,遍历函数数组。key为方法名,若有value说明是有具体的 function 声明,若无 value 说明使用了get 或 set 方法。

结尾


读到这相信大家对class的实现有了更深的理解。最近笔者一边在忙毕业设计,一边整理了这道阿里前端面试题的解析,评论区欢迎对class实现这一问题进行讨论。另外,class中的extend也是很有趣的实现,在下一篇文章会对class实现继承进行解析。

ES6中的class是如何实现的(附Babel编译的ES5代码详解)



序言


这篇文章主要讲解面试中的一个问题 - ES6中的class语法的实现?

ECMAScript 6 实现了class,class是一个语法糖,使得js的编码更清晰、更人性化、风格更接近面向对象的感觉;也使 IDE 、编译期类型检查器、代码风格检查器等工具更方便地检测代码语法,做静态分析。同样的,这给没有类就缺点什么的软件开发工程师一个更低的门槛去接触js。

ES6 class 的 ES5 代码实现


JavaScript语言的传统方法是通过构造函数定义并生成新对象,这种写法和传统的面向对象语言差异较大。所以,ES6引入了Class这个概念作为对象的模板。

constructor


效果:ES6创建一个class会默认添加constructor方法,并在new调用时自动调用该方法。

ES5:

function Person(name, age) {
this.name = name;
this.age = age;
}
Person.prototype.toString = function () {
return '(' + this.name + ',' + this.age + ')';
}
var p = new Person('Mia', 18);
console.log(p);// Person { name: 'Mia', age: 18 }
ES6:

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return '(' + this.name + ',' + this.age + ')';
}
}
var p = new Person('Mia', 18);
console.log(p);// Person { name: 'Mia', age: 18 }
ES6的class中constructor是构造方法,对应的是ES5中的构造函数Person,this关键字则代表实例对象。

里面的class类可以看做是构造函数的另一种写法,由typeof Person === 'function'为true;Person === Person.prototype.constructor为true可以得出,类的数据类型就是函数,类本身指向构造函数。也可以说class的底层依然是function构造函数。

类的公共方法都定义在类的prototype属性上。可以使用Object.assign一次向类添加多个方法。

特别的:class的内部定义的方法都是不可枚举的(non-enumerable),这一点与ES5的行为不一致。

ES5:

Object.keys(Person.prototype); // ['toString']
ES6:

Object.keys(Person.prototype); // Person {}
不可枚举的代码实现会在后面将ES6代码用Babel转码之后解析。

new调用


效果:class类必须使用new调用,否则会报错。

ES5:

Person()// undefined
ES6:

Person() // TypeError: Class constructor Person cannot be invoked without 'new'
实例的属性


效果:实例的属性是显式定义在this对象上,否则都是定义在原型上。类的所有实例共享一个原型对象,与ES5行为一致。

ES5:

function Person() {
this.grade = {
count: 0
};
}
ES6:

class Person {
constructor() {
this.grade = {
count: 0
};
}
}
此外还要关注新提案,Babel已经支持实例属性和静态属性新的写法。

静态方法


类相当于实例的原型,所有在类中定义的方法,都会被实例继承。如果在一个方法前,加上static关键字,就表示该方法不会被实例继承,而是直接通过类来调用,这就称为“静态方法”。

注意:如果静态方法包含this关键字,指的是类。

ES5:

function Person() { }
Person.toSay = function () {
return 'I love JavaScript.';
};
Person.toSay(); // I love JavaScript.
ES6:

class Person {
static toSay() {
return 'I love JavaScript.';
}
}
Person.toSay(); // I love JavaScript.
getter 和 setter


ES6提供 get 和 set 关键字,对某个属性设置存值函数和取值函数,拦截该属性的存取行为,和ES5行为一致。

ES5:

function Person(name) {}
Person.prototype = {
get name() {
return 'mia';
},
set name(newName) {
console.log('new name:' + newName);
}
}
ES6:

class Person {
get name() {
return 'mia';
}
set name(newName) {
console.log('new name:' + newName);
}
}
ES6 class 底层实现原理


下文主要用babel转码器分别对class中几个主要的方法进行转码,分析ES5的实现方式。

Babel是如何编译class的


将下面的代码使用babel转码器转换成ES5代码,按照代码结构和功能分块进行讲解。

class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
toString() {
return '(' + this.name + ',' + this.age + ')';
}
}
var p = new Person('Mia', 18);
运行模式


"use strict";//class默认开启严格模式

私有函数:


JS开发者在变量名或函数名前缀加下划线,一般表示私有。

前缀加下划线表示私有仅仅是一个约定俗成的习惯,澄清意图,并没有做其他处理。由于ECMAScript草案中并没有定义私有变量的方法,所以在此限定之下仍可以在函数外或作用域外访问该函数或变量。

_instanceof和_classCallCheck的作用

检查声明的class类是否通过new的方式调用,否则会报错。

function _instanceof(left, right) {
if (right != null && typeof Symbol !== "undefined" && right[Symbol.hasInstance]) {
return right[Symbol.hasInstance](left);
} else {
return left instanceof right;
}
}
function _classCallCheck(instance, Constructor) {
if (!_instanceof(instance, Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
_createClass和_defineProperties的作用

_createClass函数有三个参数,Constructor是传入构造函数Person,protoProps 是要添加到原型上的函数数组,staticProps 是要添加到构造函数本身的函数,即静态方法。这里的第二个和第三个参数是可以缺省的,会在_createClass 函数体内判断。

_createClass 函数的作用是收集公有函数和静态方法,将方法添加到构造函数或构造函数的原型中,并返回构造函数。

defineProperties 是将方法添加到构造函数或构造函数的原型中的主要逻辑,遍历函数数组,分别声明其描述符。若enumerable 没有被定义为true,则默认为fals,设置 configurable 为true。以上两个布尔值是为了* Object.keys() 之类的方法被遍历到。如果存在 value,就为 descriptor 添加 value 和 writable 属性,如果不存在,就直接使用 get 和 set 属性。

最后,使用 Object.defineProperty 方法为构造函数添加属性。

function _defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
function _createClass(Constructor, protoProps, staticProps) {
if (protoProps) _defineProperties(Constructor.prototype, protoProps);
if (staticProps) _defineProperties(Constructor, staticProps);
return Constructor;
}
class类实现


var Person =
/*#__PURE__*/
function () {
function Person(name, age) {
_classCallCheck(this, Person);
this.name = name;
this.age = age;
}
_createClass(Person, [{
key: "toString",
value: function toString() {
return '(' + this.name + ',' + this.age + ')';
}
}]);
return Person;
}();
var p = new Person('Mia', 18);
解析:

不使用new调用时,this指向window,所以instance instanceof Constructor为false,抛出异常。

通过调用_createClass函数,遍历函数数组。key为方法名,若有value说明是有具体的 function 声明,若无 value 说明使用了get 或 set 方法。

结尾


读到这相信大家对class的实现有了更深的理解。最近笔者一边在忙毕业设计,一边整理了这道阿里前端面试题的解析,评论区欢迎对class实现这一问题进行讨论。另外,class中的extend也是很有趣的实现,在下一篇文章会对class实现继承进行解析。

ES6 浅谈class继承机制

文章来源阮一峰ES6入门,这里做要点掌握大纲。

class——构造函数的语法糖

ES5的继承:修改原型链

先创造子类的实例对象,再将父类的方法添加到this(Parent.apply(this) )

ES6的继承:通过extends实现继承

先将父类实例 的属性方法加到this上(super),然后再用子类的构造函数修改this

作为函数使用时,代表父类的构造函数,只能在子类构造函数中使用,super内部的this指向子类实例。

作为对象使用时,在静态方法中指向父类,在普通方法中,指向父类原型对象。

注意:super指向父类的原型对象,而不是父类实例,所以父类实例上的属性方法无法通过super调用。(父类构造函数里this调用的属性方法就是实例属性方法)

定义在父类实例上的属性应该是这样子

在普通方法中使用super 对象时, 方法内部的this指向当前的子类实例

对象总是继承自另一个对象,所以可以在任意一个对象里使用super

(1)子类的 proto 属性,表示构造函数的继承,总是指向父类。

(2)子类prototype属性的 proto 属性,表示方法的继承,总是指向父类的prototype属性。

我知道这张图可能不准确,但是这样记能让我一下子找到对应关系。

ES6中类的静态方法有哪些作用

JavaScript语言的传统方法是通过构造函数,定义并生成新对象,prototype 属性使您有能力向对象添加属性和方法。下面是通过传统的方式创建和使用对象的案例:

[html] view plain copy
<span style="font-size:18px;">//Person.js
function Person(x,y){
this.x = x;
this.y = y;
}

Person.prototype.toString = function (){
return (this.x + "的年龄是" +this.y+"岁");
}
export {Person};
//index.js
import {Person} from './Person';
let person = new Person('张三',12);

ES6中类的静态方法有哪些作用

JavaScript语言的传统方法是通过构造函数,定义并生成新对象,prototype 属性使您有能力向对象添加属性和方法。下面是通过传统的方式创建和使用对象的案例:

[html] view plain copy
<span style="font-size:18px;">//Person.js
function Person(x,y){
this.x = x;
this.y = y;
}

Person.prototype.toString = function (){
return (this.x + "的年龄是" +this.y+"岁");
}
export {Person};
//index.js
import {Person} from './Person';
let person = new Person('张三',12);

类的各种方法总结

1 .只能在类上,而不能在实例上访问的方法

2 .只包含静态属性和静态方法的类叫做静态类

3 .加上关键字static的方法,那我们可以使用这个来模拟私有属性和私有方法啊

4 .如果静态方法里面有this的话,那么指向这个类,而不是实例

5 .静态方法可以与非静态方法重名,而且父类的静态方法还可以被子类继承

6 .静态属性是指class本身的属性,而不是定义在实例对象this上面的属性

7 .只能在外面定义class.propName='hello',这个处理方法太粗糙了吧

8 .

1 .没有语法支持,只能自己定义,比如添加下划线,类似python

1 .只能在类内部使用的属性,只能在类内部使用的方法。

2 .提案 #符号

3 .私有属性好像没有

1 .共有方法可以在类的外部被调用

2 .这个也不可以访问类的内部属性

3 .必须通过在类的 内部 或者外部通过类的prototype属性添加。

4 .共有变量在函数内部或者实例都能访问。但是访问他们必须使用this

5 .共有方法可以通过特权方法访问私有属性和方法。

1 .在类的内部使用this定义的方法,必须在类的内部声明定义。

2 .不仅可以访问类的私有属性,而且还可以访问类的共有属性

3 .调用规则:通过this调用公用方法,共有属性,通过对象本身调用静态方法和属性,在方法体内部直接调用私有属性和私有方法。

4 .特权方法的创建方法:

}

//在创建了MyFunction的实例之后,除了使用publicFunction函数之外,没有其他的方法可以直接访问到privateNum和privateFuntion,私有和特权方法常常用来隐藏不想直接修改的数据

2 .在构造函数中定义的特权方法,会对每个实例都创建同一组新方法。

1 .一般在函数中定义的变量们可以认为是私有有变量,但是不能再函数外部访问这些变量,

2 .私有变量可以包括参数,局部变量和在函数内部定义的其他函数。

3 .一般称为有权访问私有变量和私有函数的共有方法为特权方法。

1 .es6新语法。类内所有的定义的方法,都是不可枚举的

2 .一个类必须有constructor方法,如果没有显示定义,空的constructor方法会被默认添加

3 .

1 .类的内部如果有this,那么必定指向类的实例,也就是constructor里面的this.如果需要单独使用这个方法,就必须在constructor里面bind这个this,或者使用箭头函数

2 .这个场景在react里面非常的常见,因为每次调用组件都是在具体的实例中使用这个方法,为了不让this指向这个具体的实例,还是指向原来的类,那么就需要人为的绑定

3 .

1 .类似于python里面的特殊方法,是整个语法相当底层的使用,但是这个一点也不全,重写类的时候你能决定的新的数据结构的具体操作方法是很受局限的

详解如何利用ES6实现单例模式及其应用


单例是在程序设计非常基础的东西,本文主要给大家介绍了关于利用ES6实现单例模式及其应用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,希望能帮助到大家。
前言
在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。
单例模式的定义是:保证一个类仅有一个一个实例,并提供一个访问它的全局访问点。
单例模式能在合适的时候创建对象,并且创建唯一的一个。

代码接近于生活,很有意思。比如一个网站的登录,点击登录后弹出一个登录弹框,即使再次点击,也不会再出现一个相同的弹框。又或者一个音乐播放程序,如果用户打开了一个音乐,又想打开一个音乐,那么之前的播放界面就会自动关闭,切换到当前的播放界面。这些都是单例模式的应用场景。

要实现一个单例模式,一个经典的方式是创建一个类,类中又一个方法能创建该类的实例对象,还有一个标记,记录是否已经创了过了实例对象。如果对象已经存在,就返回第一次实例化对象的引用。
单例模式的实现

es5实现方式

var Singleton = function(name) {
this.name = name;
//一个标记,用来判断是否已将创建了该类的实例
this.instance = null;
}
// 提供了一个静态方法,用户可以直接在类上调用
Singleton.getInstance = function(name) {
// 没有实例化的时候创建一个该类的实例
if(!this.instance) {
this.instance = new Singleton(name);
}
// 已经实例化了,返回第一次实例化对象的引用
return this.instance;
}用户可以通过一个广为人知的接口,对该实例进行访问。

我们尝试对该对象进行两次实例化,观察两次实例化结果是否指向同一个对象。
var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一实例化的对象
console.log(a === b);返回结果是:true。说明a、b之间是引用关系。
es6实现方式

创建Singleton类。class关键字和静态函数都是es6新增的。
class Singleton {
constructor(name) {
this.name = name;
this.instance = null;
}
// 构造一个广为人知的接口,供用户对该类进行实例化
static getInstance(name) {
if(!this.instance) {
this.instance = new Singleton(name);
}
return this.instance;
}
}单例模式应用实例

我们用一个生活中常见的一个场景来说明单例模式的应用。

任意一个网站,点击登录按钮,只会弹出有且仅有一个登录框,即使后面再点击登录按钮,也不会再弹出多一个弹框。这就是单例模式的典型应用。接下来我们实现它。为了注重单例模式的展示,我们把登录框简化吧

详解如何利用ES6实现单例模式及其应用


单例是在程序设计非常基础的东西,本文主要给大家介绍了关于利用ES6实现单例模式及其应用的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,希望能帮助到大家。
前言
在传统开发工程师眼里,单例就是保证一个类只有一个实例,实现的方法一般是先判断实例存在与否,如果存在直接返回,如果不存在就创建了再返回,这就确保了一个类只有一个实例对象。在JavaScript里,单例作为一个命名空间提供者,从全局命名空间里提供一个唯一的访问点来访问该对象。
单例模式的定义是:保证一个类仅有一个一个实例,并提供一个访问它的全局访问点。
单例模式能在合适的时候创建对象,并且创建唯一的一个。

代码接近于生活,很有意思。比如一个网站的登录,点击登录后弹出一个登录弹框,即使再次点击,也不会再出现一个相同的弹框。又或者一个音乐播放程序,如果用户打开了一个音乐,又想打开一个音乐,那么之前的播放界面就会自动关闭,切换到当前的播放界面。这些都是单例模式的应用场景。

要实现一个单例模式,一个经典的方式是创建一个类,类中又一个方法能创建该类的实例对象,还有一个标记,记录是否已经创了过了实例对象。如果对象已经存在,就返回第一次实例化对象的引用。
单例模式的实现

es5实现方式

var Singleton = function(name) {
this.name = name;
//一个标记,用来判断是否已将创建了该类的实例
this.instance = null;
}
// 提供了一个静态方法,用户可以直接在类上调用
Singleton.getInstance = function(name) {
// 没有实例化的时候创建一个该类的实例
if(!this.instance) {
this.instance = new Singleton(name);
}
// 已经实例化了,返回第一次实例化对象的引用
return this.instance;
}用户可以通过一个广为人知的接口,对该实例进行访问。

我们尝试对该对象进行两次实例化,观察两次实例化结果是否指向同一个对象。
var a = Singleton.getInstance('sven1');
var b = Singleton.getInstance('sven2');
// 指向的是唯一实例化的对象
console.log(a === b);返回结果是:true。说明a、b之间是引用关系。
es6实现方式

创建Singleton类。class关键字和静态函数都是es6新增的。
class Singleton {
constructor(name) {
this.name = name;
this.instance = null;
}
// 构造一个广为人知的接口,供用户对该类进行实例化
static getInstance(name) {
if(!this.instance) {
this.instance = new Singleton(name);
}
return this.instance;
}
}单例模式应用实例

我们用一个生活中常见的一个场景来说明单例模式的应用。

任意一个网站,点击登录按钮,只会弹出有且仅有一个登录框,即使后面再点击登录按钮,也不会再弹出多一个弹框。这就是单例模式的典型应用。接下来我们实现它。为了注重单例模式的展示,我们把登录框简化吧

javascript最新版本是什么?引入了哪些新的特性?

EMCAScript6(ES6)是最新的Javascript,它包含了一些很棒的新特性。这些特性拥有不同程度的复杂性,对于简单的脚本和复杂的应用程序都非常的有用。x0dx0ax0dx0a增加的新特性:x0dx0ax0dx0a1.箭头操作符x0dx0a 如果你会C#或者Java,你肯定知道lambda表达式,ES6中新增的箭头操作符=>便有异曲同工之妙。它简化了函数的书写。操作符左边为输入的参数,而右边则是进行的操作以及返回的值Inputs=>outputs。x0dx0a 我们知道在JS中回调是经常的事,而一般回调又以匿名函数的形式出现,每次都需要写一个function,甚是繁琐。当引入箭头操作符后可以方便地写回调了。x0dx0ax0dx0a2.类的支持x0dx0a ES6中添加了对类的支持,引入了class关键字(其实class在JavaScript中一直是保留字,目的就是考虑到可能在以后的新版本中会用到,现在终于派上用场了)。JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。x0dx0ax0dx0a3.增强的对象字面量x0dx0a 对象字面量被增强了,写法更加简洁与灵活,同时在定义对象的时候能够做的事情更多了。具体表现在:x0dx0a(1).可以在对象字面量里面定义原型x0dx0a(2).定义方法可以不用function关键字x0dx0a(3).直接调用父类方法x0dx0ax0dx0a4.字符串模板x0dx0a 字符串模板相对简单易懂些。ES6中允许使用反引号 ` 来创建字符串,此种方法创建的字符串里面可以包含由美元符号加花括号包裹的变量${vraible}。如果你使用过像C#等后端强类型语言的话,对此功能应该不会陌生。x0dx0ax0dx0a5.解构x0dx0a 自动解析数组或对象中的值。比如若一个函数要返回多个值,常规的做法是返回一个对象,将每个值做为这个对象的属性返回。但在ES6中,利用解构这一特性,可以直接返回一个数组,然后数组中的值会自动被解析到对应接收该值的变量中。x0dx0ax0dx0a6.参数默认值,不定参数,拓展参数x0dx0a(1).默认参数值x0dx0a 现在可以在定义函数的时候指定参数的默认值了,而不用像以前那样通过逻辑或操作符来达到目的了。x0dx0a(2).不定参数x0dx0a 不定参数是在函数中使用命名参数同时接收不定数量的未命名参数。这只是一种语法糖,在以前的JavaScript代码中我们可以通过arguments变量来达到这一目的。不定参数的格式是三个句点后跟代表所有不定参数的变量名。比如下面这个例子中,?x代表了所有传入add函数的参数.x0dx0a(3).拓展参数x0dx0a 拓展参数则是另一种形式的语法糖,它允许传递数组或者类数组直接做为函数的参数而不用通过apply。x0dx0ax0dx0a6.let与const 关键字x0dx0a 可以把let看成var,只是它定义的变量被限定在了特定范围内才能使用,而离开这个范围则无效。const则很直观,用来定义常量,即无法被更改值的变量。x0dx0ax0dx0a7.for of 值遍历x0dx0a 我们都知道for in 循环用于遍历数组,类数组或对象,ES6中新引入的for of循环功能相似,不同的是每次循环它提供的不是序号而是值。x0dx0a8.模块x0dx0a 在ES6标准中,JavaScript原生支持mole了。这种将JS代码分割成不同功能的小块进行模块化的概念是在一些三方规范中流行起来的,比如CommonJS和AMD模式。x0dx0ax0dx0a9.Map,Set 和 WeakMap,WeakSetx0dx0a 这些是新加的集合类型,提供了更加方便的获取属性值的方法,不用像以前一样用hasOwnProperty来检查某个属性是属于原型链上的呢还是当前对象的。同时,在进行属性值添加与获取时有专门的get,set方法。x0dx0ax0dx0a10.Proxiesx0dx0a Proxy可以监听对象身上发生了什么事情,并在这些事情发生后执行一些相应的操作。一下子让我们对一个对象有了很强的追踪能力,同时在数据绑定方面也很有用处。x0dx0ax0dx0a11.Symbolsx0dx0a 我们知道对象其实是键值对的集合,而键通常来说是字符串。而现在除了字符串外,我们还可以用symbol这种值来做为对象的键。Symbol是一种基本类型,像数字,字符串还有布尔一样,它不是一个对象。Symbol 通过调用symbol函数产生,它接收一个可选的名字参数,该函数返回的symbol是唯一的。之后就可以用这个返回值做为对象的键了。Symbol还可以用来创建私有属性,外部无法直接访问由symbol做为键的属性值。x0dx0ax0dx0a12.Math,Number,String,Object 的新APIx0dx0a 对Math,Number,String还有Object等添加了许多新的API。下面代码同样来自es6features,对这些新API进行了简单展示。x0dx0ax0dx0a13.Promisesx0dx0a Promises是处理异步操作的一种模式,之前在很多三方库中有实现,比如jQuery的deferred 对象。当你发起一个异步请求,并绑定了.when(), .done()等事件处理程序时,其实就是在应用promise模式。

ES6、ES7、ES8、ES9、ES10新特性一览

ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成,他们开会推动JavaScript提案沿着一条严格的发展道路前进。 从提案到入选ECMA规范主要有以下几个阶段:

ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化。两个发布版本之间时间跨度很大,所以ES6中的特性比较多。 在这里列举几个常用的:

1.类(class)

对熟悉Java,object-c,c#等纯面向对象语言的开发者来说,都会对class有一种特殊的情怀。ES6 引入了class(类),让JavaScript的面向对象编程变得更加简单和易于理解。

2.模块化(Mole)

ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。

导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

导出变量

ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

导出函数

导入(import)

定义好模块的输出以后就可以在另外一个模块通过import引用。

3.箭头(Arrow)函数

这是ES6中最令人激动的特性之一。=>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>,就不需要这种模式了。

箭头函数的结构

箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

卸载*时的陷阱

除上述的做法外,我们还可以这样做:

4.函数参数默认值

ES6支持在定义函数的时候为其设置默认值:

这样写一般没问题,但当参数的布尔值为false时,就会有问题了。比如,我们这样调用foo函数:

foo(0, "")

因为0的布尔值为false,这样height的取值将是50。同理color的取值为‘red’。

所以说,函数参数默认值不仅能是代码变得更加简洁而且能规避一些问题。

5.模板字符串

ES6支持模板字符串,使得字符串的拼接更加的简洁、直观。

在ES6中通过${}就可以完成字符串的拼接,只需要将变量放在大括号之中。

6.解构赋值

解构赋值语法是JavaScript的一种表达式,可以方便的从数组或者对象中快速提取值赋给定义的变量。

获取数组中的值

从数组中获取值并赋值到变量中,变量的顺序与数组中对象顺序对应。

如果没有从数组中的获取到值,你可以为变量设置一个默认值。

通过解构赋值可以方便的交换两个变量的值。

获取对象中的值

7.延展操作符(Spread operator)

延展操作符...可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造对象时, 将对象表达式按key-value的方式展开。

语法

应用场景

没有展开语法的时候,只能组合使用 push,splice,concat 等方法,来将已有数组元素变成新数组的一部分。有了展开语法, 构造新数组会变得更简单、更优雅:

和参数列表的展开类似, ... 在构造字数组时, 可以在任意位置多次使用。

展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)。

在ECMAScript 2018中延展操作符增加了对对象的支持

8.对象属性简写

在ES6中允许我们在设置一个对象的属性的时候不指定属性名。

对象中必须包含属性和值,显得非常冗余。

对象中直接写变量,非常简洁。

9.Promise

Promise 是异步编程的一种解决方案,比传统的解决方案callback更加的优雅。它最早由社区提出和实现的,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

嵌套两个setTimeout回调函数:

上面的的代码使用两个then来进行异步编程串行化,避免了回调地狱:

10.支持let与const

在之前JS是没有块级作用域的,const与let填补了这方便的空白,const与let都是块级作用域。

ES2016添加了两个小的特性来说明标准化过程:

1.Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回false。

includes 函数与 indexOf 函数很相似,下面两个表达式是等价的:

接下来我们来判断数字中是否包含某个元素:

使用indexOf()验证数组中是否存在某个元素,这时需要根据返回值是否为-1来判断:

使用includes()验证数组中是否存在某个元素,这样更加直观简单:

2.指数操作符

在ES7中引入了指数运算符**,**具有与Math.pow(..)等效的计算结果。

使用自定义的递归函数calculateExponent或者Math.pow()进行指数运算:

使用指数运算符**,就像+、-等操作符一样:

1.async/await

ES2018引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了next()方法返回一个Promise。因此await可以和for...of循环一起使用,以串行的方式运行异步操作。例如:

2.Object.values()

Object.values()是一个与Object.keys()类似的新函数,但返回的是Object自身属性的所有值,不包括继承的值。

假设我们要遍历如下对象obj的所有值:

从上述代码中可以看出Object.values()为我们省去了遍历key,并根据这些key获取value的步骤。

3.Object.entries()

Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。

接下来我们来遍历上文中的obj对象的所有属性的key和value:

4.String padding

在ES8中String新增了两个实例函数String.prototype.padStart和String.prototype.padEnd,允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

5.函数参数列表结尾允许逗号

主要作用是方便使用git进行多人协作开发时修改同一个函数减少不必要的行变更。

6.Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

返回obj对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

7.SharedArrayBuffer对象

SharedArrayBuffer 对象用来表示一个通用的,固定长度的原始二进制数据缓冲区,类似于 ArrayBuffer 对象,它们都可以用来在共享内存(shared memory)上创建视图。与 ArrayBuffer 不同的是,SharedArrayBuffer 不能被分离。

8.Atomics对象

Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。

这些原子操作属于 Atomics 模块。与一般的全局对象不同,Atomics 不是构造函数,因此不能使用 new 操作符调用,也不能将其当作函数直接调用。Atomics 的所有属性和方法都是静态的(与 Math 对象一样)。

多个共享内存的线程能够同时读写同一位置上的数据。原子操作会确保正在读或写的数据的值是符合预期的,即下一个原子操作一定会在上一个原子操作结束后才会开始,其操作过程不会中断。

wait() 和 wake() 方法采用的是 Linux 上的 futexes 模型(fast user-space mutex,快速用户空间互斥量),可以让进程一直等待直到某个特定的条件为真,主要用于实现阻塞。

1.异步迭代

在async/await的某些时刻,你可能尝试在同步循环中调用异步函数。例如:

这段代码不会正常运行,下面这段同样也不会:

这段代码中,循环本身依旧保持同步,并在在内部异步函数之前全部调用完成。

ES2018引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了next()方法返回一个Promise。因此await可以和for...of循环一起使用,以串行的方式运行异步操作。例如:

2.Promise.finally()

一个Promise调用链要么成功到达最后一个.then(),要么失败触发.catch()。在某些情况下,你想要在无论Promise运行成功还是失败,运行相同的代码,例如清除,删除对话,关闭数据库连接等。

.finally()允许你指定最终的逻辑:

3.Rest/Spread 属性

ES2015引入了Rest参数和扩展运算符。三个点(...)仅用于数组。Rest参数语法允许我们将一个不定数量的参数表示为一个数组。

展开操作符以相反的方式工作,将数组转换成可传递给函数的单独参数。例如Math.max()返回给定数字中的最大值:

ES2018为对象解构提供了和数组一样的Rest参数()和展开操作符,一个简单的例子:

或者你可以使用它给函数传递参数:

扩展运算符可以在其他对象内使用,例如:

可以使用扩展运算符拷贝一个对象,像是这样obj2 = {...obj1},但是 这只是一个对象的浅拷贝 。另外,如果一个对象A的属性是对象B,那么在克隆后的对象cloneB中,该属性指向对象B。

4.正则表达式命名捕获组

JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组,例如:以YYYY-MM-DD的格式解析日期:

这样的代码很难读懂,并且改变正则表达式的结构有可能改变匹配对象的索引。

ES2018允许命名捕获组使用符号?<name>,在打开捕获括号(后立即命名,示例如下:

任何匹配失败的命名组都将返回undefined。

命名捕获也可以使用在replace()方法中。例如将日期转换为美国的 MM-DD-YYYY 格式:

5.正则表达式反向断言

目前JavaScript在正则表达式中支持先行断言(lookahead)。这意味着匹配会发生,但不会有任何捕获,并且断言没有包含在整个匹配字段中。例如从价格中捕获货币符号:

ES2018引入以相同方式工作但是匹配前面的反向断言(lookbehind),这样我就可以忽略货币符号,单纯的捕获价格的数字:

以上是 肯定反向断言 ,非数字D必须存在。同样的,还存在 否定反向断言 ,表示一个值必须不存在,例如:

6.正则表达式dotAll模式

正则表达式中点.匹配除回车外的任何单字符,标记s改变这种行为,允许行终止符的出现,例如:

7.正则表达式 Unicode 转义

到目前为止,在正则表达式中本地访问 Unicode 字符属性是不被允许的。ES2018添加了 Unicode 属性转义——形式为p{...}和P{...},在正则表达式中使用标记 u (unicode) 设置,在p块儿内,可以以键值对的方式设置需要匹配的属性而非具体内容。例如:

此特性可以避免使用特定 Unicode 区间来进行内容类型判断,提升可读性和可维护性。

8.非转义序列的模板字符串

之前,u开始一个 unicode 转义,x开始一个十六进制转义,后跟一个数字开始一个八进制转义。这使得创建特定的字符串变得不可能,例如Windows文件路径 C:uuuxxx111。更多细节参考模板字符串。

1.行分隔符(U + 2028)和段分隔符(U + 2029)符号现在允许在字符串文字中,与JSON匹配

以前,这些符号在字符串文字中被视为行终止符,因此使用它们会导致SyntaxError异常。

2.更加友好的 JSON.stringify

如果输入 Unicode 格式但是超出范围的字符,在原先JSON.stringify返回格式错误的Unicode字符串。现在实现了一个改变JSON.stringify的第3阶段提案,因此它为其输出转义序列,使其成为有效Unicode(并以UTF-8表示)

3.新增了Array的flat()方法和flatMap()方法

flat()和flatMap()本质上就是是归纳(rece) 与 合并(concat)的操作。

Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。 这里我们拿map方法与flatMap方法做一个比较。

4.新增了String的trimStart()方法和trimEnd()方法

5.Object.fromEntries()

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

而Object.fromEntries() 则是 Object.entries() 的反转。

Object.fromEntries() 函数传入一个键值对的列表,并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现@iterator方法的的对象,返回一个迭代器对象。它生成一个具有两个元素的类似数组的对象,第一个元素是将用作属性键的值,第二个元素是与该属性键关联的值。

6.Symbol.prototype.description

通过工厂函数Symbol()创建符号时,您可以选择通过参数提供字符串作为描述:

以前,访问描述的唯一方法是将符号转换为字符串:

现在引入了getter Symbol.prototype.description以直接访问描述:

7.String.prototype.matchAll

matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll 出现之前,通过在循环中调用regexp.exec来获取所有匹配项信息(regexp需使用/g标志:

如果使用matchAll ,就可以不必使用while循环加exec方式(且正则表达式需使用/g标志)。使用matchAll 会得到一个迭代器的返回值,配合 for...of, array spread, or Array.from() 可以更方便实现功能:

matchAll可以更好的用于分组

8.Function.prototype.toString()现在返回精确字符,包括空格和注释

9.修改 catch 绑定

在 ES10 之前,我们必须通过语法为 catch 子句绑定异常变量,无论是否有必要。很多时候 catch 块是多余的。 ES10 提案使我们能够简单的把变量省略掉。

不算大的改动。

之前是

现在是

10.新的基本数据类型BigInt

现在的基本数据类型(值类型)不止5种(ES6之后是六种)了哦!加上BigInt一共有七种基本数据类型,分别是: String、Number、Boolean、Null、Undefined、Symbol、BigInt

ES6、ES7、ES8、ES9、ES10新特性一览

ECMA规范最终由TC39敲定。TC39由包括浏览器厂商在内的各方组成,他们开会推动JavaScript提案沿着一条严格的发展道路前进。 从提案到入选ECMA规范主要有以下几个阶段:

ES6的特性比较多,在 ES5 发布近 6 年(2009-11 至 2015-6)之后才将其标准化。两个发布版本之间时间跨度很大,所以ES6中的特性比较多。 在这里列举几个常用的:

1.类(class)

对熟悉Java,object-c,c#等纯面向对象语言的开发者来说,都会对class有一种特殊的情怀。ES6 引入了class(类),让JavaScript的面向对象编程变得更加简单和易于理解。

2.模块化(Mole)

ES5不支持原生的模块化,在ES6中模块作为重要的组成部分被添加进来。模块的功能主要由 export 和 import 组成。每一个模块都有自己单独的作用域,模块之间的相互调用关系是通过 export 来规定模块对外暴露的接口,通过import来引用其它模块提供的接口。同时还为模块创造了命名空间,防止函数的命名冲突。

导出(export)

ES6允许在一个模块中使用export来导出多个变量或函数。

导出变量

ES6将一个文件视为一个模块,上面的模块通过 export 向外输出了一个变量。一个模块也可以同时往外面输出多个变量。

导出函数

导入(import)

定义好模块的输出以后就可以在另外一个模块通过import引用。

3.箭头(Arrow)函数

这是ES6中最令人激动的特性之一。=>不只是关键字function的简写,它还带来了其它好处。箭头函数与包围它的代码共享同一个this,能帮你很好的解决this的指向问题。有经验的JavaScript开发者都熟悉诸如var self = this;或var that = this这种引用外围this的模式。但借助=>,就不需要这种模式了。

箭头函数的结构

箭头函数的箭头=>之前是一个空括号、单个的参数名、或用括号括起的多个参数名,而箭头之后可以是一个表达式(作为函数的返回值),或者是用花括号括起的函数体(需要自行通过return来返回值,否则返回的是undefined)。

卸载*时的陷阱

除上述的做法外,我们还可以这样做:

4.函数参数默认值

ES6支持在定义函数的时候为其设置默认值:

这样写一般没问题,但当参数的布尔值为false时,就会有问题了。比如,我们这样调用foo函数:

foo(0, "")

因为0的布尔值为false,这样height的取值将是50。同理color的取值为‘red’。

所以说,函数参数默认值不仅能是代码变得更加简洁而且能规避一些问题。

5.模板字符串

ES6支持模板字符串,使得字符串的拼接更加的简洁、直观。

在ES6中通过${}就可以完成字符串的拼接,只需要将变量放在大括号之中。

6.解构赋值

解构赋值语法是JavaScript的一种表达式,可以方便的从数组或者对象中快速提取值赋给定义的变量。

获取数组中的值

从数组中获取值并赋值到变量中,变量的顺序与数组中对象顺序对应。

如果没有从数组中的获取到值,你可以为变量设置一个默认值。

通过解构赋值可以方便的交换两个变量的值。

获取对象中的值

7.延展操作符(Spread operator)

延展操作符...可以在函数调用/数组构造时, 将数组表达式或者string在语法层面展开;还可以在构造对象时, 将对象表达式按key-value的方式展开。

语法

应用场景

没有展开语法的时候,只能组合使用 push,splice,concat 等方法,来将已有数组元素变成新数组的一部分。有了展开语法, 构造新数组会变得更简单、更优雅:

和参数列表的展开类似, ... 在构造字数组时, 可以在任意位置多次使用。

展开语法和 Object.assign() 行为一致, 执行的都是浅拷贝(只遍历一层)。

在ECMAScript 2018中延展操作符增加了对对象的支持

8.对象属性简写

在ES6中允许我们在设置一个对象的属性的时候不指定属性名。

对象中必须包含属性和值,显得非常冗余。

对象中直接写变量,非常简洁。

9.Promise

Promise 是异步编程的一种解决方案,比传统的解决方案callback更加的优雅。它最早由社区提出和实现的,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

嵌套两个setTimeout回调函数:

上面的的代码使用两个then来进行异步编程串行化,避免了回调地狱:

10.支持let与const

在之前JS是没有块级作用域的,const与let填补了这方便的空白,const与let都是块级作用域。

ES2016添加了两个小的特性来说明标准化过程:

1.Array.prototype.includes()

includes() 函数用来判断一个数组是否包含一个指定的值,如果包含则返回 true,否则返回false。

includes 函数与 indexOf 函数很相似,下面两个表达式是等价的:

接下来我们来判断数字中是否包含某个元素:

使用indexOf()验证数组中是否存在某个元素,这时需要根据返回值是否为-1来判断:

使用includes()验证数组中是否存在某个元素,这样更加直观简单:

2.指数操作符

在ES7中引入了指数运算符**,**具有与Math.pow(..)等效的计算结果。

使用自定义的递归函数calculateExponent或者Math.pow()进行指数运算:

使用指数运算符**,就像+、-等操作符一样:

1.async/await

ES2018引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了next()方法返回一个Promise。因此await可以和for...of循环一起使用,以串行的方式运行异步操作。例如:

2.Object.values()

Object.values()是一个与Object.keys()类似的新函数,但返回的是Object自身属性的所有值,不包括继承的值。

假设我们要遍历如下对象obj的所有值:

从上述代码中可以看出Object.values()为我们省去了遍历key,并根据这些key获取value的步骤。

3.Object.entries()

Object.entries()函数返回一个给定对象自身可枚举属性的键值对的数组。

接下来我们来遍历上文中的obj对象的所有属性的key和value:

4.String padding

在ES8中String新增了两个实例函数String.prototype.padStart和String.prototype.padEnd,允许将空字符串或其他字符串添加到原始字符串的开头或结尾。

5.函数参数列表结尾允许逗号

主要作用是方便使用git进行多人协作开发时修改同一个函数减少不必要的行变更。

6.Object.getOwnPropertyDescriptors()

Object.getOwnPropertyDescriptors()函数用来获取一个对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

返回obj对象的所有自身属性的描述符,如果没有任何自身属性,则返回空对象。

7.SharedArrayBuffer对象

SharedArrayBuffer 对象用来表示一个通用的,固定长度的原始二进制数据缓冲区,类似于 ArrayBuffer 对象,它们都可以用来在共享内存(shared memory)上创建视图。与 ArrayBuffer 不同的是,SharedArrayBuffer 不能被分离。

8.Atomics对象

Atomics 对象提供了一组静态方法用来对 SharedArrayBuffer 对象进行原子操作。

这些原子操作属于 Atomics 模块。与一般的全局对象不同,Atomics 不是构造函数,因此不能使用 new 操作符调用,也不能将其当作函数直接调用。Atomics 的所有属性和方法都是静态的(与 Math 对象一样)。

多个共享内存的线程能够同时读写同一位置上的数据。原子操作会确保正在读或写的数据的值是符合预期的,即下一个原子操作一定会在上一个原子操作结束后才会开始,其操作过程不会中断。

wait() 和 wake() 方法采用的是 Linux 上的 futexes 模型(fast user-space mutex,快速用户空间互斥量),可以让进程一直等待直到某个特定的条件为真,主要用于实现阻塞。

1.异步迭代

在async/await的某些时刻,你可能尝试在同步循环中调用异步函数。例如:

这段代码不会正常运行,下面这段同样也不会:

这段代码中,循环本身依旧保持同步,并在在内部异步函数之前全部调用完成。

ES2018引入异步迭代器(asynchronous iterators),这就像常规迭代器,除了next()方法返回一个Promise。因此await可以和for...of循环一起使用,以串行的方式运行异步操作。例如:

2.Promise.finally()

一个Promise调用链要么成功到达最后一个.then(),要么失败触发.catch()。在某些情况下,你想要在无论Promise运行成功还是失败,运行相同的代码,例如清除,删除对话,关闭数据库连接等。

.finally()允许你指定最终的逻辑:

3.Rest/Spread 属性

ES2015引入了Rest参数和扩展运算符。三个点(...)仅用于数组。Rest参数语法允许我们将一个不定数量的参数表示为一个数组。

展开操作符以相反的方式工作,将数组转换成可传递给函数的单独参数。例如Math.max()返回给定数字中的最大值:

ES2018为对象解构提供了和数组一样的Rest参数()和展开操作符,一个简单的例子:

或者你可以使用它给函数传递参数:

扩展运算符可以在其他对象内使用,例如:

可以使用扩展运算符拷贝一个对象,像是这样obj2 = {...obj1},但是 这只是一个对象的浅拷贝 。另外,如果一个对象A的属性是对象B,那么在克隆后的对象cloneB中,该属性指向对象B。

4.正则表达式命名捕获组

JavaScript正则表达式可以返回一个匹配的对象——一个包含匹配字符串的类数组,例如:以YYYY-MM-DD的格式解析日期:

这样的代码很难读懂,并且改变正则表达式的结构有可能改变匹配对象的索引。

ES2018允许命名捕获组使用符号?<name>,在打开捕获括号(后立即命名,示例如下:

任何匹配失败的命名组都将返回undefined。

命名捕获也可以使用在replace()方法中。例如将日期转换为美国的 MM-DD-YYYY 格式:

5.正则表达式反向断言

目前JavaScript在正则表达式中支持先行断言(lookahead)。这意味着匹配会发生,但不会有任何捕获,并且断言没有包含在整个匹配字段中。例如从价格中捕获货币符号:

ES2018引入以相同方式工作但是匹配前面的反向断言(lookbehind),这样我就可以忽略货币符号,单纯的捕获价格的数字:

以上是 肯定反向断言 ,非数字D必须存在。同样的,还存在 否定反向断言 ,表示一个值必须不存在,例如:

6.正则表达式dotAll模式

正则表达式中点.匹配除回车外的任何单字符,标记s改变这种行为,允许行终止符的出现,例如:

7.正则表达式 Unicode 转义

到目前为止,在正则表达式中本地访问 Unicode 字符属性是不被允许的。ES2018添加了 Unicode 属性转义——形式为p{...}和P{...},在正则表达式中使用标记 u (unicode) 设置,在p块儿内,可以以键值对的方式设置需要匹配的属性而非具体内容。例如:

此特性可以避免使用特定 Unicode 区间来进行内容类型判断,提升可读性和可维护性。

8.非转义序列的模板字符串

之前,u开始一个 unicode 转义,x开始一个十六进制转义,后跟一个数字开始一个八进制转义。这使得创建特定的字符串变得不可能,例如Windows文件路径 C:uuuxxx111。更多细节参考模板字符串。

1.行分隔符(U + 2028)和段分隔符(U + 2029)符号现在允许在字符串文字中,与JSON匹配

以前,这些符号在字符串文字中被视为行终止符,因此使用它们会导致SyntaxError异常。

2.更加友好的 JSON.stringify

如果输入 Unicode 格式但是超出范围的字符,在原先JSON.stringify返回格式错误的Unicode字符串。现在实现了一个改变JSON.stringify的第3阶段提案,因此它为其输出转义序列,使其成为有效Unicode(并以UTF-8表示)

3.新增了Array的flat()方法和flatMap()方法

flat()和flatMap()本质上就是是归纳(rece) 与 合并(concat)的操作。

Array.prototype.flat()

flat() 方法会按照一个可指定的深度递归遍历数组,并将所有元素与遍历到的子数组中的元素合并为一个新数组返回。

Array.prototype.flatMap()

flatMap() 方法首先使用映射函数映射每个元素,然后将结果压缩成一个新数组。它与 map 和 深度值1的 flat 几乎相同,但 flatMap 通常在合并成一种方法的效率稍微高一些。 这里我们拿map方法与flatMap方法做一个比较。

4.新增了String的trimStart()方法和trimEnd()方法

5.Object.fromEntries()

Object.entries()方法的作用是返回一个给定对象自身可枚举属性的键值对数组,其排列与使用 for...in 循环遍历该对象时返回的顺序一致(区别在于 for-in 循环也枚举原型链中的属性)。

而Object.fromEntries() 则是 Object.entries() 的反转。

Object.fromEntries() 函数传入一个键值对的列表,并返回一个带有这些键值对的新对象。这个迭代参数应该是一个能够实现@iterator方法的的对象,返回一个迭代器对象。它生成一个具有两个元素的类似数组的对象,第一个元素是将用作属性键的值,第二个元素是与该属性键关联的值。

6.Symbol.prototype.description

通过工厂函数Symbol()创建符号时,您可以选择通过参数提供字符串作为描述:

以前,访问描述的唯一方法是将符号转换为字符串:

现在引入了getter Symbol.prototype.description以直接访问描述:

7.String.prototype.matchAll

matchAll() 方法返回一个包含所有匹配正则表达式及分组捕获结果的迭代器。 在 matchAll 出现之前,通过在循环中调用regexp.exec来获取所有匹配项信息(regexp需使用/g标志:

如果使用matchAll ,就可以不必使用while循环加exec方式(且正则表达式需使用/g标志)。使用matchAll 会得到一个迭代器的返回值,配合 for...of, array spread, or Array.from() 可以更方便实现功能:

matchAll可以更好的用于分组

8.Function.prototype.toString()现在返回精确字符,包括空格和注释

9.修改 catch 绑定

在 ES10 之前,我们必须通过语法为 catch 子句绑定异常变量,无论是否有必要。很多时候 catch 块是多余的。 ES10 提案使我们能够简单的把变量省略掉。

不算大的改动。

之前是

现在是

10.新的基本数据类型BigInt

现在的基本数据类型(值类型)不止5种(ES6之后是六种)了哦!加上BigInt一共有七种基本数据类型,分别是: String、Number、Boolean、Null、Undefined、Symbol、BigInt

ES6新增方法

ES6发布于2015年,增加了重要的新特性(包括类和模块语法)。这些新特性把javaScript从一门脚本语言转变成一门适合大规模软件工程的严肃、通用的语言。

主要介绍:es6新增的变量声明方式,es6新增的数组方法,字符串模板,箭头函数 =>,解构赋值,class类,for of循环和新增的字符串方法

let 关键字用来声明变量(类似于旧javaScript中的var声明)但是使用 let 声明的变量有以下几个特点 ↓

1、不存在变量声明提升

2、存在块级作用域

3、存在暂时性死区

4、不允许重复声明

for(作用域A){作用域B} 循环的应用;

const 关键字用来声明常量,其使用规则除了声明之后不能修改之外,其他特征和let一样 ↓

const的本质:const定义的变量并非是常量,并非不可变。不允许被改变的是地址,不是变量,使用const定义对象或者是数组时,其实是可变。

但是:我们不能对常量数值进行赋值,会报错

indexof(val,index) 参数1是我们要寻找的项,参数2是我们起始寻找项的索引号

forEach(function(val,index){ }) 对数组进行循环遍历,这个方法没有返回值

filter(callback) 功能上遍历和过滤,返回符合条件的元素,filter在循环的时候会判定一下是true还是false,是true才会返回。

map(callback) map可以改变当前循环的值,返回一个新的被改变过值之后的数组map需return),一般用来处理需要修改某一个数组的值。映射

some() 数组中有一个数组元素满足条件,就返回true

every() 数组中所有数组元素满足条件,就返回true

rece() 方法接收一个函数作为累加器,数组中的每个值(从左到右)开始缩减,最终计算为一个值

receRight() 同上 ↑ rece(),区别是从右到左

当我们需要输出一段话的时候

旧的写法:

模板字符串的写法

我们在页面中输出一个表格,里面字符串带表达式,等等

箭头函数是函数以往写法的一种简写形式,只能以赋值形式存在,箭头函数如果只有一个参数的情况下,可以直接写参数省略括号使用

也是有好处的,需要:想让定时器或者延时器里面的this指向的也是对象,怎么办呢?

箭头函数本身上面是没有this,它的this可以去上一层去找

箭头函数 ↓

可以嵌套

对象解构

repeat() 重复功能 ()参数表示重复多少遍

includes() 判定字符串中是否存在某个字符串

startsWith() endsWith() 也是判定字符串中是否存在某个字符串

padStart() 用于头部补全 padEnd() 用于尾部补全。

trimStart()和trimEnd()

trimStart()消除字符串头部的空格,trimEnd()消除尾部的空格。它们返回的都是新字符串,不会修改原始字符串。

ES6新增的方法就介绍到这里了,谢谢大家!

乐玩宠还为您提供以下相关内容希望对您有帮助:

es6 Class中的set和get

2.es6挂载静态方法(static)在es6中引入了新的东西,static 在使用static时,同样的只需要将方法写在class里,然后在方法的前面加个static就行了

Class类和function函数的面向对象设计以及用法区别

PS :Class 内部只有静态方法,没有静态属性。如果必须定义则类似于函数定义静态成员变量的方式: Person.sex="男" 之后通过调用静态成员的方式调用即可。类的静态方法:在类中添加 static ,例如:重点:类的继承实现有 ...

ES6中的class是如何实现的(附Babel编译的ES5代码详解)

constructor效果:ES6创建一个class会默认添加constructor方法,并在new调用时自动调用该方法。ES5:function Person(name, age) { this.name = name; this.age = age;}Person.prototype.toString = function () { return '...

ES6中类的静态方法有哪些作用

JavaScript语言的传统方法是通过构造函数,定义并生成新对象,prototype 属性使您有能力向对象添加属性和方法。下面是通过传统的方式创建和使用对象的案例:[html] view plain copy //Person.js function Person(x,y){ this.x ...

类的各种方法总结

而不是实例 5 .静态方法可以与非静态方法重名,而且父类的静态方法还可以被子类继承 6 .静态属性是指class本身的属性,而不是定义在实例对象this上面的属性 7 .只能在外面定义class.propName='hello',这个处理...

详解如何利用ES6实现单例模式及其应用

单例模式的实现es5实现方式var Singleton = function(name) { this.name = name; //一个标记,用来判断是否已将创建了该类的实例 this.instance = null;}// 提供了一个静态方法,用户可以直接在类上调用Singleton....

es6 export 是单例吗

getName(){ return "产品1"; } } public class Creator{ public static Product create1(){ return new ConcreteProduct(); } } 工厂模式的作用在于将创建具体产品的方法由工厂类控制,客户只需要知道产品的抽象类型 ...

ES6新增方法

主要介绍:es6新增的变量声明方式,es6新增的数组方法,字符串模板,箭头函数 =&gt;,解构赋值,class类,for of循环和新增的字符串方法 let 关键字用来声明变量(类似于旧javaScript中的var声明)但是使用 let 声明的变量有以下几...

浅析js class

本质上js中class其实是构造函数的另一种写法,使之更加直观的展现构造器中的各项属性 基本使用 注意点:(1)constructor是一个构造函数方法,创建对象时自动调用该方法 (2)constructor是类必须的一个属性,少了他类的创建会...

javascript最新的版本是什么?引入了一些什么新的特性

JS本身就是面向对象的,ES6中提供的类实际上只是JS原型模式的包装。现在提供原生的class支持后,对象的创建,继承更加直观了,并且父类方法的调用,实例化,静态方法和构造函数等概念都更加形象化。\x0d\x0a\x0d\x0a3....

Top
11.032851s