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

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

相关文章
|
安全 区块链 数据安全/隐私保护
区块链技术在数字身份认证中的应用与展望
【2月更文挑战第3天】 随着数字化时代的到来,个人身份认证的安全性和便捷性成为了重要的议题。区块链技术作为一种去中心化、不可篡改的分布式账本技术,具有很大潜力用于解决数字身份认证领域的问题。本文将探讨区块链技术在数字身份认证中的应用现状,分析其优势和挑战,并展望未来发展方向。
736 1
【JavaSE专栏64】抽象类和接口,不能被实例化的类有什么用?
【JavaSE专栏64】抽象类和接口,不能被实例化的类有什么用?
402 0
|
Linux C语言 C++
CentOS 7.6 编译安装最新版本GCC 9.2.0 实录
CentOS 7.6 编译安装最新版本GCC 9.2.0 实录,GCC是Linux的核心模块,升级可能会导致一些问题,请谨慎升级,升级之前做好备份工作。
|
8月前
|
传感器 人工智能 算法
傅利叶开源人形机器人,提供完整的开源套件!Fourier N1:具备23个自由度和3.5米/秒运动能力
傅利叶推出的开源人形机器人N1搭载自研动力系统与多模态交互模块,具备23个自由度和3.5米/秒运动能力,提供完整开源套件助力开发者验证算法。
636 3
傅利叶开源人形机器人,提供完整的开源套件!Fourier N1:具备23个自由度和3.5米/秒运动能力
|
缓存 编解码 JavaScript
< 前端性能优化: 资源加载优化 >
众所周知,前端是由HTML、CSS、JS等文件资源共同作用下渲染构建出来的。现今前端项目,大多为单页面应用,单页面应用的优点非常多(点击跳转 SPA单页面讲解),但是也并非没有缺点。由于单页面的原因,项目所需资源都需要在初次加载首屏时被加载,这就造成了首屏加载性能受到影响!对于首屏性能优化,就衍生出了相关需要思考的问题。如何将首屏加载的资源,分段将需要的资源及时加载出来,避免页面内容不显示的同时,又能避免加载多余并非立刻需要使用的资源呢?
340 0
< 前端性能优化: 资源加载优化 >
|
人工智能 自然语言处理 安全
Claude官网中文版:在国内使用claude AI的最佳选择!
Claude 是 Anthropic 公司开发的一款大型语言模型,类似于 OpenAI 的 ChatGPT 或 Google 的 Bard。它被设计成一个乐于助人 😊、诚实 🤝 且无害 😇 的 AI 助手。
|
API
Vite 中环境变量的配置方法
【10月更文挑战第10天】 Vite 中环境变量的配置方法
1351 2
|
存储 移动开发 关系型数据库
HarmonyOS 鸿蒙面试第一弹
HarmonyOS 鸿蒙面试第一弹
|
移动开发 前端开发 JavaScript
history.pushstate用法详解
history.pushstate用法详解
|
缓存 安全 Ubuntu
Linux配置代理上网
如何配置Linux代理
855 1

热门文章

最新文章