分享

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

 zhulin1028 2022-04-20

(一)箭头函数

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;   

    转藏 分享 献花(0

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多