ES6新特性(6)之箭头函数/Class类

简介: ES6新特性(6)之箭头函数/Class类

(一)箭头函数


1.单参数

function cheng0(a = 3) {
return a * a;
}
let cheng = (a = 3) => a * a;
console.log(cheng(9));
复制代码

2.多参数

function add0(a, b) {
return a + b;
}
let add = (a, b) => a + b; //默认返回值
console.log(add(3, 9));
复制代码

3.无返回值

function jian0(a, b) {
console.log(a + b);
}
let jian = (a, b) => {
console.log(a - b)
};//无返回值,用{}包裹
console.log(jian(3, 9));
复制代码

4.多行,有其他表达式+return,用{}包裹

function chu0(a, b) {
console.log(a + b);
return a + b;
}
let chu = (a, b) => {
console.log(a + b);
return a + b;
};
console.log(chu(3, 9));
复制代码

2.如果箭头表达式仅仅就是简化了函数的命名,我们为什么要改变原来的习惯而去使用它呢?

箭头函数内部没有constructor方法,也没有prototype,所以不支持new操作。但是它对this的处理与一般的普通函数不一样。箭头函数的 this 始终指向函数定义时的this,而非执行时。

var o = {
      x : 1,
      func : function() { console.log(this.x) },
      test : function() {
          setTimeout(function() {
              alert(this); //this指针转为全局window
              this.func();
          }, 1000);
      }
  };
  o.test();  // TypeError : this.func is not a function
//----改为箭头函数
var o = {
    x : 1,
    func : function() { console.log(this.x) },
    test : function() {
        setTimeout(() => { this.func() }, 100);
    }
};
o.test();    //这回this就指向o了
复制代码

****(二)Class


  1. 普通类:属性,构造方法,普通方法(无重载
class Person {
constructor(name, age, job) {
this.name = name;
this.age = age;
this.job = job;
this.friends = ['Shelby', 'Court'];
}
sayName() {
console.log(this.name);
}
}
let person = new Person('张三', 26, '司机');
person.sayName();//张三  
复制代码

2.静态方法:  

class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
           //静态方法
static distance(a, b) {
const dx = a.x - b.x;
const dy = a.y - b.y;
return Math.sqrt(dx * dx + dy * dy);
}
}
const p1 = new Point(5, 5);
const p2 = new Point(10, 10);
        //取2点之间的距离:
console.log(Point.distance(p1, p2)); //7.0710678118654755  
复制代码

3.ES6明确规定,Class内部只有静态方法,没有静态属性,但可以用另外方式解决

class Foo {  
}  
Foo.prop = 1;  
Foo.prop // 1  
        //---单例模式  
class Cache {
constructor(id,name){
this.id = id;
this.name = name;
}
static getInstance() {
if(!Cache.instance) {
Cache.instance = new Cache();
}
return Cache.instance;
}
}
var cache = Cache.getInstance();
cache.id = 1;
cache.name = "wangdy";
console.log(cache)//Cache {id: 1, name: "wangdy"}
复制代码

4.继承:  

class Animal {
constructor(name) {
this.name = name;
}
speak() {
console.log(this.name + ' 叫了几声...');
}
}
//类继承(只有单继承)
class Dog extends Animal {
//方法的重写
speak() {
console.log(this.name + ' barks.');
}
}
//可以直接使用父类的构造方法
let dog = new Dog('旺财');
dog.speak();//旺财 barks. 
//-------------------vue中loginbean的单例模式--------------------------
class LoginBean {
  static getInstance() {
    if (!LoginBean.instance) {
      LoginBean.instance = new LoginBean();
    }
    return LoginBean.instance;
  }
  constructor() {
      this.id = 0;
      this.nicheng = null;
  }  
}
var loginbean = LoginBean.getInstance();
export default loginbean;


作者:zhulin1028

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

相关文章
|
7月前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
69 2
|
2月前
|
安全
ES5/ES6 的继承除了写法以外还有什么区别
ES5 和 ES6 的继承主要区别在于实现机制和语法糖。ES5 通过原型链和构造函数模拟类的继承,而 ES6 引入了 class 关键字,使继承更加直观和简洁,支持 super 调用父类方法,提升了代码可读性和维护性。
|
3月前
|
JavaScript
ES6--->箭头函数、类、模块化
ES6--->箭头函数、类、模块化
26 3
|
3月前
|
JavaScript 前端开发
ES6+ 特性,箭头函数、解构赋值、模块导入
ES6+ 特性,箭头函数、解构赋值、模块导入
|
7月前
|
网络架构
ES6箭头函数的特性
ES6箭头函数的特性
|
7月前
|
JavaScript 前端开发 网络架构
JavaScript开发中ES6+新特性:解释箭头函数的作用以及它与普通函数的区别。
JavaScript开发中ES6+新特性:解释箭头函数的作用以及它与普通函数的区别。
73 1
ES6学习(十一)—Class 的基本语法和继承
ES6学习(十一)—Class 的基本语法和继承
ES5 / ES6 的继承除了写法以外还有什么区别
ES5 / ES6 的继承除了写法以外还有什么区别
101 0
|
Web App开发 JSON JavaScript
前端技术ES6新特性解构字符串扩展表达式箭头函数对象拓展运算符map 和 reduce Promise 模块化export import及Node.js
ECMAScript 6.0(以下简称 ES6,ECMAScript 是一种由 Ecma 国际(前身为欧洲计算机制造商协会,英文名称是 European Computer Manufacturers Association)通过 ECMA-262标准化的脚本程序设计语言)是 JavaScript 语言的下一代标准,已经在 2015 年 6 月正式发布了,并且从 ECMAScript 6 开始,开始采用年号来做版本。即 ECMAScript 2015,就是 ECMAScript6。它的目标,是使得 JavaScript 语言可以用来编写复杂的大型应用程序,成为企业级开发语言。
90 0
|
自然语言处理 JavaScript
ES6中的箭头函数及其使用场景
ES6 (ECMAScript 2015) 引入了许多新特性,其中之一就是箭头函数。箭头函数是一种更加简洁和便捷的函数定义方式,本文将详细介绍 ES6 中的箭头函数,并探讨其适用场景及注意事项。
131 0