当前位置:网站首页>ES6新特性(6)之箭头函数/Class类
ES6新特性(6)之箭头函数/Class类
2022-04-21 11:10:00 【zhulin1028】
目录
(一)箭头函数
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]所创,转载请带上原文链接,感谢
https://zhulin1028.blog.csdn.net/article/details/123973130
边栏推荐
- MATLAB---坐标轴多图片显示
- MySQL in-depth study (30): database design specification
- Dapr 远程调试之 Nocalhost
- 【生活中的逻辑谬误】对人不对事和两难陷阱
- How does IOT platform realize business configuration center
- First go program
- 活动报名 | 如何基于开源项目 Tapdata PDK,快速完成数据源和目标的开发?
- Tgpimage in GDI + loads images from streams
- IoT平台如何实现业务配置中心
- How does the webmaster prevent the website from being hacked
猜你喜欢

Pgpool II 4.3 Chinese Manual - introductory tutorial
![[nonlinear control theory] 1_ Lyapunov direct method](/img/ad/68bceb288d40ae98b60dbb83e0b91d.png)
[nonlinear control theory] 1_ Lyapunov direct method

pgpool-II 4.3 中文手册 - 入门教程

【acwing】1459. Cow Gymnastics (simulation, thinking)

How does IOT platform realize business configuration center

万元礼品奖池 玩转「Lighthouse」有奖征文来袭

阿里超大规模 Flink 集群运维体系介绍

注册新西兰公司流程和需要的资料

IoT平台如何实现业务配置中心

pgpool-II 4.3 中文手册 - 入门教程
随机推荐
Kubernetes 中数据包的生命周期 -- 第 1 部分
Applet lifecycle
Difference between map and jsonobject
P4 Tutorials---- source routing
Matlab GUI --- piczoom animation demonstration
后缀数组专项训练
Matlab GUI --- animation demonstration of singleselectionlistbox
Go语言错误处理
[nonlinear control theory] 1_ Lyapunov direct method
GO interface的使用
从B站和小红书看,如何做好社区产品?
O2oa secondary development - use the open source platform to build a complete OA (3) - development enterprise reimbursement approval
AC自动机专题训练
[interview ordinary people vs Expert Series] understanding of B tree and B + tree
从思维转变看数字化转型 IT 经营
手把手教你在云上开发一个图片压缩工具
Why have major apps launched the old version?
【leetcode】647.回文子串
Bucket sorting ← C language implementation
Construction of go environment