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

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

相关文章
|
6天前
|
JavaScript
js开发:请解释什么是ES6的类(class),并说明它与传统构造函数的区别。
ES6的类提供了一种更简洁的面向对象编程方式,对比传统的构造函数,具有更好的可读性和可维护性。类使用`class`定义,`constructor`定义构造方法,`extends`实现继承,并可直接定义静态方法。示例展示了如何创建`Person`类、`Student`子类以及它们的方法调用。
23 2
|
6天前
|
网络架构
ES6箭头函数的特性
ES6箭头函数的特性
|
6天前
|
JavaScript 前端开发 网络架构
JavaScript开发中ES6+新特性:解释箭头函数的作用以及它与普通函数的区别。
JavaScript开发中ES6+新特性:解释箭头函数的作用以及它与普通函数的区别。
44 1
|
5月前
ES6学习(十一)—Class 的基本语法和继承
ES6学习(十一)—Class 的基本语法和继承
|
9月前
ES5 / ES6 的继承除了写法以外还有什么区别
ES5 / ES6 的继承除了写法以外还有什么区别
【ES6】模板字符串、简化对象写法、箭头函数
【ES6】模板字符串、简化对象写法、箭头函数
62 0
|
JavaScript
ts(typescript) 字类 继承父类 在字类构造函数为啥需要先super()调用 分析
ts(typescript) 字类 继承父类 在字类构造函数为啥需要先super()调用 分析
ts(typescript) 字类 继承父类 在字类构造函数为啥需要先super()调用 分析
|
JavaScript 前端开发
ES6新特性 类(class)详解
ES6新特性 类(class)详解
115 0
|
Web App开发 JSON JavaScript
JS:ES6(ES2015)新特性之常量、箭头函数、解构赋值
JS:ES6(ES2015)新特性之常量、箭头函数、解构赋值
208 0